javascript贪吃蛇完整版(源码)

JavaScript贪吃蛇完整版(源码)攻略

一、简介

本项目是一个使用JavaScript实现的贪吃蛇游戏，包含了完整的源代码。该游戏采用Canvas进行绘制，并具有基本的操作功能，包括开始、暂停、重新开始等。本项目适合JavaScript初学者学习。

二、源码文件结构

本项目的源码文件主要分为HTML、CSS和JavaScript三个部分。具体文件结构如下：

|-index.html
|-style.css
|-script.js

其中，index.html文件为网页骨架，style.css文件为样式表，script.js文件为游戏逻辑处理代码。

三、源码实现详解

1. 初始化游戏

游戏的初始化操作主要在init函数中完成，代码如下：

function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  document.addEventListener('keydown', keydown);
  score = 0;
  direction = 'right';
  createSnake();
  createFood();
  gameloop = setInterval(paint, 80);
}

该函数主要完成以下操作：

• 获取Canvas上下文对象；
• 给文档添加键盘按下事件监听器；
• 初始化得分和方向变量；
• 创建蛇和食物；
• 开始游戏循环。

注：在本项目中，createSnake和createFood函数分别用于创建蛇和食物，具体实现方式不在此赘述。

2. 键盘事件处理

游戏的移动操作主要通过键盘事件来实现，代码如下：

function keydown(ev) {
  if (ev.keyCode === 37 && direction !== 'right') {
    direction = 'left';
  } else if (ev.keyCode === 38 && direction !== 'down') {
    direction = 'up';
  } else if (ev.keyCode === 39 && direction !== 'left') {
    direction = 'right';
  } else if (ev.keyCode === 40 && direction !== 'up') {
    direction = 'down';
  }
}

该函数主要根据按下的键盘按键码来更新方向变量，从而实现蛇的移动。

3. 绘制游戏元素

游戏元素绘制主要通过paint函数实现，代码如下：

function paint() {
  var snakeHeadX = snake[0].x;
  var snakeHeadY = snake[0].y;

  switch (direction) {
    case 'right':
      snakeHeadX++;
      break;
    case 'left':
      snakeHeadX--;
      break;
    case 'up':
      snakeHeadY--;
      break;
    case 'down':
      snakeHeadY++;
      break;
    default:
      break;
  }

  if (snakeHeadX === food.x && snakeHeadY === food.y) {
    eatFood();
    createFood();
  } else {
    snake.pop();
  }

  var newHead = {
    x: snakeHeadX,
    y: snakeHeadY
  };

  if (snakeHeadX < 0 || snakeHeadX >= COL_NUM 
      || snakeHeadY < 0 || snakeHeadY >= ROW_NUM 
      || checkCollision(newHead)) {
    clearInterval(gameloop);
    alert('游戏结束！得分：' + score);
  }

  snake.unshift(newHead);

  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#000000";
  ctx.font = "bold 20px Arial";
  ctx.fillText("得分：" + score, 20, 30);

  for (var i = 0; i < snake.length; i++) {
    ctx.fillStyle = i === 0 ? 'green' : 'black';
    ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10);
  }

  ctx.fillStyle = 'red';
  ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}

该函数主要完成以下操作：

• 根据方向变量更新蛇头位置；
• 判断蛇头是否与食物位置重合；
• 判断游戏是否结束；
• 更新蛇的身体；
• 绘制得分、蛇和食物。

4. 实现游戏逻辑

游戏逻辑主要在checkCollision和eatFood函数中实现，代码如下：

function checkCollision(head) {
  for (var i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      return true;
    }
  }
  return false;
}

function eatFood() {
  score++;
  snake.push(snake[snake.length - 1]);
}

其中，checkCollision函数用于判断蛇头是否与蛇身重合，从而判断游戏是否结束。eatFood函数用于更新得分和蛇的身体。

四、示例说明

1. 如何修改游戏速度？

游戏速度可通过修改gameloop计时器的时间间隔来实现。例如，将init函数中的setInterval(paint, 80)调整为setInterval(paint, 50)，即可加快游戏速度。

2. 如何增加游戏难度？

增加游戏难度可通过修改蛇的移动速度或增加蛇的初始长度来实现。例如，可将createSnake函数中的snake.push({x: i, y: 0});修改为snake.push({x: i, y: 0}, {x: i+1, y: 0}, {x: i+2, y: 0});，即可将蛇的初始长度从1改为3，增加游戏难度。