又到了每日分享时间了，今天分享的内容为：JavaScript打飞机小游戏
效果图：
实现逻辑：
第一步：实现页面的排版、布局
1.1 准备打飞机游戏需要使用到的图片
1.2 开始游戏界面
1.3 进入游戏的界面
1.3.1 己方飞机
1.3.2 敌方飞机
1.3.3 己方飞机发射的子弹 第二步：开始游戏
2.1 点击开始游戏按钮，进入到游戏界面
2.2 摁下空格键，实现己方飞机跟随鼠标的移动==》游戏的开始
2.3 第二次摁下空格键时，实现己方飞机的暂停移动==》游戏的暂停
2.4 以此类推，实现开始和暂停的交换 第三步：开始游戏之后的发射子弹
3.1 定时创建子弹：
3.1.1 单位时间内创建子弹的数量
3.1.2 开始游戏和暂停游戏时：暂停游戏后，不能再创建子弹；再次开始游戏时，不能存在多个创建子弹的定时器==》把上一次创建子弹的定时器给清除或者不再开启定时器
3.2 制造子弹
3.2.1 制造子弹时，确定子弹的位置
3.2.2 根据当前己方飞机的位置
3.2.3 把子弹追加到文档中去
3.3 子弹的运动
3.3.1 子弹的top值是-子弹的高度时，删除子弹，清除定时器
3.4 子弹消失
3.4.1 子弹飞出游戏界面
3.4.2 清除子弹==》每一颗飞出到游戏界面之外的子弹，肯定是第一个创建的子弹（当前子弹所在父元素下的第一个子元素） 第四步：开始游戏之后的创建敌机
4.1 定时创建敌机
4.1.1 单位时间内创建敌机的数量
4.1.2 暂停之后不能重复性的开启创建敌机的定时器
4.1.3 敌机的概率出现：大、中、小三种敌机
=》小：75% 中：20% 大：5%
4.2 制造敌机
4.3 敌机的运动
4.4 敌机的消失 第五步：实现游戏的暂停
5.1 敌机运动速度的控制
5.2 实现游戏的暂停
5.2.1 清除己方飞机的移动
5.2.2 清除创建敌机
5.2.3 清除创建子弹
5.2.4 清除每颗子弹上的运动
5.2.5 清除每架敌机上的运动 第六步：实现开始游戏之后的背景图的运动
6.1 改变的是背景图的background-position-y的值
6.2 游戏界面的高度568，每运动568px是一个循环 第七步：检测子弹和敌机的碰撞
7.1 每一个敌机都是运动的，每一颗子弹也是运动的》在每一架敌机运动时，检测和所有游戏界面内存在的子弹的碰撞
7.2 创建全局变量：把当前游戏界面内存在的所有的子弹放入到该变量里
7.3 敌机运动的过程中，检测和每一颗子弹的碰撞
7.4 子弹和敌机发生碰撞时，子弹消失
7.4.1 把该子弹元素删除掉
7.4.2 把该子弹元素从全局变量集合里删除
7.5 敌机和子弹发生碰撞时，敌机血量减少==》每一颗子弹消耗的血量100
7.6 敌机的血量为0时，删除敌机元素？？？ 第八步：实现敌机的爆炸效果
8.1 替换爆炸图片
8.2 区分存活的敌机和死亡敌机（爆炸过程中的敌机）》标记每一架敌机的存活状态
8.3 延时删除敌机元素》显示爆炸效果
8.4 在创建敌机时，删除敌机集合中的死亡敌机 第九步：实现游戏的得分 第十步：检测己方飞机和敌机的碰撞
10.1 一对多的关系：敌机运动，己方飞机运动
10.2 在每一架敌机运动的过程中检测
10.3 碰撞的原理 第十一步：游戏结束
11.1 清除掉当前页面上的所有的定时器
11.2 清除掉所有子弹上的定时器以及删除所有的子弹元素
11.3 清除掉素有敌机上的定时器以及删除所有的敌机元素
11.4 清空子弹和敌机的集合
11.5 删除己方飞机上的移动事件
11.6 回到游戏开始界面
一、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript 原生打飞机游戏</title>
<link rel="stylesheet" href="style.css">
<script src="plane.js"></script>
</head>
<body>
<div id="game">
<div id="gameStart">
<span>开始游戏</span>
</div>
<div id="gameEnter"
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
