300 lines
8.2 KiB
JavaScript
300 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 = "birdOneMotion"
|
|
|
|
constructor() {
|
|
console.log(this.innerWidth);
|
|
this.bindEvent();
|
|
this.birdAction();
|
|
this.groundAction();
|
|
|
|
this.resultAction()
|
|
|
|
setInterval(() => {
|
|
if (this.gameStatus) {
|
|
this.createdWaterPipe();
|
|
}
|
|
}, this.createdWaterPipeXTime)
|
|
// this.createdWaterPipe();
|
|
}
|
|
|
|
|
|
bindEvent() {
|
|
click(".s_normal", () => {
|
|
$(".bgm").play()
|
|
_(".sg").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameStatus()
|
|
})
|
|
|
|
click(".s_hard", () => {
|
|
$(".bgm").play()
|
|
this.WaterPipeClearance = 100
|
|
this.birdDownSpeed = 10
|
|
this.birdUpSpeed = 30
|
|
this.WaterPipeLeftRightClearance = 200
|
|
this.createdWaterPipeXTime = 3000
|
|
_(".sg").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameStatus()
|
|
})
|
|
|
|
click(".pause", () => {
|
|
this.changeGameStatus()
|
|
_(".sg").forEach(v => clearInterval(v.time))
|
|
$(".bgm").pause();
|
|
})
|
|
|
|
click(".pifu1", () => {
|
|
console.log("点击换皮肤")
|
|
this.birdTheme = `birdOneOneMotion`
|
|
$(".bird").style.animation = ` birdOneMotion 0.4s linear infinite`
|
|
|
|
})
|
|
|
|
click(".pifu2", () => {
|
|
console.log("点击换皮肤2")
|
|
this.birdTheme = `birdOneMotion2`
|
|
$(".bird").style.animation = ` birdOneMotion2 0.4s linear infinite`
|
|
|
|
})
|
|
|
|
click(".pifu3", () => {
|
|
console.log("点击换皮肤3")
|
|
this.birdTheme = `birdOneMotion3`
|
|
$(".bird").style.animation = ` birdOneMotion3 0.4s linear infinite`
|
|
})
|
|
}
|
|
|
|
changeGameStatus() {
|
|
if (this.gameStatus) {
|
|
$(".start").remove("hidden")
|
|
$(".pause").add("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`;
|
|
|
|
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;
|
|
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
|
|
) {
|
|
console.log('碰撞成功')
|
|
this.gameOver();
|
|
|
|
} else {
|
|
if ((el2.offsetLeft + el2.offsetWidth) == 101) {
|
|
this.TotalScore += 0.5
|
|
if (!String(this.TotalScore).includes(".")) {
|
|
console.log("==========分数=======: ", this.TotalScore);
|
|
$(".point").play()
|
|
this.resultAction()
|
|
|
|
}
|
|
if (this.TotalScore == 10) {
|
|
console.log("分数大于10分 可以修改背景")
|
|
$("body").style.backgroundImage = `url("./img/back2.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(".fanhui", () => location.reload())
|
|
click(".s_normal", () => location.reload())
|
|
click(".s_hard", () => location.reload())
|
|
}
|
|
|
|
|
|
}
|
|
|
|
new bird() |