Canvas动画之豌豆射手

痛定思痛。 2024-04-23 21:06 57阅读 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> 
 </tbody> 
</table>

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

## 前言 ##

今天我们实现豌豆射手自动发射豌豆的效果。  
使用工具：Chrome浏览器（或其他支持H5的浏览器）  
使用语言：HTML + JavaScript + Canvas + requestAnimationFrame  
效果如下:  
![请添加图片描述][5740a045f6ab414fb14f497f1d646dbb.gif]

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

## 相关知识点介绍 ##

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

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

实现豌豆射手自动发射豌豆效果可以通过创建一个Canvas元素，并在上面使用JavaScript来绘制豌豆射手，豌豆从豌豆射手那里自动往前射击，到画布外之后子弹消失。并为整个画面设置一张草坪背景，意味着豌豆射手是在草坪上战斗。

分为2部分，Html画布（Canvas元素容器，设置草坪背景）、JavaScript脚本控制豌豆从豌豆射手那里自动往前射击。

### Html画布 ###

首先是HTML代码，你需要在HTML文件中添加一个Canvas元素：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Peashooter Animation</title>
    <style>
      body {
          
        margin: 0;
        overflow: hidden;
        height: 100%;
      }
      canvas {
          
        background: #f4f4f4;
      }
    </style>
    </head>
    <body onload="init()">
    <canvas id="gameCanvas"></canvas>
    <script src="script.js"></script>
    </body>
    </html>

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

### 动画控制 ###

然后，是JavaScript代码，你可以将这部分代码保存为script.js文件：

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

## 讲解 ##

在上述代码中，我们创建了一个Image对象来加载豌豆射手的图片。然后，我们定义了一个peashooter对象来存储豌豆射手的位置和大小。drawPeashooter函数使用drawImage方法将豌豆射手绘制到Canvas上。

drawBullets函数负责绘制和更新所有子弹的位置。shoot函数每隔一段时间被调用，以模拟豌豆射手发射子弹的动作（这里可以修改控制发射子弹的频率，现在的500毫秒，相当于0.5秒）。

最后，animate函数是动画的主循环，负责清除Canvas、绘制豌豆射手和子弹，并通过requestAnimationFrame递归调用自己。

注意，我们使用peashooterImg.onload来确保在图片加载完成后才开始动画循环，以避免在图片未加载完成时绘制。

将上述代码保存到相应的HTML和JavaScript文件中，并确保图片文件peashooter.png在项目目录中。打开HTML文件后，你应该能看到豌豆射手图片，并且它会定期发射子弹。

### 目录结构 ###

*  index.html : html代码区域
 *  mutpea.png、pea.png: 豌豆射手的图片，一张是多重豌豆射手、另一张是普通的豌豆射手
 *  script.js：JavaScript脚本，控制豌豆发射  
    ![在这里插入图片描述][9c581d03f59643758703f21def6b2386.png]

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

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

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

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/35731138f7864e76bec1470182c2376b.png
[5740a045f6ab414fb14f497f1d646dbb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ef229d8fe0ac447f8a16b2ef3232e5c3.gif
[Canvas]: https://blog.csdn.net/s445320/article/details/136237005
[9c581d03f59643758703f21def6b2386.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a9099be6eec8412ba0723107bc036759.png
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/54c3f076c8e04e8e93db4e6b4011dcf7.gif