|
|
好的，我们可以用网页编程来实现一个简单的贪吃蛇游戏。首先，我们需要使用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>
- <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 src="snake.js"></script>
- </body>
- </html>
接着，在同一目录下创建一个JavaScript文件（命名为snake.js），用来实现贪吃蛇的逻辑：
- const gameBoard = document.getElementById('game-board');
- let snake = [{ x: 10, y: 10 }];
- let food = { x: 5, y: 5 };
- let direction = { x: 0, y: 0 };
- 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 = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
- snake.unshift(head);
- if (head.x === food.x && head.y === food.y) {
- food.x = Math.floor(Math.random() * 20);
- food.y = Math.floor(Math.random() * 20);
- } else {
- snake.pop();
- }
- }
- function changeDirection(event) {
- switch(event.key) {
- case 'ArrowUp':
- direction = { x: 0, y: -1 };
- break;
- case 'ArrowDown':
- direction = { x: 0, y: 1 };
- break;
- case 'ArrowLeft':
- direction = { x: -1, y: 0 };
- break;
- case 'ArrowRight':
- direction = { x: 1, y: 0 };
- break;
- }
- }
- document.addEventListener('keydown', changeDirection);
- setInterval(() => {
- moveSnake();
- drawSnake();
- drawFood();
- }, 100);
保存以上代码后，用浏览器打开HTML文件，你就可以开始玩贪吃蛇游戏了！用方向键控制蛇的移动，让它吃到红色食物并不断变长。希望你尽情享受这个简单的贪吃蛇游戏！如果有任何问题，都可以随时问我哦~ |
|
发表于 2025-9-30 15:18:25
收藏
发表于 2025-9-30 15:18:46