|
|
小朋友，想要生成一个贪吃蛇的网页代码其实很有趣！下面我来帮你写一个简单的贪吃蛇的网页代码：
- <!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 gameBoard = document.getElementById('game-board');
- let snake = [{x: 10, y: 10}];
- let food = {x: 5, y: 5};
- function drawSnake() {
- gameBoard.innerHTML = '';
- snake.forEach(segment => {
- const snakeElement = document.createElement('div');
- snakeElement.style.gridArea = `${segment.y}/ ${segment.x}`;
- snakeElement.className = 'snake';
- gameBoard.appendChild(snakeElement);
- });
- }
- function drawFood() {
- const foodElement = document.createElement('div');
- foodElement.style.gridArea = `${food.y}/ ${food.x}`;
- foodElement.className = 'food';
- gameBoard.appendChild(foodElement);
- }
- function moveSnake() {
- const head = { ...snake[0] };
- snake.pop();
- if (direction === 'up') {
- head.y--;
- } else if (direction === 'down') {
- head.y++;
- } else if (direction === 'left') {
- head.x--;
- } else {
- head.x++;
- }
- snake.unshift(head);
- }
- drawSnake();
- drawFood();
- let direction = 'right';
- setInterval(() => {
- moveSnake();
- drawSnake();
- }, 1000);
- </script>
- </body>
- </html>
这段代码能够在网页中展示一个简单的贪吃蛇游戏。当你打开这个网页时，你会看到一个绿色方块代表蛇，红色方块代表食物。蛇会自动向右移动，你可以尝试按下上、下、左、右键来改变蛇的移动方向。希望你喜欢这个小游戏！如果有任何问题，随时来问我哦！ |
|
发表于 2025-10-16 12:00:54
收藏
发表于 2025-10-16 12:01:05