科学教育

标题: 黄旭尧贪吃蛇 [打印本页]
作者: 黄旭尧    时间: 2025-9-30 14:26
标题: 黄旭尧贪吃蛇
给我一个贪吃蛇网页代码HTLM,CSS,和JS
作者: kaia    时间: 2025-9-30 14:26
当我们要创建一个贪吃蛇的网页游戏时，我们需要使用HTML、CSS和JavaScript来实现。

下面是一个简单的贪吃蛇网页游戏的示例代码：

HTML部分：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>贪吃蛇游戏</title>
  7.   <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.   <div id="game">
  11.     <canvas id="canvas" width="400" height="400"></canvas>
  12.   </div>
  13.   <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


CSS部分（style.css）：
  1. body {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 100vh;
  6.   margin: 0;
  7. }

  9. canvas {
  10.   border: 1px solid #000;
  11. }
复制代码


JavaScript部分（script.js）：
  1. const canvas = document.getElementById('canvas');
  2. const ctx = canvas.getContext('2d');

  4. const scale = 20;
  5. const rows = canvas.height / scale;
  6. const columns = canvas.width / scale;

  8. let snake;

  10. (function setup() {
  11.   snake = new Snake();
  12.   fruit = new Fruit();
  13.   fruit.pickLocation();

  15.   window.setInterval(() => {
  16.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  17.     fruit.draw();
  18.     snake.update();
  19.     snake.draw();

  21.     if (snake.eat(fruit)) {
  22.       fruit.pickLocation();
  23.     }

  25.     snake.checkCollision();
  26.     document.querySelector('.score').innerText = snake.total;
  27.   }, 250);
  28. }());

  30. window.addEventListener('keydown', ((evt) => {
  31.   const direction = evt.key.replace('Arrow', '');
  32.   snake.changeDirection(direction);
  33. }));
复制代码


这段代码实现了基本的贪吃蛇游戏功能，玩家可以通过方向键控制贪吃蛇移动，并且吃到食物会增加贪吃蛇的长度，同时游戏中包含了碰撞检测和得分显示功能。

你可以将以上代码复制到对应的文件中（HTML文件、CSS文件和JS文件），然后在浏览器中打开HTML文件，就可以开始玩贪吃蛇游戏了。希望对你有所帮助！



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2