Canvas动画之豌豆射手

青花锁

已于 2024-02-26 15:37:57 修改

阅读量3.8k

点赞数 39

分类专栏：前端小游戏文章标签：豌豆射手 Canvas 动画 JavaScript

于 2024-02-26 15:36:01 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/s445320/article/details/136299117

版权

前端小游戏专栏收录该内容

12 篇文章 7 订阅

订阅专栏

🌹作者主页：青花锁 🌹简介：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动画之豌豆射手

前言

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

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

实现豌豆射手自动发射豌豆效果可以通过创建一个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文件：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth / 2;
canvas.height = window.innerHeight / 3;

const bullets = []; // 存储子弹
const bulletSpeed = 10; // 子弹的速度
const peashooterImg = new Image(); // 创建豌豆射手图片对象
peashooterImg.src = 'mutpea.png'; // 设置图片源文件路径

const peashooter = {
  x: 50,
  y: canvas.height / 3,
  width: 80, // 根据实际图片大小调整
  height: 80 // 根据实际图片大小调整
};

function drawPeashooter() {
  ctx.drawImage(peashooterImg, peashooter.x, peashooter.y, peashooter.width, peashooter.height);
}

function drawBullets() {
  ctx.fillStyle = 'green';
  for (let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, 10, 0, Math.PI * 2);
    ctx.fill();

    // 更新子弹的位置
    bullet.x += bulletSpeed;

    // 如果子弹超出画布范围，则移除
    if (bullet.x >= canvas.width) {
      bullets.splice(i, 1);  // 也可使用其他JavaScript 数组删除元素函数
      i--; // 修正数组长度变化后的索引
    }
  }
}

function shoot() {
  // 添加一个子弹到数组中
  const bulletY = peashooter.y + peashooter.height / 2; // 子弹从豌豆射手中间发射
  bullets.push({ x: peashooter.x + peashooter.width, y: bulletY });
}

// 定时发射子弹
setInterval(shoot, 500);

function animate() {
  // 创建垂直渐变
  var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  // 添加颜色断点
  gradient.addColorStop(0, '#00b4d8'); // 天空的颜色
  gradient.addColorStop(1, '#48c78e'); // 草地的颜色

  // 设置渐变为填充样式并绘制背景
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  drawPeashooter(); // 绘制豌豆射手
  drawBullets(); // 绘制子弹
  requestAnimationFrame(animate); // 循环调用animate函数
}

// 确保图片加载后开始动画
peashooterImg.onload = animate;