310 lines
8.2 KiB
JavaScript
310 lines
8.2 KiB
JavaScript
class bird {
|
|
// 游戏的默认状态 false 未开始 true 开始游戏
|
|
gameStatus = false;
|
|
innerHeight = window.innerHeight;
|
|
innerWidth = window.innerWidth;
|
|
|
|
// 鸟的下落速度
|
|
birdDownSpeed = 8;
|
|
|
|
// 鸟的下落速度
|
|
birdUpSpeed = 40;
|
|
|
|
// 地板的移动速度
|
|
groundSpeed = 5;
|
|
|
|
// 上下水管的间隙
|
|
WaterPipeClearance = 150
|
|
|
|
// 水管的左右间隙
|
|
WaterPipeLeftRightClearance = 300
|
|
|
|
// 生成水管的X轴位置
|
|
WaterPipeX = 0
|
|
|
|
// 一秒创建多少个水管
|
|
createdWaterPipeXTime = 1000
|
|
|
|
// 总分
|
|
TotalScore = 0
|
|
|
|
|
|
// 鸟的默认主题
|
|
birdTheme = "birdMotion";
|
|
|
|
constructor() {
|
|
this.settingAction();
|
|
this.bindEvent();
|
|
this.birdAction();
|
|
this.groundAction();
|
|
|
|
this.resultAction()
|
|
|
|
setInterval(() => {
|
|
if (this.gameStatus) {
|
|
this.createdWaterPipe();
|
|
}
|
|
}, this.createdWaterPipeXTime)
|
|
// this.createdWaterPipe();
|
|
}
|
|
|
|
settingAction() {
|
|
// 换鸟主题的功能
|
|
_(".bird_list img").forEach((v, i) => {
|
|
v.onclick = () => {
|
|
switch (i) {
|
|
case 0:
|
|
this.birdTheme = "birdMotion"
|
|
break;
|
|
|
|
case 1:
|
|
this.birdTheme = "birdBlueMotion"
|
|
break;
|
|
case 2:
|
|
this.birdTheme = "birdRedMotion"
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
|
|
}
|
|
})
|
|
|
|
click(".menu .simple", () => {
|
|
this.startGame()
|
|
})
|
|
|
|
click(".menu .Infernal", () => {
|
|
this.startGame()
|
|
})
|
|
|
|
}
|
|
|
|
startGame() {
|
|
_(".sg").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameStatus()
|
|
}
|
|
|
|
|
|
bindEvent() {
|
|
|
|
click(".play", () => this.startGame())
|
|
|
|
click(".pause", () => {
|
|
this.changeGameStatus()
|
|
_(".sg").forEach(v => clearInterval(v.time))
|
|
})
|
|
}
|
|
|
|
changeGameStatus() {
|
|
if (this.gameStatus) {
|
|
// 暂停游戏
|
|
$(".start").remove("hidden")
|
|
$(".pause").add("hidden")
|
|
$(".menu").add("hidden")
|
|
$(".bird_list").add("hidden")
|
|
|
|
$(".play").remove("hidden")
|
|
|
|
this.gameStatus = false
|
|
|
|
} else {
|
|
|
|
// 开始游戏
|
|
$(".result").remove("hidden")
|
|
|
|
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite`
|
|
|
|
$(".start").add("hidden")
|
|
$(".pause").remove("hidden")
|
|
this.gameStatus = true
|
|
}
|
|
}
|
|
|
|
resultAction() {
|
|
var TotalScoreArr = String(this.TotalScore).split("")
|
|
$(".result").innerHTML = ""
|
|
TotalScoreArr.forEach(v => {
|
|
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
|
|
})
|
|
}
|
|
|
|
BumpGround(type) {
|
|
var GroundYStart = this.innerHeight - 112;
|
|
if (type = 1) {
|
|
GroundYStart -= 34
|
|
}
|
|
|
|
var birdBTop = $(".bird").offsetTop + $(".bird").offsetHeight;
|
|
|
|
if (birdBTop >= GroundYStart) {
|
|
console.log("碰到地板了");
|
|
this.gameOver();
|
|
}
|
|
}
|
|
|
|
birdAction() {
|
|
var clcikTime = 0, currentTime = 0;
|
|
// 设置鸟的初始位置
|
|
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
|
|
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
|
|
|
|
setInterval(() => {
|
|
if (this.gameStatus) {
|
|
this.BumpGround("1")
|
|
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
|
|
}
|
|
}, 1000 / 16)
|
|
|
|
|
|
click("body", () => {
|
|
if (this.gameStatus) {
|
|
|
|
this.BumpGround("2")
|
|
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;
|
|
if (TopWaterPipeHeight) {
|
|
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
|
|
}
|
|
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) {
|
|
try {
|
|
clearInterval(img.time)
|
|
$("body").removeChild(img)
|
|
} catch (error) { }
|
|
} else {
|
|
this.collision($(".bird"), img)
|
|
}
|
|
}, 1000 / 30)
|
|
}
|
|
|
|
/**
|
|
* 碰撞检测
|
|
* @param {*} el1 鸟
|
|
* @param {*} el2 水管
|
|
*/
|
|
collision(el1, el2) {
|
|
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
|
|
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
|
|
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
|
|
el1.offsetHeight + el1.offsetTop > el2.offsetTop
|
|
) {
|
|
this.gameOver();
|
|
} else {
|
|
|
|
if ((el2.offsetLeft + el2.offsetWidth) == 100) {
|
|
this.TotalScore += 0.5
|
|
if (!String(this.TotalScore).includes(".")) {
|
|
$(".point").play()
|
|
this.resultAction()
|
|
if (this.TotalScore >= 10) {
|
|
$("body").style.backgroundImage = `
|
|
url("./img/back_dark.png")
|
|
`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
gameOver() {
|
|
$(".hit").play()
|
|
this.changeGameStatus()
|
|
_(".sg").forEach(v => clearInterval(v.time))
|
|
|
|
var gameOver = document.createElement("img")
|
|
gameOver.src = "./img/gameover.png"
|
|
|
|
$(".start").replaceChild(gameOver, $(".logo"))
|
|
click(".play", () => location.reload())
|
|
}
|
|
|
|
}
|
|
|
|
new bird() |