367 lines
10 KiB
JavaScript
367 lines
10 KiB
JavaScript
class bird {
|
|
GameState = false
|
|
innerHeight = window.innerHeight;
|
|
innerWidth = window.innerWidth;
|
|
|
|
// 鸟的下落速度
|
|
birdDownSpeed = 8
|
|
|
|
// 鸟的上升速度
|
|
birdUpSpeed = 40
|
|
|
|
// 地板和水管的移动速度
|
|
groundSpeed = 5
|
|
|
|
// 上下水管的间隙
|
|
WaterPipeClearance = 150
|
|
|
|
// 水管的左右间隙
|
|
WaterPipeLeftRightClearance = 300
|
|
|
|
// 一秒创建多少个水管
|
|
createdWaterPipeXTime = 500
|
|
|
|
// 生成水管的X轴位置
|
|
WaterPipeX = 0
|
|
|
|
// 分数
|
|
TotalScore = 0
|
|
|
|
|
|
// // 鸟的下落速度
|
|
// birdDownSpeed = 10
|
|
// // 鸟的上升速度
|
|
// birdUpSpeed = 60
|
|
// // 地板和水管的移动速度
|
|
// groundSpeed = 10
|
|
// // 上下水管的间隙
|
|
// WaterPipeClearance = 100
|
|
// // 水管的左右间隙
|
|
// WaterPipeLeftRightClearance = 200
|
|
// // 一秒创建多少个水管
|
|
// createdWaterPipeXTime = 300
|
|
|
|
|
|
constructor() {
|
|
this.bindEvent();
|
|
this.birdAction();
|
|
this.groundMove();
|
|
this.scoreAction()
|
|
this.ChangeColor()
|
|
//this.createdWaterPipe()
|
|
setInterval(() => {
|
|
if (this.GameState) {
|
|
this.createdWaterPipe();
|
|
}
|
|
}, this.createdWaterPipeXTime);
|
|
}
|
|
|
|
|
|
//绑定事件
|
|
bindEvent() {
|
|
click(".easy", () => {
|
|
_(".waterpipe").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameState()
|
|
this.Easy()
|
|
})
|
|
click(".difficulty", () => {
|
|
_(".waterpipe").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameState()
|
|
this.Difficulty()
|
|
})
|
|
click(".stop", () => {
|
|
this.changeGameState()
|
|
_(".waterpipe").forEach(v => {
|
|
clearInterval(v.time)
|
|
})
|
|
$(".continue").remove("hidden")
|
|
$(".start").add("hidden")
|
|
})
|
|
click(".continue", () => {
|
|
_(".waterpipe").forEach(v => {
|
|
this.WaterPipeMove(v)
|
|
})
|
|
this.changeGameState()
|
|
$(".continue").add("hidden")
|
|
})
|
|
click(".voice", () => {
|
|
$(".music").pause()
|
|
$(".point").pause()
|
|
$(".die").pause()
|
|
$(".Mute").remove("hidden")
|
|
$(".voice").add("hidden")
|
|
})
|
|
click(".Mute", () => {
|
|
$(".music").play()
|
|
$(".Mute").add("hidden")
|
|
$(".voice").remove("hidden")
|
|
})
|
|
}
|
|
|
|
// 改变游戏状态
|
|
changeGameState() {
|
|
if (this.GameState) {
|
|
$(".stop").add("hidden")
|
|
$(".start").remove("hidden")
|
|
$(".music").pause()
|
|
$(".voice").add("hidden")
|
|
this.GameState = false
|
|
} else {
|
|
this.ChangeColor()
|
|
$(".stop").remove("hidden")
|
|
$(".start").add("hidden")
|
|
$(".score").remove("hidden")
|
|
$(".voice").remove("hidden")
|
|
$(".music").play()
|
|
this.GameState = true
|
|
setTimeout(() => {
|
|
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
//鸟的移动
|
|
birdAction() {
|
|
var clcikTime = 0, currentTime = 0;
|
|
//鸟的初始位置
|
|
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
|
|
// $(".bird").style.animation += ', birdfly 0.7s linear infinite;'
|
|
|
|
//往下掉
|
|
setInterval(() => {
|
|
if (this.GameState) {
|
|
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
|
|
}
|
|
|
|
}, 1000 / 16);
|
|
|
|
|
|
//上升
|
|
click("body", () => {
|
|
if (this.GameState) {
|
|
clcikTime = (new Date()).getTime()
|
|
$(".bird").add("up")
|
|
$(".bird").remove("down")
|
|
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
|
|
}
|
|
|
|
})
|
|
|
|
setInterval(() => {
|
|
if (this.GameState) {
|
|
currentTime = (new Date()).getTime();
|
|
//改变鸟的朝向
|
|
if (currentTime - clcikTime > 300) {
|
|
$(".bird").add("down")
|
|
$(".bird").remove("up")
|
|
}
|
|
}
|
|
}, 300)
|
|
|
|
|
|
}
|
|
|
|
|
|
// 地板移动
|
|
groundMove() {
|
|
$(".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`
|
|
}
|
|
this.collisionground($(".bird"), $(".ground"))
|
|
}, 1000 / 16);
|
|
}
|
|
|
|
//地板的碰撞检测
|
|
collisionground(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()
|
|
console.log('碰撞成功')
|
|
}
|
|
}
|
|
|
|
//创建水管
|
|
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;
|
|
|
|
|
|
//console.log(TopWaterPipeHeight);
|
|
|
|
if (this.WaterPipeX == 0) {
|
|
this.WaterPipeX = this.innerWidth
|
|
} else {
|
|
this.WaterPipeX += this.WaterPipeLeftRightClearance
|
|
}
|
|
// 插入水管图片
|
|
|
|
|
|
var cretedImg = (e) => {
|
|
var img = document.createElement("img");
|
|
|
|
img.src = `./img/${e == "top" ? 'sg_t' : 'sg_b'}.png`;
|
|
|
|
img.className = "waterpipe"
|
|
|
|
img.style = `${e}: ${e == "top" ? 0 : 112}px;
|
|
height: ${e == "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)
|
|
// console.log("水管");
|
|
}
|
|
|
|
//水管移动
|
|
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)
|
|
} else {
|
|
this.collisionWaterPipe($(".bird"), img)//bird = react1,img = react2
|
|
}
|
|
|
|
}, 1000 / 16)
|
|
}
|
|
|
|
// 水管的碰撞检测
|
|
collisionWaterPipe(react1, react2) {
|
|
if (react1.offsetLeft < react2.offsetLeft + react2.offsetWidth &&
|
|
react1.offsetLeft + react1.offsetWidth > react2.offsetLeft &&
|
|
react1.offsetTop < react2.offsetTop + react2.offsetHeight &&
|
|
react1.offsetHeight + react1.offsetTop > react2.offsetTop
|
|
) {
|
|
this.gameOver()
|
|
console.log('碰撞成功')
|
|
|
|
} else {
|
|
// console.log("react2.offsetLeft + react2.offsetWidth:", react2.offsetLeft + react2.offsetWidth);
|
|
|
|
if ((react2.offsetLeft + react2.offsetWidth) == 105) {
|
|
this.TotalScore += 0.5;
|
|
if (!String(this.TotalScore).includes(".")) {
|
|
console.log("==========分数=======: ", this.TotalScore)
|
|
this.scoreAction()
|
|
$(".point").play()
|
|
//换背景图
|
|
|
|
if (this.TotalScore >= 10) {
|
|
$("body").style.backgroundImage = `url(./img/night.png)`
|
|
// function ResumeError() {
|
|
// return true;
|
|
// }
|
|
// window.onerror = ResumeError;
|
|
// console.log("xixi");
|
|
this.createdWaterPipe()
|
|
|
|
}
|
|
}
|
|
}
|
|
// console.log('没撞上')
|
|
|
|
}
|
|
}
|
|
|
|
//分数数字的变化
|
|
scoreAction() {
|
|
var TotalScoreArr = String(this.TotalScore).split("")
|
|
$(".score").innerHTML = ""
|
|
TotalScoreArr.forEach(v => {
|
|
$(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
|
|
})
|
|
}
|
|
|
|
//游戏结束
|
|
gameOver() {
|
|
$(".die").play()
|
|
this.changeGameState()
|
|
_(".waterpipe").forEach(v => {
|
|
clearInterval(v.time)
|
|
})
|
|
|
|
var gameOver = document.createElement("img")
|
|
gameOver.src = "./img/gameover.png"
|
|
$(".start").replaceChild(gameOver, $(".name"))
|
|
click(".play", () => location.reload())
|
|
$(".start").removeChild($(".grade"))
|
|
$(".start").removeChild($(".color"))
|
|
$(".play").remove("hidden")
|
|
}
|
|
|
|
// 换皮肤
|
|
ChangeColor() {
|
|
click(".yellow", () => {
|
|
$(".bird").style.animation = "yelloBirdmove 0.4s linear infinite"
|
|
})
|
|
click(".blue", () => {
|
|
$(".bird").style.animation = "blueBirdmove 0.4s linear infinite"
|
|
console.log(2);
|
|
})
|
|
click(".red", () => {
|
|
$(".bird").style.animation = "redBirdmove 0.4s linear infinite"
|
|
console.log(3);
|
|
})
|
|
}
|
|
|
|
// 难度
|
|
Easy() {
|
|
this.birdDownSpeed = 7
|
|
this.birdUpSpeed = 40
|
|
this.groundSpeed = 5
|
|
this.WaterPipeClearance = 150
|
|
this.WaterPipeLeftRightClearance = 300
|
|
this.createdWaterPipeXTime = 2000
|
|
}
|
|
|
|
Difficulty() {
|
|
this.birdDownSpeed = 10
|
|
this.birdUpSpeed = 60
|
|
this.groundSpeed = 10
|
|
this.WaterPipeClearance = 70
|
|
this.WaterPipeLeftRightClearance = 220
|
|
this.createdWaterPipeXTime = 1000
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
new bird() |