class Game {
constructor() {
this.player = null; // 保存玩家节点
this.bulletsAry = []; // 子弹数组
this.enemysAry = []; // 敌机数组
this.totalScore = 0; // 总分
this.playingTime = null; // 时间函数
}
gameStart() {
$(‘#startBtn‘).click(() => {
$(‘#startPage‘).hide(); // 隐藏
$(‘#playingPage‘).show(); // 显示
this.initPage();
this.createPlayer();
})
}
// 游戏页面初始化
initPage() {
let count = 0;
this.playingTime = setInterval(() => {
count++;
this.createBullet(count);
this.moveBg();
this.moveBullet();
this.removeBullet();
this.createEnemy(count);
this.moveEnemy();
this.removeEnemy();
this.boom();
}, 20)
}
moveBg() {
let y = parseInt($(‘#playingPage‘).css("background-position-y"));
y++;
if (y >= $(‘#playingPage‘).innerHeight()) {
y = 0;
}
$(‘#playingPage‘).css("background-position-y", y);
}
// 创建玩家
createPlayer() {
this.player = new Player();
this.player.init();
this.player.move();
}
// 创建子弹
createBullet(count) {
if (count % 5 == 0) {
let bullet = new Bullet();
bullet.init(this.player.node);
this.bulletsAry.push(bullet);
}
}
// 子弹移动
moveBullet() {
for (let bullet of this.bulletsAry) {
bullet.move();
}
}
// 删除子弹
removeBullet() {
for (let i = 0; i < this.bulletsAry.length; i++) {
if (this.bulletsAry[i].node.position().top <= 0) {
this.bulletsAry[i].node.remove(); // 删除子弹节点
this.bulletsAry.splice(i, 1); // 删除数组里面的子弹数据
}
}
}
// 创建敌机
createEnemy(count) {
if (count % 20 == 0) {
let enemy = new Enemy(‘enemy-s‘, 5, 1, ‘enemy1_boom.gif‘, 1000); // 实参:背景图、速度、血量、死亡背景图、分数
enemy.init();
this.enemysAry.push(enemy); // 将每一个实例化对象push到数组里面
}
if (count % 80 == 0) {
let enemy = new Enemy(‘enemy-m‘, 3, 3, ‘enemy2_boom.gif‘, 2000);
enemy.init();
this.enemysAry.push(enemy);
}
if (count % 300 == 0) {
let enemy = new Enemy(‘enemy-l‘, 1, 7, ‘enemy3_boom.gif‘, 3000);
enemy.init();
this.enemysAry.push(enemy);
}
}
// 移动敌机
moveEnemy() {
for (let enemy of this.enemysAry) { // 遍历数组,取到每一个实例化对象enemy
if (!enemy.isDie) { // 判断敌机是否死亡,死亡后不调用移动方法
enemy.move(this.totalScore);
}
}
}
// 删除敌机
removeEnemy() {
for (let i = 0; i < this.enemysAry.length; i++) {
if (this.enemysAry[i].node.position().top >= $(‘#playingPage‘).innerHeight()) { // 敌机超出范围删除
this.enemysAry[i].node.remove();
this.enemysAry.splice(i, 1);
} else if (this.enemysAry[i].isDie) { // 判断敌机是否死亡
this.enemysAry[i].dieTime--; // 敌机死亡时间减为0删除敌机
if (this.enemysAry[i].dieTime <= 0) {
this.enemysAry[i].node.remove();
this.enemysAry.splice(i, 1);
}
}
}
}
// 判断碰撞
boom() {
for (let i = 0; i < this.enemysAry.length; i++) { // 获取敌机的每一个边的距离
let enemyTop = this.enemysAry[i].node.position().top;
let enemyBottom = this.enemysAry[i].node.position().top + this.enemysAry[i].node.outerHeight();
let enemyLeft = this.enemysAry[i].node.position().left;
let enemyRight = this.enemysAry[i].node.position().left + this.enemysAry[i].node.outerWidth();
for (let j = 0; j < this.bulletsAry.length; j++) { // 获取子弹每一个边的距离
let bulletsTop = this.bulletsAry[j].node.position().top;
let bulletsBottom = this.bulletsAry[j].node.position().top + this.bulletsAry[j].node.outerHeight();
let bulletsLeft = this.bulletsAry[j].node.position().left;
let bulletsRight = this.bulletsAry[j].node.position().left + this.bulletsAry[j].node.outerWidth();
// 判断子弹是否和飞机碰撞,四个临界点
if (enemyBottom >= bulletsTop && enemyLeft <= bulletsRight && enemyRight >= bulletsLeft && enemyTop <= bulletsBottom) {
this.bulletsAry[j].node.remove();
this.bulletsAry.splice(j, 1);
this.enemysAry[i].hp--;
if (this.enemysAry[i].hp == 0) {
this.enemysAry[i].node.css(‘background‘, `url(./images/${this.enemysAry[i].boomBg})`); //敌机死亡换图片
this.enemysAry[i].isDie = true; // 敌机死亡状态变为true
this.totalScore += this.enemysAry[i].score; // 分数
$(‘#mark‘).text(this.totalScore);
}
}
}
// 判断飞机是否和敌机相撞
let playerTop = this.player.node.position().top;
let playerBottom = this.player.node.position().top + this.player.node.outerHeight();
let playerLeft = this.player.node.position().left;
let playerRight = this.player.node.position().left + this.player.node.outerWidth();
if (enemyBottom >= playerTop + 40 && enemyLeft <= playerRight && enemyRight >= playerLeft && enemyTop <= playerBottom - 20) {
this.player.node.css(‘background‘, ‘url(./images/player_boom.gif)‘);
this.gameOver();
}
}
}
gameOver() {
clearInterval(this.playingTime);
$(‘#playingPage‘).off(‘mousemove‘); // JQuery删除事件
$(‘.game-over‘).show();
$(‘#markEnd‘).text(this.totalScore); // 文本显示内容
$(‘#continueBtn‘).click(function () {
location.reload(); // 重新加载页面
// history.go(0); // 返回历史上一个页面
})
}
}
new Game().gameStart();
class Player {
constructor() {
this.node = null;
}
init() {
this.node = $(‘<div>‘).addClass(‘player‘).appendTo(‘#playingPage‘);
}
move() {
$(‘#playingPage‘).mousemove((e) => {
let { pageX, pageY } = e;
let moveX = pageX - $(‘#playingPage‘).offset().left;
let moveY = pageY - $(‘#playingPage‘).offset().top;
this.node.css({
left: moveX - this.node.outerWidth() / 2,
top: moveY - this.node.outerHeight() / 2
})
})
}
}