开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第一天，点击查看活动详情
线上地址：mygame.codeape.site
开发技术
vue2 + js
需求
点击飞机开始/暂停游戏，游戏进行中飞机自动发射子弹，敌人随机从顶部出现，当敌人到达底部，视为逃脱成功，被飞机击中视为消灭敌人增加得分，飞机撞击敌人(或双击飞机)游戏结束。
飞机跟随鼠标
当点击飞机的时候获取飞机坐标，同时需要获取开始时候子弹的位置，给飞机添加跟随鼠标移动的事件；紧接着需要调用发射子弹和创建敌人函数。
getMouse() {
clearTimeout(this.clickTime);
let event = window.event;
this.clickTime = setTimeout(() => {
if (!this.playState) {
this.promptMessage();
// 获取开始时候的子弹位置
this.mouseEvent.x = event.pageX - this.windowLeft;
this.mouseEvent.y = event.pageY - this.windowTop;
this.addBullet();
this.addEnemy();
// 添加飞机跟随鼠标移动事件
document.addEventListener("mousemove", this.mouseMove);
// 开启增加子弹、增加敌人定时器
this.addBulletNumTimer();
this.addEnemyNumTimer();
this.playState = true;
this.playGameOver = false;
} else {
// 移除飞机跟随鼠标移动事件
document.removeEventListener("mousemove", this.mouseMove, false);
this.playState = false;
}
}, 200);
},
发射子弹
首先给子弹数组添加一个数据(即添加一颗子弹)
addBullet() {
this.allBullet.push({
x: this.mouseEvent.x - 1,
y: this.mouseEvent.y - this.bulletSpeed - 30,
});
this.bulletMove();
},
然后是添加子弹移动的计时器，用来持续发射子弹
bulletMove() {
clearInterval(this.bulletTimer);
this.bulletTimer = setInterval(() => {
this.allBullet.forEach((item, index, arr) => {
arr[index].y -= this.bulletSpeed;
});
}, 50);
},
敌人来袭
添加敌人，敌人的创建与移动和子弹类似
addEnemy() {
// 生产一个在窗口范围内的整数
let x = Math.round(Math.random() * this.windowWidth);
this.allEnemy.push({
x: x,
y: this.topPosition,
});
this.enemyCome();
},
创建计时器持续移动敌人
enemyCome() {
clearInterval(this.enemyTimer);
this.enemyTimer = setInterval(() => {
this.allEnemy.forEach((item, index, arr) => {
arr[index].y += this.enemySpeed;
});
}, 50);
},
watch监听子弹和敌人
- 监听子弹
当子弹到达顶部清除该子弹
allBullet: {
handler: function (e) {
if (e[0] && e[0].y && e[0].y <= this.topPosition) {
e.splice(0, 1);
this.bulletMove();
}
},
deep: true,
},
- 监听敌人
遍历子弹判断子弹是否触碰到敌人，触碰到就销毁子弹；同时还需判断飞机是否和敌人发生碰撞，发生了碰撞则游戏结束
allEnemy: {
handler: function (e) {
if (e[0] && e[0].y && e[0].y >= this.windowHeight) {
e.splice(0, 1);
this.enemyCome();
this.bugNum++;
}
e.forEach((item, i, arr) => {
// 遍历如果子弹和触碰到臭虫就销毁
this.allBullet.forEach((item2, i2, arr2) => {
if (
item2.y >= item.y &&
item2.y <= item.y + 30 &&
item2.x >= item.x &&
item2.x <= item.x + 30
) {
arr.splice(i, 1);
arr2.splice(i2, 1);
this.score += this.enemyScore;
}
});
// 如果飞机触碰了臭虫游戏结束
if (
this.mouseEvent.y >= item.y - 20 &&
this.mouseEvent.y <= item.y + 50 &&
this.mouseEvent.x >= item.x - 20 &&
this.mouseEvent.x <= item.x + 50
) {
this.clearAll();
}
// 遍历从缩小界面返回弹出层时，删除越界的臭虫
if (e[i] && e[i].x && e[i].x >= this.windowWidth) {
e.splice(i, 1);
this.enemyCome();
}
});
},
deep: true,
},
收获
这个飞机大战小游戏是我大概一年多前开发出来的，写得也比较简单，当时是操作dom来进行的开发，重看曾经的代码，感到当初有些代码也有可优化的地方。但是做一个这样的小游戏需求对于当时技术比较菜的我来说js基础功底是有一定的提升的。
小游戏管理平台：juejin.cn/post/714916…
