首页用html写一个贪吃蛇游戏页面

用html写一个贪吃蛇游戏页面

时间: 2023-10-02 09:06:25 浏览: 97

好的，以下是一个简单的贪吃蛇游戏页面示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <style type="text/css"> /* 游戏面板的样式 */ #game-board { width: 400px; height: 400px; margin: 0 auto; border: 1px solid #000; position: relative; } /* 贪吃蛇身体的样式 */ .snake { width: 20px; height: 20px; background-color: #000; position: absolute; top: 0; left: 0; } /* 食物的样式 */ .food { width: 20px; height: 20px; background-color: red; position: absolute; } </style> </head> <body> <div id="game-board">  <div class="snake"></div>  <div class="food"></div> </div> <script type="text/javascript"> // 获取游戏面板和贪吃蛇身体元素 const gameBoard = document.getElementById('game-board'); const snake = document.querySelector('.snake'); // 初始化贪吃蛇的位置 let snakeX = 0; let snakeY = 0; // 监听键盘事件，控制贪吃蛇的移动 document.addEventListener('keydown', (event) => { if (event.code === 'ArrowUp') { snakeY -= 20; snake.style.top = `${snakeY}px`; } else if (event.code === 'ArrowDown') { snakeY += 20; snake.style.top = `${snakeY}px`; } else if (event.code === 'ArrowLeft') { snakeX -= 20; snake.style.left = `${snakeX}px`; } else if (event.code === 'ArrowRight') { snakeX += 20; snake.style.left = `${snakeX}px`; } }); </script> </body> </html> ``` 这个示例中只实现了贪吃蛇的基本移动，还需要添加食物、吃食物、撞墙等逻辑。

阅读全文