科学教育

标题: 王欣然 [打印本页]
作者: WXRa    时间: 2025-9-30 15:38
标题: 王欣然
帮我生成一个贪吃蛇代码
作者: kaia    时间: 2025-9-30 15:39
当然可以！贪吃蛇是一个很经典的游戏，下面是一个简单的贪吃蛇代码示例，你可以在网页上运行它：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>贪吃蛇游戏</title>
  5. <style>
  6.     #game-board {
  7.         width: 400px;
  8.         height: 400px;
  9.         border: 1px solid black;
  10.         position: relative;
  11.     }

  13.     .snake {
  14.         width: 20px;
  15.         height: 20px;
  16.         background-color: green;
  17.         position: absolute;
  18.     }

  20.     .food {
  21.         width: 20px;
  22.         height: 20px;
  23.         background-color: red;
  24.         position: absolute;
  25.     }
  26. </style>
  27. </head>
  28. <body>

  30. <div id="game-board"></div>

  32. <script>
  33. let gameBoard = document.getElementById('game-board');
  34. let snake = [{x: 200, y: 200}];
  35. let dx = 0;
  36. let dy = 0;
  37. let foodX = Math.floor(Math.random() * 20) * 20;
  38. let foodY = Math.floor(Math.random() * 20) * 20;
  39. let score = 0;

  41. function drawSnake() {
  42.     gameBoard.innerHTML = '';
  43.     snake.forEach(segment => {
  44.         let snakeElement = document.createElement('div');
  45.         snakeElement.style.left = segment.x + 'px';
  46.         snakeElement.style.top = segment.y + 'px';
  47.         snakeElement.classList.add('snake');
  48.         gameBoard.appendChild(snakeElement);
  49.     });
  50. }

  52. function drawFood() {
  53.     let foodElement = document.createElement('div');
  54.     foodElement.style.left = foodX + 'px';
  55.     foodElement.style.top = foodY + 'px';
  56.     foodElement.classList.add('food');
  57.     gameBoard.appendChild(foodElement);
  58. }

  60. function moveSnake() {
  61.     let head = {x: snake[0].x + dx, y: snake[0].y + dy};
  62.     snake.unshift(head);

  64.     if (head.x === foodX && head.y === foodY) {
  65.         score++;
  66.         foodX = Math.floor(Math.random() * 20) * 20;
  67.         foodY = Math.floor(Math.random() * 20) * 20;
  68.     } else {
  69.         snake.pop();
  70.     }

  72.     if (head.x < 0 || head.x >= gameBoard.clientWidth || head.y < 0 || head.y >= gameBoard.clientHeight || isSnakeCollide()) {
  73.         alert('Game Over! Your score is: ' + score);
  74.         window.location.reload();
  75.     }

  77.     drawSnake();
  78.     drawFood();
  79. }

  81. function isSnakeCollide() {
  82.     return snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y);
  83. }

  85. document.addEventListener('keydown', e => {
  86.     switch (e.key) {
  87.         case 'ArrowUp':
  88.             dx = 0;
  89.             dy = -20;
  90.             break;
  91.         case 'ArrowDown':
  92.             dx = 0;
  93.             dy = 20;
  94.             break;
  95.         case 'ArrowLeft':
  96.             dx = -20;
  97.             dy = 0;
  98.             break;
  99.         case 'ArrowRight':
  100.             dx = 20;
  101.             dy = 0;
  102.             break;
  103.     }
  104. });

  106. setInterval(moveSnake, 100);
  107. </script>

  109. </body>
  110. </html>
复制代码


你可以将以上代码复制粘贴到一个新建的HTML文件中，然后用浏览器打开，就可以看到一个简单的贪吃蛇游戏了！玩得开心哦！



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