Canvas动画之豌豆射手大战僵尸

阳光穿透心脏的1/2处 2024-04-23 21:06 46阅读 0赞

?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?

?简历模板、学习资料、面试题库、技术互助

?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

--------------------

## 往期热门专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Java项目实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12345409.html" rel="nofollow">介绍Java组件安装、使用；手写框架等</a></td> 
  </tr> 
  <tr> 
   <td align="left">Aws服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12492968.html" rel="nofollow">Aws Linux服务器上操作nginx、git、JDK、Vue</a></td> 
  </tr> 
  <tr> 
   <td align="left">Java微服务实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12439818.html" rel="nofollow">Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java基础篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12369312.html" rel="nofollow">Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Springboot篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12273537.html" rel="nofollow">从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring MVC篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12295009.html" rel="nofollow">从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 </a></td> 
  </tr> 
  <tr> 
   <td align="left">华为云服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12426609.html" rel="nofollow">华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java爬虫</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_8863085.html" rel="nofollow">通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Vue实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12278346.html" rel="nofollow">讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12283629.html" rel="nofollow">讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 </a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 前端小游戏专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">导航</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">前端小游戏</td> 
   <td align="left">- -</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/article/details/136294836" rel="nofollow">Canvas魔法之黑客帝国特效</a></td> 
  </tr> 
  <tr> 
   <td align="left">前端小游戏</td> 
   <td align="left">- -</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/article/details/136299117" rel="nofollow">Canvas动画之豌豆射手</a></td> 
  </tr> 
  <tr> 
   <td align="left">前端小游戏</td> 
   <td align="left">- -</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/article/details/136325811" rel="nofollow">Canvas动画之豌豆射手大战僵尸</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 前言 ##

接上一张，我们实现了[豌豆射手自动发射豌豆][Link 1]的效果。  
效果如下:  
![请添加图片描述][5740a045f6ab414fb14f497f1d646dbb.gif]  
今天我们切换下豌豆射手的造型，再给加上一个僵尸，最后给僵尸来个血条。  
![在这里插入图片描述][5980ad4a78414c828fe0cefd3b0e4ee6.gif]

--------------------

## 相关知识点介绍 ##

HTML 、 JavaScript 、 Canvas 、 requestAnimationFrame  
相关知识点介绍，详见 [Canvas魔法之黑客帝国特效][Canvas]

## 豌豆射手自动发射豌豆效果实战 ##

首先请移步豌豆射手自动发射豌豆效果实战，在此基础上加入了僵尸。 [https://blog.csdn.net/s445320/article/details/136299117][Link 1]

## 实现僵尸 ##

*  创建僵尸图片对象
 *  创建僵尸对象（定义2D的坐标系数、大小、血量、被豌豆射击命中函数）
 *  修改僵尸绘图函数（上一章已存在僵尸绘图函数，把僵尸、僵尸的血条绘制到Canvas画板上）
 *  在豌豆子弹函数里，增加豌豆与僵尸的碰撞检测，调用僵尸被豌豆射击命中函数

### 创建僵尸图片对象 ###

const zombieImg = new Image();  //创建僵尸图片对象
    zombieImg.src = 'zombie.png'; //设置僵尸图片源文件路径

### 创建僵尸对象（定义2D的坐标系数、大小、血量、被豌豆射击命中函数） ###

### 修改僵尸绘图函数（把僵尸、僵尸的血条绘制到Canvas画板上） ###

上一章已存在僵尸绘图函数，这次修改，把僵尸的血条也绘制到Canvas画板上，血条颜色设置为红色。

// 僵尸绘图
      function drawZombie() {
        
        ctx.drawImage(zombieImg, zombie.x, zombie.y, zombie.width, zombie.height);
        // 增加的绘制血条代码
        // 绘制血条
        ctx.fillStyle = 'red';
        ctx.fillRect(zombie.x, zombie.y - zombie.bloodBarHeight, zombie.width * (zombie.health / zombie.maxHealth), zombie.bloodBarHeight);
      }

### 在豌豆子弹函数里，增加豌豆与僵尸的碰撞检测，调用僵尸被豌豆射击命中函数 ###

// 如果豌豆子弹超出画布范围 或 打到僵尸，则移除子弹
        if (bullet.x >= canvas.width || bullet.x >= zombie.x + 20) {
        
          if (bullet.x >= zombie.x + 20) {
        
            zombie.takeDamage(10); // 假设豌豆对僵尸造成10点伤害
          }
    
          bullets.splice(i, 1);  // 也可使用其他JavaScript 数组删除元素函数
          i--; // 修正数组长度变化后的索引
        }

### 目录结构和素材 ###

*  index.html : html代码区域
 *  mutpea.png、pea.png: 豌豆射手的图片，一张是多重豌豆射手、另一张是普通的豌豆射手
 *  script.js：JavaScript脚本，控制豌豆发射

![在这里插入图片描述][7360e15b2eca4bbaa25909b8d964196e.png]  
![在这里插入图片描述][53b431ea343a4c99b112cab6a42ddae9.png]

--------------------

完整代码3天后整理到github，地址：[https://github.com/hd5723/pea][https_github.com_hd5723_pea]

--------------------

资料获取，更多粉丝福利，关注下方公众号获取

![在这里插入图片描述][a74f7d5d03234f7c8a635562034442a0.gif_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/066eb9c9a4664ebeb39a5c4d35b6be1c.png
[Link 1]: https://blog.csdn.net/s445320/article/details/136299117
[5740a045f6ab414fb14f497f1d646dbb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f4d90159622743ad881bf9323acf0a1d.gif
[5980ad4a78414c828fe0cefd3b0e4ee6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d60fc52afec44688ab9770263bb5a5a8.gif
[Canvas]: https://blog.csdn.net/s445320/article/details/136237005
[7360e15b2eca4bbaa25909b8d964196e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/113e2098393146d08e8419c7f3125389.png
[53b431ea343a4c99b112cab6a42ddae9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/58b7cc8a348741eda2f332042e4f228c.png
[https_github.com_hd5723_pea]: https://github.com/hd5723/pea
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/eee997ae45314fff83b13be15ae2536f.gif