如何用原生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 <= 50 && obstacle.x + obstacle.width >= 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 <= 50 && obstacle.x + obstacle.width >= 0) {
      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() {
    generateObstacle();
    moveObstacle();
    detectObstacle();
    addScore();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawDino();
    drawObstacle();
  }

  let game = setInterval(gameLoop, 100);

  document.addEventListener("keydown", event => {
    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>

以上为完整的小恐龙游戏的实现代码，该游戏简单易懂，通过以上代码能够使初学者更好地了解游戏开发的基本原理和思路。