|
|
当我们在网页中创建一个简单的贪吃蛇游戏时，需要使用 HTML 来搭建页面结构，使用 CSS 来样式化页面元素，以及使用 JavaScript 来添加游戏逻辑。
首先，让我们创建一个基本的 HTML 结构：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>贪吃蛇游戏</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="game-board"></div>
- <script src="script.js"></script>
- </body>
- </html>
接下来，让我们编写 CSS 文件 `style.css` 来美化页面：
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- }
- #game-board {
- width: 400px;
- height: 400px;
- border: 1px solid black;
- position: relative;
- }
最后，让我们编写 JavaScript 文件 `script.js` 来添加游戏逻辑：
- const BOARD_SIZE = 20;
- const CELL_SIZE = 20;
- 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.gridRowStart = segment.y;
- snakeElement.style.gridColumnStart = segment.x;
- snakeElement.classList.add('snake');
- gameBoard.appendChild(snakeElement);
- });
- }
- function drawFood() {
- const foodElement = document.createElement('div');
- foodElement.style.gridRowStart = food.y;
- foodElement.style.gridColumnStart = food.x;
- foodElement.classList.add('food');
- gameBoard.appendChild(foodElement);
- }
- function moveSnake() {
- const head = { ...snake[0] };
- // 更新蛇头位置
- snake.unshift({ x: head.x + 1, y: head.y });
- // 如果吃到食物，则不删除尾巴
- if (head.x !== food.x || head.y !== food.y) {
- snake.pop();
- }
- }
- function main() {
- drawSnake();
- drawFood();
- moveSnake();
- setTimeout(main, 1000);
- }
- main();
通过这些代码，我们创建了一个简单的贪吃蛇游戏。你可以根据需要继续优化游戏功能和界面，让孙浩轩可以享受到自己定制的贪吃蛇游戏。希望能帮助到你！ |
|
发表于 2025-9-30 15:17:05
收藏
发表于 2025-9-30 15:17:16