基于html+JavaScript+css的飞机射击小游戏网页设计与实现

淩亂°似流年 2024-04-06 13:57 87阅读 0赞

[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86954471  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86954471  
目录  
一、概述 1  
1.1项目内容 1  
1.2项目开发 5  
1.3项目组员 5  
1.4组员分工 5  
1.5验收标准 5  
二、项目介绍 5  
2.1 目标 5  
2.2 用户的特点 6  
2.3 假定和约束 6  
2.3.1 开发期限： 6  
2.3.2 技术约束： 6  
2.4 确定系统运行的要求 6  
2.5飞机大作战的整理思路 6  
三、项目产品 6  
3.1产品中的角色 6  
3.2产品用户功能需求 7  
四、总结 9

项目说明  
概述：Canvas 射击小游戏要求玩家控制飞机发射子弹，消灭会移动的怪兽，如果全部消灭了则游戏成功，如果怪兽移动到底部则游戏失败。  
目标：实现一个 Cavnas 射击小游戏  
项目结构  
index.html: 游戏页面  
style.css: 页面样式  
js: 页面涉及的所有 js 代码  
app.js: 页面逻辑入口 js  
img: 存放游戏的图片素材  
视觉稿: 存放游戏的视觉稿  
readme.md: 项目说明文档  
具体要求  
1、打通游戏整体流程 （开始->游戏进行中->成功或者失败）  
游戏共分为四种状态：游戏准备->游戏进行->游戏成功或者游戏失败  
1.1、游戏准备  
首次打开页面，将会展现游戏准备界面，界面有游戏标题和和游戏描述以及开始游戏按钮。  
游戏标题：设计游戏  
游戏描述：这是一个令人欲罢不能的射击游戏，使用 ← 和 → 操作你的飞机，使用空格（space）进行射击。  
1.2、游戏进行  
1.画面出现顶部一行怪兽（7个），底部中间出现一个飞机  
2.玩家可以通过键盘控制飞机左右移动并且发射子弹，子弹碰到怪兽则怪兽被消灭，消灭所有怪兽则显示游戏成功界面  
3.怪兽初始统一往右移动。当怪兽移动到达边界时，则向下移动一格，并且往相反反向移动。以次类推，直到触碰到底部边界，则显示游戏失败界面。  
1.3、游戏成功  
在每一关卡中，成功消灭所有的怪兽，则显示游戏通过成功。可以点击“再玩一次” 回到游戏进行界面  
1.4、游戏失败  
在游戏中，当怪兽成功突破到飞机的竖直位置，则显示游戏通过失败。可以点击“重新开始” 回到游戏进行界面  
2、使用Canvas 绘制游戏  
设置游戏场景  
游戏场地尺寸为 700 \* 600,游戏场地分成三个部分：  
场景边距区域 绿色的表示为边距区域，边距长度为30  
怪兽移动区域: 蓝色区域，尺寸为 640 \* 440  
飞机移动区域: 黄色区域表示飞机移动区域，尺寸为 640 \* 100  
2.1、实现游戏元素 - 飞机（游戏主角）  
游戏中飞机元素是我们需要操作的主人公，以下是飞机元素需要注意的内容：  
飞机尺寸为 60 \* 100  
飞机需绘制为飞机图像 img/plane.png  
可通过键盘左右方向键移动飞机元素，默认飞机移动的步伐长度为 5，飞机不可移动出前面所讲的 飞机移动区域  
2.2、实现游戏元素 - 飞机子弹  
通过点击空格键，飞机将射击出子弹元素，飞机可同时射出多个子弹。以下是子弹元素需要注意的内容：  
子弹是一根颜色为白色竖直线条，长度为 10，线条宽度为 1  
子弹初始横坐标为飞机的正中间即 plane.x + (plane.width / 2）  
子弹初始纵坐标等于飞机的纵坐标 plane.y  
子弹会不断往前方飞行，子弹每帧移动距离为 10  
当子弹元素飞出画布时，需删除该子弹元素  
当子弹元素和怪兽元素发生碰撞时，需删除该子弹元素  
2.3、实现游戏元素 - 怪兽  
游戏中怪兽元素共有两种状态（存活和死亡），存活时怪兽会移动，死亡时会绽放成烟花。以下是怪兽元素需要注意的内容：  
怪兽尺寸为 50 \* 50  
一行怪兽元素共有7个，每个怪兽之间间隔为 10  
怪兽元素处于存活状态时，需绘制为怪兽图像 img/enemy.png  
怪兽元素处于存活状态时，每一帧移动距离为 2  
当最右边的怪兽元素移动到 怪兽移动区域的左右边界时，下一帧则往下移动，移动的距离为 50  
当怪兽移动超过到怪兽移动区域的底部边界时，则游戏结束：  
当子弹元素和怪兽元素发生碰撞时，本文转载自http://www.biyezuopin.vip/onews.asp?id=14775怪兽元素处于死亡状态，且怪兽元素需绘制为爆炸图像 img/boom.png （爆炸过程建议绘制三帧，即怪兽死亡过程持续3帧）  
怪兽死亡过程结束后，删除怪兽元素  
当怪兽移动超过到怪兽移动区域的底部边界时，则游戏结束  
2.4、实现游戏分数  
在游戏场景左上角有一个分数元素，以下是分数元素需要注意的内容：  
分数坐标为（20，20)，分数的文字大小 18px  
分数默认为0，当消灭一个怪兽，则分数加1  
分数一直进行累加，直到游戏结束

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./style.css">
      <style></style>
      <title>飞机大战</title>
    </head>
    <body>
      <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）进行射击。一起来消灭宇宙怪兽吧！</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>
        </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>
      <audio id="myaudio" src="./sound/music.wav" controls="controls" loop="true" hidden="true" >
      </audio>
      <script src="./js/lib/util.js" ></script>
      <script src="./js/lib/element.js" ></script>
      <script src="./js/config.js" ></script>
      <script src="./js/enemy.js" ></script>
      <script src="./js/bullet.js" ></script>
      <script src="./js/plane.js" ></script>
      <script src="./js/keyboard.js" ></script>
      
      <script src="./js/app.js" ></script>
    
    </body>
    </html>

![在这里插入图片描述][eafccb70c874434793e7715072f7c3d3.png_pic_center]  
![在这里插入图片描述][e41e3d20f6504d4089bdb2761eaae65c.png_pic_center]  
![在这里插入图片描述][8c54a4b70405450ba9acf3adb5b906d9.png_pic_center]  
![在这里插入图片描述][f8eda4f011f74311939d795a076aa14a.png_pic_center]  
![在这里插入图片描述][7438d5b9058549599616a08b653a4aa3.png_pic_center]  
![在这里插入图片描述][58aa24764c7c45a699403cd6f3403091.png_pic_center]  
![在这里插入图片描述][30ba993338df4d97a02639b79c0a1fb6.png_pic_center]  
![在这里插入图片描述][c59fe9765c9141fc906c46188d7988da.png_pic_center]  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86954471  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86954471

[Link 1]: https://download.csdn.net/download/sheziqiong/86954471
[eafccb70c874434793e7715072f7c3d3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6aca2fcba7d146f3883fc7934a9b2e54.png
[e41e3d20f6504d4089bdb2761eaae65c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/90631b3c98064828b02c2f61db39bf00.png
[8c54a4b70405450ba9acf3adb5b906d9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fc3b851c73154886aab3d90daeeb1186.png
[f8eda4f011f74311939d795a076aa14a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/50b0a942f4d8411aa6f884b40abb9247.png
[7438d5b9058549599616a08b653a4aa3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cef6853a5a6242668f1527678e6c69fb.png
[58aa24764c7c45a699403cd6f3403091.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/24155151e5dc4f29b12f9c8e8cc63cb5.png
[30ba993338df4d97a02639b79c0a1fb6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8fd6d2ec0b22468798ae396718a556b9.png
[c59fe9765c9141fc906c46188d7988da.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/272a4f132ced4a1d98962000d621426d.png