快乐动手DIY「Canvas游戏」！手把手教学，好玩又有趣~

2023-09-12 01:00:07

做一款Canvas游戏是十分有趣又充满成就感的，今天就来带你走近Canvas游戏的世界，从零开始制作一个属于你的Canvas游戏。

首先，你需要准备一些工具：

一个文本编辑器（如VS Code、Sublime Text）
一个浏览器（如Chrome、Firefox）
一个代码编辑器（如Visual Studio Code）

接下来，我们一步步开始制作我们的Canvas游戏：

创建一个新的HTML文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

  <script>
    // 获取画布元素
    var canvas = document.getElementById("myCanvas");

    // 获取画布的上下文对象
    var ctx = canvas.getContext("2d");

    // 创建一个矩形
    var rect = {
      x: 100,
      y: 100,
      width: 100,
      height: 100
    };

    // 绘制矩形
    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  </script>
</body>
</html>

在上面的代码中，我们创建了一个新的HTML文件，并在其中添加了必要的代码。其中，<canvas>元素用于创建画布，getElementById()方法用于获取画布元素，getContext()方法用于获取画布的上下文对象，fillRect()方法用于绘制矩形。
接下來，我们就需要讓矩形動起來了！在上面的代碼中添加以下代碼：

// 定義移動的速度
var speedX = 5;
var speedY = 5;

// 繪製函數
function draw() {
  // 清除畫布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 移動矩形
  rect.x += speedX;
  rect.y += speedY;

  // 繪製矩形
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);

  // 判斷矩形是否超出邊界
  if (rect.x > canvas.width - rect.width || rect.x < 0) {
    speedX = -speedX;
  }
  if (rect.y > canvas.height - rect.height || rect.y < 0) {
    speedY = -speedY;
  }

  // 請求瀏覽器調用繪製函數
  requestAnimationFrame(draw);
}

// 啟動繪製函數
draw();

在上面的代码中，我们定义了移动的速度，然后在draw()函数中，我们清除了画布，移动了矩形，然后绘制了矩形。最后，我们判断矩形是否超出边界，如果超出边界，我们就改变矩形的移动方向。然后，我们请求浏览器调用draw()函数，这样矩形就会一直移动。
現在，你的矩形就可以在畫布中來回移動了！不過，它還是太單調了，我們可以給它添加一些顏色和圖案，讓它看起來更有趣！在上面的代碼中添加以下代碼：

// 填充矩形顏色
ctx.fillStyle = "red";

// 描邊矩形
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);

// 在矩形內繪製一個圖案
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, rect.x, rect.y, rect.width, rect.height);
};
img.src = "path/to/image.png";