用js怎么写小游戏

用JavaScript怎么写小游戏

用JavaScript写小游戏的核心步骤包括：选择合适的游戏类型、设计游戏逻辑、使用Canvas绘图、处理用户输入、实现动画效果、调试与优化。 在这其中，选择合适的游戏类型是最基础的一步，本文将详细讲解如何用JavaScript从零开始创建一个简单的小游戏，并对每一个步骤进行深入的剖析。

一、选择合适的游戏类型

在开始编写代码之前，首先需要确定你要开发的游戏类型。不同的游戏类型对技术要求不同，新手可以从简单的游戏开始，比如“贪吃蛇”、“打砖块”或“井字棋”。

贪吃蛇游戏

贪吃蛇游戏相对简单，适合初学者。它主要涉及到以下几个方面：

绘制游戏区域
控制蛇的移动
生成随机食物
碰撞检测（蛇与食物、蛇与边界、蛇与自身）

二、设计游戏逻辑

在确定了游戏类型之后，下一步就是设计游戏逻辑。游戏逻辑定义了游戏的规则和行为。在贪吃蛇游戏中，主要的游戏逻辑包括：蛇的移动、蛇吃食物后变长、游戏结束条件等。

蛇的移动

蛇的移动是通过一系列的坐标来表示的。每次移动，蛇头会朝指定方向前进一个单位，蛇身的每一部分会跟随前一个部分的坐标。

let snake = [
  { x: 150, y: 150 },
  { x: 140, y: 150 },
  { x: 130, y: 150 },
  { x: 120, y: 150 },
  { x: 110, y: 150 },
];
let dx = 10;
let dy = 0;
function moveSnake() {
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  snake.unshift(head);
  snake.pop();
}

三、使用Canvas绘图

HTML5 Canvas是一个强大的工具，可以用来绘制2D图形。它非常适合用来开发小游戏。首先，需要创建一个Canvas元素，然后通过JavaScript来控制它。

初始化Canvas

<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
</script>

绘制蛇

蛇可以通过绘制一系列的矩形来表示，每一个矩形代表蛇的一节。

function drawSnake() {
  snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
  ctx.fillStyle = 'lightgreen';
  ctx.strokeStyle = 'darkgreen';
  ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

四、处理用户输入

用户输入是游戏互动的重要部分。在贪吃蛇游戏中，用户可以通过按下箭头键来控制蛇的方向。

添加键盘事件监听器

document.addEventListener("keydown", changeDirection);
function changeDirection(event) {
  const LEFT_KEY = 37;
  const RIGHT_KEY = 39;
  const UP_KEY = 38;
  const DOWN_KEY = 40;
  const keyPressed = event.keyCode;
  const goingUp = dy === -10;
  const goingDown = dy === 10;
  const goingRight = dx === 10;
  const goingLeft = dx === -10;
  if (keyPressed === LEFT_KEY && !goingRight) {
    dx = -10;
    dy = 0;
  }
  if (keyPressed === UP_KEY && !goingDown) {
    dx = 0;
    dy = -10;
  }
  if (keyPressed === RIGHT_KEY && !goingLeft) {
    dx = 10;
    dy = 0;
  }
  if (keyPressed === DOWN_KEY && !goingUp) {
    dx = 0;
    dy = 10;
  }
}

五、实现动画效果

为了让游戏动起来，需要一个循环来不断更新游戏状态和重新绘制Canvas。这可以通过requestAnimationFrame来实现，它会在每次浏览器重绘之前调用指定的函数。

游戏循环

function main() {
  if (didGameEnd()) return;
  setTimeout(function onTick() {
    clearCanvas();
    drawFood();
    moveSnake();
    drawSnake();
    main();
  }, 100)
}
function clearCanvas() {
  ctx.fillStyle = "white";
  ctx.strokeStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
}

六、调试与优化

在游戏开发过程中，调试和优化是必不可少的。通过调试，可以发现并修复代码中的错误；通过优化，可以提升游戏的性能和用户体验。

碰撞检测

在贪吃蛇游戏中，碰撞检测非常重要。需要检测蛇是否撞到了边界或者自身。

function didGameEnd() {
  for (let i = 4; i < snake.length; i++) {
    const hasCollided = snake[i].x === snake[0].x && snake[i].y === snake[0].y;
    if (hasCollided) return true;
  }
  const hitLeftWall = snake[0].x < 0;
  const hitRightWall = snake[0].x > canvas.width - 10;
  const hitToptWall = snake[0].y < 0;
  const hitBottomWall = snake[0].y > canvas.height - 10;
  return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall;
}

生成随机食物

每当蛇吃掉一个食物，需要生成一个新的食物，位置是随机的。

let foodX;
let foodY;
function createFood() {
  foodX = Math.round((Math.random() * (canvas.width - 10)) / 10) * 10;
  foodY = Math.round((Math.random() * (canvas.height - 10)) / 10) * 10;
}
function drawFood() {
  ctx.fillStyle = 'red';
  ctx.strokeStyle = 'darkred';
  ctx.fillRect(foodX, foodY, 10, 10);
  ctx.strokeRect(foodX, foodY, 10, 10);
}

检测食物被吃掉

在每次移动蛇之后，需要检查蛇头是否与食物重合，如果重合，则蛇变长，并生成新的食物。

function moveSnake() {
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  snake.unshift(head);
  const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  if (didEatFood) {
    createFood();
  } else {
    snake.pop();
  }
}

七、总结与展望

通过上述步骤，我们已经成功地用JavaScript创建了一个简单的贪吃蛇游戏。虽然这个游戏还很基础，但它涵盖了游戏开发的许多核心概念，如游戏逻辑设计、Canvas绘图、用户输入处理、动画效果实现、调试与优化等。

在此基础上，可以进一步拓展和优化游戏，例如：

增加难度：随着游戏进行，逐步增加蛇的移动速度。
添加音效：为游戏增加音效，提升用户体验。
优化性能：通过减少不必要的重绘和计算，提升游戏性能。
多人模式：实现多人对战模式，增加游戏的趣味性。

此外，还可以探索其他类型的小游戏，如“打砖块”、“井字棋”等，进一步提升自己的编程技能和游戏开发能力。

如果在项目团队中进行游戏开发，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile来高效管理和协作。PingCode专注于研发项目管理，能够帮助团队更好地规划和跟踪开发进度；Worktile则提供全面的项目协作功能，适合各种类型的项目团队。

无论是个人开发还是团队协作，掌握JavaScript游戏开发的基本技能都是非常有价值的。希望这篇文章能为你提供有用的指导和启发，祝你在游戏开发的道路上不断进步！