使用javascript写的游戏大全

影落飞神

于 2024-08-12 03:46:42 发布

阅读量562

点赞数

文章标签： javascript 游戏开发语言 ecmascript 前端

使用JavaScript编写的游戏大全

JavaScript作为一种强大的编程语言，不仅用于网页开发，也为游戏开发提供了丰富的可能性。随着HTML5和Canvas的引入，开发者能够在浏览器中实现各种类型的游戏，从简单的休闲游戏到复杂的多人在线游戏。本文将介绍几种使用JavaScript编写的游戏，并提供相关代码示例。

1. 简单的贪吃蛇游戏

贪吃蛇是一个经典的游戏，适合初学者学习JavaScript和游戏开发。下面是一个简单的贪吃蛇游戏的实现：

代码示例

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let box = 20;
let snake = [{ x: 9 * box, y: 9 * box }];
let direction = 'RIGHT';
let food = {
  x: Math.floor(Math.random() * 17 + 1) * box,
  y: Math.floor(Math.random() * 15 + 3) * box,
};

document.addEventListener('keydown', changeDirection);

function changeDirection(event) {
  if (event.keyCode === 37 && direction !== 'RIGHT') direction = 'LEFT';
  else if (event.keyCode === 38 && direction !== 'DOWN') direction = 'UP';
  else if (event.keyCode === 39 && direction !== 'LEFT') direction = 'RIGHT';
  else if (event.keyCode === 40 && direction !== 'UP') direction = 'DOWN';
}

function draw() {
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = (i === 0) ? 'green' : 'white';
    ctx.fillRect(snake[i].x, snake[i].y, box, box);
    ctx.strokeStyle = 'black';
    ctx.strokeRect(snake[i].x, snake[i].y, box, box);
  }

  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, box, box);

  let snakeX = snake[0].x;
  let snakeY = snake[0].y;

  if (direction === 'LEFT') snakeX -= box;
  if (direction === 'UP') snakeY -= box;
  if (direction === 'RIGHT') snakeX += box;
  if (direction === 'DOWN') snakeY += box;

  if (snakeX === food.x && snakeY === food.y) {
    food = {
      x: Math.floor(Math.random() * 17 + 1) * box,
      y: Math.floor(Math.random() * 15 + 3) * box,
    };
  } else {
    snake.pop();
  }

  let newHead = { x: snakeX, y: snakeY };

  if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
    clearInterval(game);
    alert('Game Over');
  }

  snake.unshift(newHead);
}

function collision(head, array) {
  for (let i = 0; i < array.length; i++) {
    if (head.x === array[i].x && head.y === array[i].y) {
      return true;
    }
  }
  return false;
}

let game = setInterval(draw, 100);

游戏说明

在这个贪吃蛇游戏中，玩家可以通过键盘的方向键控制蛇的移动。蛇吃到食物后会变长，游戏结束的条件是蛇碰到墙壁或自身。这个代码示例展示了如何使用Canvas绘制图形和处理键盘事件。

2. 井字棋游戏

井字棋是一种两人对战的游戏，非常适合进行简单的AI实现。这类游戏可以帮助我们理解如何处理游戏逻辑和状态管理。

代码示例

const cells = document.querySelectorAll('.cell');
let turn = 'X';
let board = ['', '', '', '', '', '', '', '', ''];

cells.forEach((cell, index) => {
  cell.addEventListener('click', () => {
    if (cell.textContent === '' && !checkWinner()) {
      cell.textContent = turn;
      board[index] = turn;
      if (checkWinner()) {
        alert(turn + ' wins!');
      }
      turn = turn === 'X' ? 'O' : 'X';
    }
  });
});

function checkWinner() {
  const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  
  for (const combo of winningCombos) {
    const [a, b, c] = combo;
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return true;
    }
  }
  return false;
}