281 lines
8.7 KiB
JavaScript
281 lines
8.7 KiB
JavaScript
class HoseBirds {
|
|
innerWidth = window.innerWidth;
|
|
innerHeight = window.innerHeight;
|
|
//游戏状态
|
|
gameStatus = false;
|
|
//地板速度
|
|
dibanMotionSpeed = 1;
|
|
//向上
|
|
Moveup = 50;
|
|
//向下
|
|
Movedown = 2;
|
|
//鸟皮肤
|
|
skinBirds = "instigateong";
|
|
//管道中间间隙
|
|
interval = 150;
|
|
//管道的间隙
|
|
space = 300;
|
|
//管道的数量
|
|
index = 0;
|
|
//水管移动
|
|
PipeSpeed = 10
|
|
|
|
indx = 0;
|
|
|
|
IntervalList = []
|
|
constructor() {
|
|
this.scroll();
|
|
this.SkinResurfacing();
|
|
this.Begin()
|
|
// this.pipelineimg()
|
|
this.Timeout()
|
|
$(".diban").style = `top:${(parseInt(this.innerHeight) - 112)}px;
|
|
width:${this.innerWidth}px;
|
|
height: 112px;
|
|
left:0px`
|
|
console.log((parseInt( this.innerWidth)%10))
|
|
}
|
|
scroll() {
|
|
$(".ong_img").style = `left:0px`;
|
|
$(".two_img").style.left = `${this.innerWidth}px`;
|
|
// console.log(this.innerWidth)
|
|
setInterval(() => {
|
|
// $(".ong_img").style.left = `px`;
|
|
if (parseInt($(".ong_img").style.left) <= -this.innerWidth) {
|
|
|
|
$(".ong_img").style.left = `${this.innerWidth}px`
|
|
} else {
|
|
$(".ong_img").style.left = `${parseInt($(".ong_img").style.left) - this.dibanMotionSpeed}px`
|
|
}
|
|
|
|
|
|
if (parseInt($(".two_img").style.left) <= -this.innerWidth) {
|
|
$(".two_img").style.left = `${this.innerWidth}px`
|
|
} else {
|
|
$(".two_img").style.left = `${parseInt($(".two_img").style.left) - this.dibanMotionSpeed}px`
|
|
}
|
|
}, 1)
|
|
}
|
|
//换主题
|
|
SkinResurfacing() {
|
|
// console.log((this.innerHeight - 112) / 2 - 12)
|
|
$(".bird").style.top = `${(this.innerHeight - 112) / 2 - 12}px`
|
|
_(".bird_title .bird_list img").forEach((v, i) => {
|
|
v.onclick = () => {
|
|
switch (i) {
|
|
case 0:
|
|
this.skinBirds = "instigateong"
|
|
$(".bird").style.animationName = "instigateong,birdShake"
|
|
break;
|
|
case 1:
|
|
this.skinBirds = "instigatetwo"
|
|
$(".bird").style.animationName = "instigatetwo,birdShake"
|
|
break;
|
|
case 2:
|
|
this.skinBirds = "instigatethress"
|
|
$(".bird").style.animationName = "instigatethress,birdShake"
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//开始
|
|
Begin() {
|
|
let clickTime;
|
|
//点击开始
|
|
|
|
$(".bird_title .start").onclick = (e) => {
|
|
$(".out").show();
|
|
$(".Integral").show();
|
|
this.gameStatus = true
|
|
$(".bird_title").none()
|
|
$(".bird").style.animationName = this.skinBirds;
|
|
//小鸟下降
|
|
this.IntervalList[1] = setInterval(() => {
|
|
// console.log("03b"+downclickTime)
|
|
if (this.gameStatus == true) {
|
|
let downclickTime = new Date().getTime();
|
|
// console.log(parseInt(clickTime)-parseInt(downclickTime))
|
|
if (clickTime - downclickTime < -300) {
|
|
$(".bird").remove("up")
|
|
$(".bird").add("down")
|
|
}
|
|
let Birdsy = parseInt($(".bird").style.top) + this.Movedown;
|
|
$(".bird").style.top = `${Birdsy}px`
|
|
}
|
|
|
|
}, 15)
|
|
//小鸟上升
|
|
$("body").onclick = () => {
|
|
if (this.gameStatus) {
|
|
clickTime = new Date().getTime();
|
|
// console.log("pp"+ clickTime)
|
|
//获取当前小鸟top值
|
|
let Birdsy = parseInt($(".bird").style.top);
|
|
$(".bird").style.top = `${Birdsy - this.Moveup}px`
|
|
$(".bird").add("up");
|
|
$(".bird").remove("down")
|
|
}
|
|
|
|
}
|
|
//生成管道计时器
|
|
this.IntervalList[0] = setInterval(() => {
|
|
this.pipelineimg()
|
|
}, 1000)
|
|
}
|
|
|
|
}
|
|
|
|
pipelineimg() {
|
|
|
|
//两个管道的高度
|
|
let qq = parseInt(this.innerHeight - 112 - this.interval);
|
|
//上管道的高度
|
|
let Toptube = getRandom(60, qq - 60);
|
|
let Downtube = qq - Toptube;
|
|
|
|
// console.log(qq, Toptube, Downtube)
|
|
|
|
//创建管道图片标签
|
|
let create = (t) => {
|
|
let img = document.createElement("img");
|
|
img.src = `./img/sg_${t}.png`
|
|
img.typ = t;
|
|
img.className = "pipe"
|
|
img.style = `
|
|
top:${t == "t" ? 0 : Toptube + this.interval}px;
|
|
left:${this.innerWidth + 55 + (this.space * this.index)}px;
|
|
height:${t == "t" ? Toptube : Downtube}px;
|
|
width: 55px;
|
|
`
|
|
return img
|
|
}
|
|
let img1 = create("b");
|
|
let img2 = create("t");
|
|
$("body").appendChild(img1)
|
|
$("body").appendChild(img2)
|
|
|
|
this.PipeMove([img1, img2])
|
|
this.index += 1;
|
|
|
|
}
|
|
//暂停
|
|
Timeout() {
|
|
|
|
$(".out").onclick = (e) => {
|
|
this.gameStatus = false;
|
|
e?.stopPropagation();
|
|
this.IntervalList.forEach((v) => {
|
|
clearInterval(v)
|
|
})
|
|
_(".pipe").forEach((v) => {
|
|
clearInterval(v.idd)
|
|
})
|
|
|
|
$(".bird_logo").show();
|
|
$(".Goon").show();
|
|
$(".tite").show();
|
|
}
|
|
|
|
$(".Goon").onclick = (e) => {
|
|
this.gameStatus = true;
|
|
e?.stopPropagation();
|
|
$(".start").onclick()
|
|
this.PipeMove(_(".pipe"))
|
|
$(".Goon").none();
|
|
$(".tite").none();
|
|
}
|
|
$(".Hungup").onclick = () => {
|
|
location.reload()
|
|
}
|
|
|
|
$(".difficulty").onclick = () => {
|
|
this.difficulty()
|
|
$(".start").onclick()
|
|
}
|
|
|
|
}
|
|
difficulty() {
|
|
this.Moveup = 50;
|
|
//向下
|
|
this.Movedown = 4;
|
|
//鸟皮肤
|
|
this.skinBirds = "instigateong";
|
|
//管道中间间隙
|
|
this.interval = 100;
|
|
//管道的间隙
|
|
this.space = 250;
|
|
//管道的数量
|
|
this.index = 0;
|
|
//水管移动
|
|
this.PipeSpeed = 10
|
|
}
|
|
|
|
//水管移动方法
|
|
PipeMove(a) {
|
|
|
|
a.forEach(img => {
|
|
//计时器
|
|
img.idd = setInterval(() => {
|
|
if (this.gameStatus == true) {
|
|
img.style.left = `${parseInt(img.style.left) - this.PipeSpeed}px`
|
|
//达到条件删除水管
|
|
if (parseInt(img.style.left) <= -55) {
|
|
$("body").removeChild(img);
|
|
clearInterval(img.idd)
|
|
} else {
|
|
this.Collisiondetection($(".bird"), img)
|
|
this.Collisiondetection($(".diban"), $(".bird"));
|
|
// this.collision($(".diban"), $(".bird"))
|
|
}
|
|
}
|
|
}, 100)
|
|
})
|
|
|
|
}
|
|
|
|
//碰撞检测
|
|
Collisiondetection(one, two) {
|
|
|
|
if (parseInt(one.style.left) < parseInt(two.style.left) + parseInt(two.style.width) &&
|
|
parseInt(one.style.left) + parseInt(one.style.width) > parseInt(two.style.left) &&
|
|
parseInt(one.style.top) < parseInt(two.style.top) + parseInt(two.style.height) &&
|
|
parseInt(one.style.height) + parseInt(one.style.top) > parseInt(two.style.top)
|
|
) {
|
|
this.conss()
|
|
|
|
|
|
} else {
|
|
if (two.typ == "t") {
|
|
// console.log(this.innerWidth)
|
|
if ((parseInt(two.style.left) + parseInt(two.offsetWidth)) == (100+(parseInt( this.innerWidth)%10))) {
|
|
this.indx += 1;
|
|
if (this.indx == 10) {
|
|
$("body").style = `background-image: url(./img/back_dark.png);`
|
|
}
|
|
let indx1 = this.indx.toString().split("");
|
|
$(".Integral").innerHTML = ""
|
|
indx1.forEach(v => {
|
|
$(".Integral").innerHTML += `<img src="./img/${v}.png">`
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
conss() {
|
|
$(".Hungup1").show();
|
|
$(".Hungup").show();
|
|
this.gameStatus = false;
|
|
setTimeout(() => {
|
|
$(".bird").remove("up");
|
|
$(".bird").add("down");
|
|
|
|
$(".bird").style.top = `${(parseInt(this.innerHeight) - 136)}px`
|
|
}, 300)
|
|
}
|
|
}
|
|
new HoseBirds();
|