在掘金也能划龙舟？

前端

2024-02-08 03:20:45

JavaScript 和 HTML5 Canvas 呈现精彩龙舟盛宴

让我们踏上一个精彩纷呈的龙舟之旅，用 JavaScript 和 HTML5 Canvas 作为我们的桨和画笔，一起描绘一幅栩栩如生的龙舟盛宴。

扬帆起航：准备你的船只

首先，我们需要准备我们龙舟的元素。你需要一张龙舟主题的 PNG 背景透明图片，然后借助 PhotoShop 或其他图像编辑工具将以下元素裁剪出来：

龙舟本体
龙头
船桨

编码冒险：绘制你的杰作

在我们的编码冒险中，我们将使用 JavaScript 和 HTML5 Canvas 来打造我们的龙舟世界。创建一个新的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<canvas id="canvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</head>
<body>
<p>准备扬帆起航！</p>
</body>
</html>

接下来，在 script.js 文件中编写如下代码：

// 获取 Canvas 元素
const canvas = document.getElementById("canvas");

// 获取 Canvas 的上下文
const ctx = canvas.getContext("2d");

// 加载龙舟元素的图像
const dragonBoatImage = new Image();
dragonBoatImage.src = "dragon_boat.png";
const dragonHeadImage = new Image();
dragonHeadImage.src = "dragon_head.png";
const paddleImage = new Image();
paddleImage.src = "paddle.png";

// 定义龙舟的位置和速度
let dragonBoatX = 0;
let dragonBoatY = canvas.height - dragonBoatImage.height;
let dragonBoatSpeed = 5;

// 定义划桨的数组
const paddles = [];

// 添加划桨
function addPaddle() {
  const paddle = {
    x: dragonBoatX + dragonBoatImage.width,
    y: dragonBoatY + dragonBoatImage.height / 2 - paddleImage.height / 2,
  };
  paddles.push(paddle);
}

// 更新画面
function update() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制龙舟
  ctx.drawImage(dragonBoatImage, dragonBoatX, dragonBoatY);

  // 绘制龙头
  ctx.drawImage(dragonHeadImage, dragonBoatX + dragonBoatImage.width - dragonHeadImage.width, dragonBoatY);

  // 绘制划桨
  for (let i = 0; i < paddles.length; i++) {
    const paddle = paddles[i];
    ctx.drawImage(paddleImage, paddle.x, paddle.y);
  }

  // 更新龙舟位置
  dragonBoatX += dragonBoatSpeed;

  // 更新划桨位置
  for (let i = 0; i < paddles.length; i++) {
    const paddle = paddles[i];
    paddle.x += dragonBoatSpeed;
  }

  // 当龙舟到达画布边缘时，重置其位置
  if (dragonBoatX > canvas.width) {
    dragonBoatX = 0;
  }

  // 添加新的划桨
  if (paddles.length < 10) {
    addPaddle();
  }

  // 递归调用 update 函数以持续更新画面
  requestAnimationFrame(update);
}

// 在页面加载时启动 update 函数
window.addEventListener("load", update);