157 lines
4.2 KiB
JavaScript
157 lines
4.2 KiB
JavaScript
var body = document.querySelector("body");
|
||
var people = document.querySelector(".people");
|
||
var bombAudio = document.querySelector(".bombAudio");
|
||
var appleAudio = document.querySelector(".appleAudio");
|
||
// 屏幕的宽度
|
||
var screenWidth = document.body.clientWidth;
|
||
var screenHeight = document.body.clientHeight;
|
||
var fraction = 0;
|
||
var gameProbability = 0.4;
|
||
var bmobSpeed = 80;
|
||
var appleOffset = 20;
|
||
function createdEle(type) {
|
||
|
||
var Img = document.createElement("img");
|
||
Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
|
||
Img.className = type == 1 ? 'apple' : 'boom';
|
||
// 56 84
|
||
// 元素的宽度
|
||
var SpanWidth = type == 1 ? 40 : 60;
|
||
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
|
||
if (SpanLeft <= SpanWidth) {
|
||
SpanLeft = 0
|
||
}
|
||
|
||
Img.style = `
|
||
position: absolute;
|
||
left: ${SpanLeft}px;
|
||
top: ${type == 1 ? -56 : -84}px;
|
||
`;
|
||
|
||
body.appendChild(Img);
|
||
animation(type, Img)
|
||
}
|
||
|
||
function animation(type, span) {
|
||
// 苹果🍎
|
||
if (type == 1) {
|
||
var appleInterval = setInterval(function (){
|
||
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
|
||
// 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
|
||
if (parseInt(span.style.top) > screenHeight) {
|
||
body.removeChild(span)
|
||
clearInterval(appleInterval)
|
||
} else {
|
||
JudgingCollision(span, appleInterval)
|
||
}
|
||
},60)
|
||
// 炸弹💣
|
||
} else {
|
||
var boomInterval = setInterval(function (){
|
||
span.style.top = `${parseInt(span.style.top) + 20}px`;
|
||
//判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
|
||
if (parseInt(span.style.top) > screenHeight) {
|
||
body.removeChild(span)
|
||
clearInterval(boomInterval)
|
||
} else {
|
||
JudgingCollision(span, boomInterval)
|
||
}
|
||
},bmobSpeed)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 判断是否碰撞
|
||
* @constructor
|
||
*/
|
||
function JudgingCollision(span, timeout) {
|
||
var people = document.querySelector(".people");
|
||
var peopleX1 = parseInt(people.style.left);
|
||
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
|
||
var peopleX3 = people.offsetTop;
|
||
var peopleX4 = people.offsetTop + people.clientHeight;
|
||
|
||
var spanX1 = parseInt(span.style.left);
|
||
var spanX2 = parseInt(span.style.left) + span.clientWidth;
|
||
var spanX3 = parseInt(span.style.top);
|
||
var spanX4 = parseInt(span.style.top) + span.clientHeight;
|
||
|
||
// 碰撞检测
|
||
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
|
||
// 没碰上
|
||
}else{
|
||
if (span.className == "apple") {
|
||
fraction += 10;
|
||
|
||
// 如果分数超过100分，
|
||
if (fraction >= 100) {
|
||
// 降低苹果出现的概率，也就是提高炸弹数量
|
||
gameProbability = 0.2;
|
||
// 并且加快炸弹的速度
|
||
bmobSpeed = 80;
|
||
appleOffset = 40;
|
||
}
|
||
|
||
document.querySelector(".fraction").innerText = `${fraction}分`;
|
||
appleAudio.play()
|
||
body.removeChild(span)
|
||
clearInterval(timeout)
|
||
} else {
|
||
fraction -= 20;
|
||
document.querySelector(".fraction").innerText = `${fraction}分`;
|
||
bombAudio.play();
|
||
|
||
if (fraction <= 0) {
|
||
clearInterval(timeout)
|
||
confirm("游戏失败")
|
||
location.reload()
|
||
} else {
|
||
span.src = "./img/bombimg.png"
|
||
clearInterval(timeout)
|
||
setTimeout(function (){
|
||
body.removeChild(span)
|
||
},100)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function init () {
|
||
var probability = Number(Math.random().toFixed(1))
|
||
if (probability <= gameProbability) {
|
||
createdEle(1)
|
||
} else {
|
||
createdEle(2)
|
||
}
|
||
}
|
||
|
||
setInterval(function (){
|
||
init();
|
||
},200)
|
||
|
||
body.onmousemove = function (e) {
|
||
if (e.x <= 100) {
|
||
people.style.left = `0px`;
|
||
} else {
|
||
people.style.left = `${e.x - 100}px`;
|
||
}
|
||
|
||
// 判断人物向右移动
|
||
if (parseInt(people.style.left) > screenWidth / 2) {
|
||
people.className = 'people'
|
||
// 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
|
||
} else {
|
||
people.className = 'people leftPeople'
|
||
}
|
||
}
|
||
|
||
|
||
// 接到一个苹果加10分
|
||
// 接到炸弹减20
|
||
// 默认0分
|
||
// 结束条件：分数 < 0
|
||
|
||
|
||
// 任务
|
||
// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
|
||
//
|