200 lines
5.1 KiB
JavaScript
200 lines
5.1 KiB
JavaScript
class bird {
|
||
|
||
gameStatus = false;
|
||
// 游戏的默认状态 false 未开始 true 开始游戏
|
||
innerHeight = window.innerHeight;
|
||
innerWidth = window.innerWidth;
|
||
// 获取当前页面的宽和高
|
||
|
||
// 鸟的下落速度
|
||
birdDownSpeed = 8;
|
||
|
||
// 鸟的下落速度
|
||
birdUpSpeed = 40;
|
||
|
||
// 地板的移动速度
|
||
groundSpeed = 5;
|
||
|
||
// 上下水管的间隙
|
||
WaterPipeClearance = 150
|
||
|
||
// 水管的左右间隙
|
||
WaterPipeLeftRightClearance = 300
|
||
|
||
// 生成水管的X轴位置
|
||
WaterPipeX = 0
|
||
|
||
// 一秒创建多少个水管
|
||
createdWaterPipeXTime = 500
|
||
|
||
constructor() {
|
||
this.bindEvent();
|
||
this.birdAction();
|
||
this.groundAction();
|
||
|
||
setInterval(() => {
|
||
if (this.gameStatus) {
|
||
this.createdWaterPipe();
|
||
}
|
||
}, this.createdWaterPipeXTime)
|
||
// this.createdWaterPipe();
|
||
}
|
||
|
||
|
||
bindEvent() {
|
||
// 创建一个绑定事件
|
||
click(".play", () => {
|
||
_(".sg").forEach(v => {
|
||
this.WaterPipeMove(v)
|
||
})
|
||
this.changeGameStatus()
|
||
})
|
||
|
||
click(".pause", () => {
|
||
this.changeGameStatus()
|
||
|
||
_(".sg").forEach(v => {
|
||
clearInterval(v.time)
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
changeGameStatus() {
|
||
// 更改游戏状态
|
||
if (this.gameStatus)
|
||
|
||
{
|
||
$(".start").remove("hidden")
|
||
$(".pause").add("hidden")
|
||
// 让.start里面类容显示 并给.pause添加隐藏
|
||
this.gameStatus = false
|
||
|
||
} else {
|
||
$(".bird").style.animation = "birdMotion 0.4s linear infinite"
|
||
$(".start").add("hidden")
|
||
$(".pause").remove("hidden")
|
||
this.gameStatus = true
|
||
// 否则反之，并且给小鸟添加animation动画属性覆盖之前游戏未开始的动画
|
||
}
|
||
}
|
||
|
||
|
||
|
||
birdAction() {
|
||
|
||
var clcikTime = 0, currentTime = 0;
|
||
// 设置定义鸟的初始位置
|
||
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
|
||
|
||
setInterval(() => {
|
||
if (this.gameStatus);
|
||
console.log(this.gameStatus)
|
||
{
|
||
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
|
||
}
|
||
}, 1000 / 16)
|
||
|
||
click("body", () => {
|
||
if (this.gameStatus) {
|
||
clcikTime = (new Date()).getTime()
|
||
$(".bird").add("up")
|
||
$(".bird").remove("down")
|
||
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
|
||
}
|
||
})
|
||
|
||
|
||
setInterval(() => {
|
||
|
||
if (this.gameStatus) {
|
||
currentTime = (new Date()).getTime();
|
||
if (currentTime - clcikTime > 300) {
|
||
$(".bird").add("down")
|
||
$(".bird").remove("up")
|
||
}
|
||
}
|
||
}, 300)
|
||
|
||
|
||
}
|
||
groundAction() {
|
||
$(".groundOne").style.left = '0px';
|
||
$(".groundTwo").style.left = `${this.innerWidth}px`;
|
||
|
||
setInterval(() => {
|
||
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
|
||
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
|
||
|
||
|
||
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
|
||
$(".groundOne").style.left = `${this.innerWidth}px`
|
||
}
|
||
|
||
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
|
||
$(".groundTwo").style.left = `${this.innerWidth}px`
|
||
}
|
||
}, 1000 / 16)
|
||
}
|
||
|
||
|
||
createdWaterPipe() {
|
||
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
|
||
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
|
||
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
|
||
|
||
if (this.WaterPipeX == 0) {
|
||
this.WaterPipeX = this.innerWidth
|
||
} else {
|
||
this.WaterPipeX += this.WaterPipeLeftRightClearance
|
||
}
|
||
|
||
var cretedImg = (type) => {
|
||
var img = document.createElement("img");
|
||
img.src = `./img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
|
||
img.className = "sg"
|
||
|
||
|
||
img.style = `
|
||
${type}: ${type == "top" ? 0 : 112}px;
|
||
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
|
||
left: ${this.WaterPipeX}px
|
||
`;
|
||
|
||
return img
|
||
}
|
||
|
||
|
||
var TopWaterPipe = cretedImg("top")
|
||
var BottomWaterPipe = cretedImg("bottom")
|
||
|
||
|
||
$("body").appendChild(TopWaterPipe)
|
||
$("body").appendChild(BottomWaterPipe)
|
||
|
||
this.WaterPipeMove(TopWaterPipe)
|
||
this.WaterPipeMove(BottomWaterPipe)
|
||
|
||
}
|
||
|
||
|
||
WaterPipeMove(img) {
|
||
img.time = setInterval(() => {
|
||
|
||
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
|
||
|
||
if (parseInt(img.style.left) <= -55) {
|
||
clearInterval(img.time)
|
||
$("body").removeChild(img)
|
||
}
|
||
|
||
}, 1000 / 16)
|
||
}
|
||
|
||
|
||
|
||
}
|
||
new bird()
|
||
// 初始化类
|