</>
F11

Canvas 迷宫小游戏实现思路:

  1. 使用 drawImage() 将一张迷宫图片绘制在 Canvas 上
  2. 绘制可移动矩形,监听方向键 keydown ,按下对应按键后改变可移动矩形的X或Y轴的位置
  3. 使用 getImageData() 获取图像数据,判断矩形移动位置(如果 RGB 分别是 000 黑色,则该位置不能移动,如果RGB分别是 02550 绿色,则该位置到达终点)
  4. 成功或失败(设置游戏倒计时时间),当可移动矩形移动到绿色位置,则成功。如倒计时时间结束,则 Game Over

注意事项:使用 getImageData() 方法时源代码与图像对象需在同一个服务器上,否则会报错。

游戏倒计时时间函数

  1. //游戏时间函数
  2. function createTimer(seconds) {
  3.     intervalVar = setInterval(function() {
  4.         //用白色清空时间部分
  5.         makeWhite(0, mazeHeight - 20, canvas.width, 20);
  6.         //如果时间等于0,结束游戏
  7.         if (seconds === 0) {
  8.             clearInterval(intervalVar);
  9.             window.removeEventListener("keydown", moveRect, true);
  10.             makeWhite(0, 0, canvas.width, canvas.height);
  11.             context.font = "40px Microsoft JhengHei";
  12.             context.fillStyle = "red";
  13.             context.textAlign = "center";
  14.             context.textBaseline = "middle";
  15.             context.fillText("Game Over", canvas.width / 2, canvas.height / 2);
  16.             return;
  17.         }
  18.         //颜色预警,当时间小于一定数值,改变颜色
  19.         context.font = "24px Microsoft JhengHei";
  20.         if (seconds <= 10 && seconds > 5) {
  21.             context.fillStyle = "orangered";
  22.         } else if (seconds <= 5) {
  23.             context.fillStyle = "red";
  24.         } else {
  25.             context.fillStyle = "green";
  26.         }
  27.         context.textAlign = "center";
  28.         context.textBaseline = "middle";
  29.         var minutes = Math.floor(seconds / 60);
  30.         var secondsToShow = (seconds - minutes * 60).toString();
  31.         if (secondsToShow.length === 1) {
  32.             secondsToShow = "0" + secondsToShow;    //在秒数前加 0 如:5 秒则显示 05
  33.         }
  34.         context.fillText(minutes.toString() + ":" + secondsToShow, canvas.width / 2, mazeHeight - 10);
  35.         seconds--;
  36.     }, 1000);
  37. }