|
|
当编写一个简单的贪吃蛇游戏时，我们可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>贪吃蛇游戏</title>
- <style>
- #game-board {
- width: 400px;
- height: 400px;
- border: 1px solid black;
- position: relative;
- }
- .snake {
- width: 20px;
- height: 20px;
- background-color: green;
- position: absolute;
- }
- .food {
- width: 20px;
- height: 20px;
- background-color: red;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <div id="game-board"></div>
- <script>
- const board = document.getElementById('game-board');
- let snake = [{x: 200, y: 200}];
- let food = {x: 0, y: 0};
- function createSnake() {
- snake.forEach(segment => {
- const snakeElement = document.createElement('div');
- snakeElement.style.left = segment.x + 'px';
- snakeElement.style.top = segment.y + 'px';
- snakeElement.classList.add('snake');
- board.appendChild(snakeElement);
- });
- }
- function createFood() {
- if (food.x === 0 && food.y === 0) {
- food.x = Math.floor(Math.random() * 20) * 20;
- food.y = Math.floor(Math.random() * 20) * 20;
- const foodElement = document.createElement('div');
- foodElement.style.left = food.x + 'px';
- foodElement.style.top = food.y + 'px';
- foodElement.classList.add('food');
- board.appendChild(foodElement);
- }
- }
- function gameLoop() {
- // 游戏逻辑放这里
- // 清除蛇和食物
- board.innerHTML = '';
- // 重新绘制蛇和食物
- createSnake();
- createFood();
- setTimeout(gameLoop, 100); // 每100ms更新一次游戏状态
- }
- gameLoop();
- </script>
- </body>
- </html>
这段代码创建了一个简单的贪吃蛇游戏界面和基本逻辑。你可以根据这个基础上进一步添加游戏规则、键盘控制等功能。希望对你有帮助！如果有任何问题，都可以随时问我哦。 |
|
发表于 2025-10-10 14:55:17
收藏
发表于 2025-10-10 14:55:25