接触 canvas 也只有一个多月，第一次完整实现一个游戏流程，收获还是挺大的。
射击游戏截图
先上 demo：https://littleyljy.github.io/demo/shootgame/
游戏规则
要求玩家控制飞机发射子弹，消灭会移动的怪兽，如果全部消灭了则游戏成功，如果怪兽移动到底部则游戏失败。
使用 ← 和 → 操作飞机 使用空格（space）进行射击 需有暂停功能 多关卡场景切换
游戏分为几个场景：
开始游戏（.game-intro） 游戏中（#canvas） 游戏失败（.game-failed） 游戏成功（.game-success） 游戏通关（.game-all-success） 暂停（.game-stop）实现场景切换，其实是先把所有场景 display: none , 然后通过 js 控制 data-status 分别为 start 、playing 、failed 、success 、all-success 、stop 来实现对应场景 display: block 。
HTML 和 CSS 如下：
| <div id="game" data-status="start"> <div class="game-panel"> <section class="game-intro game-ui"> <h1 class="section-title">射击游戏</h1> <p class="game-desc">这是一个令人欲罢不能的射击游戏，使用 ← 和 → 操作你的飞机，使用空格（space）进行射击，使用回车（enter）暂停游戏。一起来消灭宇宙怪兽吧！</p> <p class="game-level">当前Level: 1</p> <button class="js-play button">开始游戏</button> </section> <section class="game-failed game-ui"> <h1 class="section-title">游戏结束</h1> <p class="game-info-text">最终得分: <span class="score"></span></p> <button class="js-replay button">重新开始</button> </section> <section class="game-success game-ui"> <h1 class="section-title">游戏成功</h1> <p class="game-next-level game-info-text"></p> <button class="js-next button">继续游戏</button> </section> <section class="game-all-success game-ui"> <h1 class="section-title">通关成功</h1> <p class="game-next-level game-info-text">你已经成功地防御了怪兽的所有攻击。</p> <button class="js-replay button">再玩一次</button> </section> <section class="game-stop game-ui"> <h1 class="section-title">游戏暂停</h1> <button class="js-stop button">游戏继续</button> </section> </div> <div class="game-info game-ui"> <span class="title">分数:</span> <span class="score"></span> </div> <canvas id="canvas" width="700" height="600"> <!-- 动画画板 --> </canvas> </div> |
