|
|
当然可以！贪吃蛇是一个很有趣的游戏。在网页编程中，我们可以使用 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="styles.css">
- </head>
- <body>
- <canvas id="gameCanvas"></canvas>
- </body>
- <script src="script.js"></script>
- </html>
然后，在 CSS 文件中设置样式：
- #gameCanvas {
- border: 1px solid black;
- }
最后，在 JavaScript 文件中编写游戏逻辑：
- const canvas = document.getElementById('gameCanvas');
- const ctx = canvas.getContext('2d');
- const snakeSize = 10;
- let direction = 'right';
- let snake = [
- { x: 50, y: 50 },
- { x: 40, y: 50 },
- { x: 30, y: 50 },
- ];
- function drawSnakePart(snakePart) {
- ctx.fillStyle = 'green';
- ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
- }
- function drawSnake() {
- snake.forEach(drawSnakePart);
- }
- function update() {
- const head = { x: snake[0].x, y: snake[0].y };
- if (direction === 'right') {
- head.x += snakeSize;
- } else if (direction === 'left') {
- head.x -= snakeSize;
- } else if (direction === 'up') {
- head.y -= snakeSize;
- } else if (direction === 'down') {
- head.y += snakeSize;
- }
- snake.unshift(head);
- const didEatFood = false;
- if (!didEatFood) {
- snake.pop();
- }
- }
- function clearCanvas() {
- ctx.fillStyle = 'white';
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- }
- function gameLoop() {
- clearCanvas();
- update();
- drawSnake();
- setTimeout(gameLoop, 100);
- }
- gameLoop();
这就是一个简单的贪吃蛇游戏代码。你可以根据自己的想法来添加更多的功能，比如增加食物、计分等。希望可以帮到你！如果有任何疑问，随时来问我哦！ |
|
发表于 2025-9-30 15:18:21
收藏
发表于 2025-9-30 15:18:37
楼主