如何用原生JS實現小恐龍遊戲

一、遊戲的基本框架

小恐龍遊戲基於HTML5的canvas標籤來實現。以下代碼展示了基本框架的實現：

<canvas id="canvas" width="600" height="150"></canvas>

<script>
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");

  // 遊戲邏輯代碼
</script>

將canvas標籤插入HTML頁面中，並使用JS獲取該標籤的上下文。我們的遊戲邏輯將在這個上下文環境中完成。

二、小恐龍的基本動作效果

小恐龍的動作效果包括：站立、跳動和俯衝。以下代碼展示了如何實現這些動作效果：

// 小恐龍的狀態
let dino = {
  state: "idle",
  y: 0,
  jumpSpeed: 10,
  jumpHeight: 100,
  fallSpeed: 20,
}

// 小恐龍的每個動作效果
function drawIdle() {
  // 繪製小恐龍的站立效果
}
function drawJump() {
  // 繪製小恐龍的跳動效果
}
function drawDuck() {
  // 繪製小恐龍的俯衝效果
}

// 判斷小恐龍的狀態並執行對應的函數
function drawDino() {
  if (dino.state === "idle") {
    drawIdle();
  } else if (dino.state === "jump") {
    drawJump();
  } else if (dino.state === "duck") {
    drawDuck();
  }
}

通過設定小恐龍的狀態，我們可以繪製出小恐龍在不同情況下的不同動畫效果。

三、遊戲障礙物的生成和移動

小恐龍遊戲中的障礙物是隨機生成的，包括仙人掌、飛鳥等。以下代碼展示了如何實現障礙物的生成和移動：

// 障礙物的狀態
let obstacle = {
  x: 600,
  y: 0,
  width: 50,
  height: 50,
  speed: 10
}

// 障礙物的種類
const obstacles = [
  {
    type: "cactus",
    width: 50,
    height: 100,
  },
  {
    type: "bird",
    width: 50,
    height: 50,
  },
]

// 隨機生成障礙物
function generateObstacle() {
  let obstacleType = obstacles[Math.floor(Math.random() * obstacles.length)];
  obstacle.type = obstacleType.type;
  obstacle.width = obstacleType.width;
  obstacle.height = obstacleType.height;
}

// 移動障礙物
function moveObstacle() {
  obstacle.x -= obstacle.speed;
}

// 繪製障礙物
function drawObstacle() {
  ctx.beginPath();
  ctx.rect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  ctx.stroke();
}

通過在canvas上繪製一個矩形來實現障礙物的移動和顯示，同時設定障礙物的速度和種類，實現隨機的障礙物生成。

四、遊戲邏輯

小恐龍遊戲的邏輯包括：小恐龍跳躍、小恐龍碰撞障礙物、得分等。以下代碼展示了如何實現這些邏輯：

let score = 0;

// 小恐龍跳躍
function jump() {
  if (dino.y == 0) {
    dino.state = "jump";
    dino.y += dino.jumpSpeed;
  }
  if (dino.y > dino.jumpHeight) {
    dino.state = "fall";
  }
}

// 檢測小恐龍是否碰到障礙物
function detectObstacle() {
  if (obstacle.x = 0) {
    // 計算小恐龍和障礙物在X軸和Y軸上的距離
    let xDistance = (dino.x + 50) - obstacle.x;
    let yDistance = (dino.y + 50) - obstacle.y;
    if (xDistance < 0 && yDistance < 0) {
      dino.state = "dead";
      // 遊戲結束，彈出得分框
      alert("得分：" + score);
    }
  }
}

// 得分
function addScore() {
  score++;
}

// 遊戲循環
function gameLoop() {
  // 遊戲邏輯代碼
  detectObstacle();
  addScore();
  // 渲染畫面
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawDino();
  drawObstacle();
}

通過設定小恐龍的狀態和判斷小恐龍和障礙物在X軸和Y軸上的距離，實現小恐龍跳躍和碰撞檢測。同時計算得分和遊戲結束的提示。

五、遊戲的完整代碼示例

以下是小恐龍遊戲完整的原生JS實現代碼示例：

<canvas id="canvas" width="600" height="150"></canvas>

<script>
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");

  let dino = {
    state: "idle",
    x: 50,
    y: 0,
    jumpSpeed: 10,
    jumpHeight: 100,
    fallSpeed: 20,
  }

  let obstacle = {
    x: 600,
    y: 0,
    width: 50,
    height: 50,
    speed: 10,
    type: "",
  }

  let score = 0;

  const obstacles = [
    {
      type: "cactus",
      width: 50,
      height: 100,
    },
    {
      type: "bird",
      width: 50,
      height: 50,
    },
  ]

  function drawIdle() {
    // 繪製小恐龍的站立效果
  }

  function drawJump() {
    // 繪製小恐龍的跳動效果
  }

  function drawDuck() {
    // 繪製小恐龍的俯衝效果
  }

  function drawDino() {
    if (dino.state === "idle") {
      drawIdle();
    } else if (dino.state === "jump") {
      drawJump();
    } else if (dino.state === "duck") {
      drawDuck();
    }
  }

  function generateObstacle() {
    let obstacleType = obstacles[Math.floor(Math.random() * obstacles.length)];
    obstacle.type = obstacleType.type;
    obstacle.width = obstacleType.width;
    obstacle.height = obstacleType.height;
  }

  function moveObstacle() {
    obstacle.x -= obstacle.speed;
  }

  function drawObstacle() {
    ctx.beginPath();
    ctx.rect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    ctx.stroke();
  }

  function jump() {
    if (dino.y == 0) {
      dino.state = "jump";
      dino.y += dino.jumpSpeed;
    }
    if (dino.y > dino.jumpHeight) {
      dino.state = "fall";
    }
  }

  function detectObstacle() {
    if (obstacle.x = 0) {
      let xDistance = (dino.x + 50) - obstacle.x;
      let yDistance = (dino.y + 50) - obstacle.y;
      if (xDistance < 0 && yDistance  {
    if (event.code === "Space") {
      jump();
    } else if (event.code === "ArrowDown") {
      dino.state = "duck";
    }
  });

  document.addEventListener("keyup", event => {
    if (event.code === "ArrowDown") {
      dino.state = "idle";
    }
  });
</script>

以上為完整的小恐龍遊戲的實現代碼，該遊戲簡單易懂，通過以上代碼能夠使初學者更好地了解遊戲開發的基本原理和思路。