用HTML.CSS.JavaScript实现一个贪吃蛇小游戏

目录

一、引言

贪吃蛇是一款经典的小游戏,曾经风靡一时。今天,我们将使用 HTML、CSS 和 JavaScript 来实现一个简单的贪吃蛇小游戏。通过这个项目,可以了解到如何使用 HTML5 的画布元素(<canvas>)来绘制图形,以及如何使用 JavaScript 来处理游戏逻辑。

二、实现思路

1. HTML 结构

我们首先创建一个基本的 HTML 结构,包含一个 <canvas> 元素用于绘制游戏画面,以及一些必要的 <script><style> 标签。

2. CSS 样式

使用 CSS 对 <canvas> 元素进行简单的样式设置,使其具有边框,并居中显示。

3. JavaScript 逻辑

  • 初始化游戏元素:定义蛇的初始位置、食物的初始位置、分数等。
  • 处理用户输入:监听键盘事件,根据用户按下的方向键来改变蛇的移动方向。
  • 绘制游戏画面 :使用 requestAnimationFramesetInterval 函数来不断更新游戏画面,包括蛇的移动、食物的生成和绘制、分数的显示等。
  • 处理碰撞检测:检测蛇是否撞到墙壁或自己的身体,如果是,则游戏结束。
  • 处理食物的生成和消耗:当蛇吃到食物时,分数增加,并且生成新的食物。

三、代码实现

上述代码中,我们使用了 HTML5 的 <canvas> 元素来绘制游戏画面,通过 JavaScript 来处理游戏逻辑。具体实现步骤如下:

  1. 初始化游戏元素:定义蛇的初始位置、食物的初始位置、分数等。
  2. 监听键盘事件:根据用户按下的方向键来改变蛇的移动方向。
  3. 绘制游戏画面 :使用 setInterval 函数来不断更新游戏画面,包括蛇的移动、食物的生成和绘制、分数的显示等。
  4. 处理碰撞检测:检测蛇是否撞到墙壁或自己的身体,如果是,则游戏结束。
  5. 处理食物的生成和消耗:当蛇吃到食物时,分数增加,并且生成新的食物。
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <title>贪吃蛇小游戏</title>
  <style>
    #game-board {
      border: 2px solid #333;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>

<body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
  <h1 class="text-3xl font-bold mb-4">贪吃蛇小游戏</h1>
  <canvas id="game-board" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('game-board');
    const ctx = canvas.getContext('2d');

    const box = 20;
    let snake = [];
    snake[0] = {
      x: 9 * box,
      y: 10 * box
    };
    let food = {
      x: Math.floor(Math.random() * 19) * box,
      y: Math.floor(Math.random() * 19) * box
    };
    let score = 0;
    let d;

    document.addEventListener('keydown', direction);

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

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i === 0)? 'green' : 'lightgreen';
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
        ctx.strokeStyle = 'darkgreen';
        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 (d === 'LEFT') snakeX -= box;
      if (d === 'UP') snakeY -= box;
      if (d === 'RIGHT') snakeX += box;
      if (d === 'DOWN') snakeY += box;
      if (snakeX === food.x && snakeY === food.y) {
        score++;
        food = {
          x: Math.floor(Math.random() * 19) * box,
          y: Math.floor(Math.random() * 19) * box
        };
      } else {
        snake.pop();
      }
      let newHead = {
        x: snakeX,
        y: snakeY
      };
      if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
        alert(`游戏结束!你的最终得分是: ${score}`);
      }
      snake.unshift(newHead);
      ctx.fillStyle = 'white';
      ctx.font = '20px Arial';
      ctx.fillText('Score: '+ score, 10, 30);
    }

    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);
  </script>
</body>

</html>
    

四、效果展示

初始界面

小蛇吃到自己,死亡结算

相关推荐
还是鼠鼠1 小时前
Node.js自定义中间件
javascript·vscode·中间件·node.js·json·express
Dontla7 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡7 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu7 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c7 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪8 小时前
几种比较实用的指令举例
前端·javascript·面试
与妖为邻8 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。9 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴9 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶9 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js