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

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

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

🌹文末获取联系方式 📝

---

往期热门专栏回顾

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

---

前端小游戏专栏回顾

专栏	导航	描述
前端小游戏	- -	Canvas魔法之黑客帝国特效
前端小游戏	- -	Canvas动画之豌豆射手
前端小游戏	- -	Canvas动画之豌豆射手大战僵尸

---

前言

接上一张，我们实现了豌豆射手自动发射豌豆的效果。
效果如下:

今天我们切换下豌豆射手的造型，再给加上一个僵尸，最后给僵尸来个血条。

---

相关知识点介绍

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

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

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

实现僵尸

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

创建僵尸图片对象

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

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

  const zombie = {
    x: peashooter.x + 500, //根据实际调整x坐标点位置，这里是基于豌豆射手水平线+500
    y: canvas.height / 3,  //y坐标点在画布的1/3高度
    width: 80, // 根据实际图片大小调整
    height: 80, // 根据实际图片大小调整

    health: 100, // 初始血量
    maxHealth: 100, // 最大血量
    bloodBarHeight: 10, // 血条高度

    takeDamage: function (damage) {
      this.health -= damage;
      if (this.health <= 0) {
        this.health = 100; // 确保血量不会低于0
      }
    }
  };

修改僵尸绘图函数（把僵尸、僵尸的血条绘制到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脚本，控制豌豆发射

---

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

---

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