136 lines
3.7 KiB
JavaScript
136 lines
3.7 KiB
JavaScript
var body = $("body"),
|
||
people = $(".people"),
|
||
clientWidth = document.body.clientWidth,
|
||
clientHeight = document.body.clientHeight,
|
||
totalNums = 0;
|
||
|
||
// 1：让人物移动起来
|
||
// 2：生成炸弹和苹果（随机生成）
|
||
// 3：炸弹 苹果 和 人物的碰撞检测
|
||
// 超过屏幕删除
|
||
// 如果没有超过屏幕，需要进行碰撞检测
|
||
// 炸弹 - 分数
|
||
// 苹果 + 分数
|
||
|
||
body.onmousemove = function (e) {
|
||
var x = e.x, moveX = x - 100;
|
||
people.style.left = `${moveX < 0 ? 0 : moveX}px`;
|
||
|
||
// 右移动
|
||
if (moveX > clientWidth / 2) {
|
||
people.classList.remove("right")
|
||
// 左移动
|
||
} else {
|
||
people.classList.add("right")
|
||
}
|
||
}
|
||
|
||
function CreatedResources(type) {
|
||
var x = parseInt(Math.random() * clientWidth) - (type == 'apple'? 40 : 60) ;
|
||
x < 0 ? x = 0 : x;
|
||
|
||
var apple = document.createElement("img");
|
||
apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
|
||
apple.className = type == "apple" ? "apple motion" : "boom motion";
|
||
apple.style.left = `${x}px`;
|
||
apple.style.top = `${type == 'apple'? -40 : -60}px`;
|
||
body.appendChild(apple);
|
||
motion(apple, type)
|
||
}
|
||
|
||
function motion (el, type) {
|
||
var apple = 0, bmob = 0
|
||
if (type == "apple") {
|
||
apple = setInterval(() => {
|
||
el.style.top = `${parseInt(el.style.top) + 30}px`;
|
||
if (parseInt(el.style.top) > clientHeight) {
|
||
body.removeChild(el)
|
||
clearInterval(apple)
|
||
} else {
|
||
JudgingCollision(el, apple)
|
||
}
|
||
},60)
|
||
|
||
} else {
|
||
bmob = setInterval(() => {
|
||
el.style.top = `${parseInt(el.style.top) + 50}px`;
|
||
if (parseInt(el.style.top) > clientHeight) {
|
||
setTimeout(()=> {
|
||
try {
|
||
body.removeChild(el)
|
||
clearInterval(bmob)
|
||
} catch (e) {}
|
||
|
||
},500)
|
||
} else {
|
||
JudgingCollision(el,bmob)
|
||
}
|
||
},80)
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
/**
|
||
* 判断是否碰撞
|
||
* @constructor
|
||
*/
|
||
function JudgingCollision(span, timeout) {
|
||
var people = $(".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.classList.contains("apple")) {
|
||
console.log("苹果");
|
||
totalNums+=30;
|
||
$(".appleaudio").play()
|
||
$(".totalNums").innerText = `${totalNums}分`
|
||
setTimeout(()=>{
|
||
body.removeChild(span)
|
||
clearInterval(timeout)
|
||
},540)
|
||
} else {
|
||
totalNums-=40;
|
||
span.src = "./img/bombimg.png"
|
||
$(".boomaudio").play()
|
||
$(".totalNums").innerText = `${totalNums}分`
|
||
setTimeout(()=>{
|
||
body.removeChild(span)
|
||
clearInterval(timeout)
|
||
},540)
|
||
console.log("炸弹")
|
||
}
|
||
}
|
||
}
|
||
|
||
function Created() {
|
||
var random = parseInt(Math.random() * 100);
|
||
if (random <= 80) {
|
||
CreatedResources("bomb")
|
||
console.log("生成炸弹")
|
||
} else {
|
||
CreatedResources("apple")
|
||
console.log("生成苹果")
|
||
}
|
||
}
|
||
|
||
setInterval(() => {
|
||
Created();
|
||
},1000)
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
} |