|
|
好的,这里是一个完整的贪吃蛇游戏示例,包括HTML、CSS和JavaScript代码。这个版本的游戏加入了开始按钮、结束提示和基本的背景及角色。
### HTML(index.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 class="game-container">
- <canvas id="gameCanvas" width="400" height="400"></canvas>
- <button id="startButton">开始游戏</button>
- <div id="gameOverMessage"></div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
复制代码
### CSS(style.css)
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- background-color: #f0f0f0;
- margin: 0;
- }
- .game-container {
- text-align: center;
- }
- canvas {
- border: 1px solid #000;
- background-color: #eee; /* 可以替换为背景图片 */
- }
- #startButton {
- margin-top: 20px;
- padding: 10px 20px;
- font-size: 16px;
- cursor: pointer;
- }
- #gameOverMessage {
- margin-top: 20px;
- font-size: 18px;
- color: red;
- }
复制代码
### JavaScript(script.js)
- const canvas = document.getElementById('gameCanvas');
- const ctx = canvas.getContext('2d');
- const box = 20;
- let snake;
- let food;
- let score;
- let direction;
- let gameInterval;
- const startButton = document.getElementById('startButton');
- const gameOverMessage = document.getElementById('gameOverMessage');
- startButton.addEventListener('click', startGame);
- document.addEventListener('keydown', setDirection);
- function startGame() {
- // 初始化游戏参数
- snake = [{ x: 9 * box, y: 9 * box }];
- food = {
- x: Math.floor(Math.random() * 19 + 1) * box,
- y: Math.floor(Math.random() * 19 + 1) * box
- };
- score = 0;
- direction = null;
- gameOverMessage.innerHTML = '';
- if (gameInterval) {
- clearInterval(gameInterval);
- }
- gameInterval = setInterval(draw, 100);
- }
- function setDirection(event) {
- const key = event.keyCode;
- if (key == 37 && direction != 'RIGHT') {
- direction = 'LEFT';
- } else if (key == 38 && direction != 'DOWN') {
- direction = 'UP';
- } else if (key == 39 && direction != 'LEFT') {
- direction = 'RIGHT';
- } else if (key == 40 && direction != 'UP') {
- direction = 'DOWN';
- }
- }
- function draw() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- for (let i = 0; i < snake.length; i++) {
- ctx.fillStyle = i === 0 ? 'green' : 'white';
- ctx.fillRect(snake[i].x, snake[i].y, box, box);
- ctx.strokeStyle = 'red';
- ctx.strokeRect(snake[i].x, snake[i].y, box, box);
- }
- ctx.fillStyle = 'red';
- ctx.fillRect(food.x, food.y, box, box);
- let snakeX = snake[0].x;
- let snakeY = snake[0].y;
- if (direction == 'LEFT') snakeX -= box;
- if (direction == 'UP') snakeY -= box;
- if (direction == 'RIGHT') snakeX += box;
- if (direction == 'DOWN') snakeY += box;
- if (snakeX == food.x && snakeY == food.y) {
- score++;
- food = {
- x: Math.floor(Math.random() * 19 + 1) * box,
- y: Math.floor(Math.random() * 19 + 1) * box
- };
- } else {
- snake.pop();
- }
- let newHead = { x: snakeX, y: snakeY };
- if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
- clearInterval(gameInterval);
- gameOverMessage.innerHTML = `游戏结束. 得分: ${score}`;
- }
- snake.unshift(newHead);
- ctx.fillStyle = 'black';
- ctx.font = '45px Changa one';
- ctx.fillText(score, box, 1.5 * box);
- }
- function collision(head, array) {
- for (let i = 0; i < array.length; i++) {
- if (head.x == array[i].x && head.y == array[i].y) {
- return true;
- }
- }
- return false;
- }
- startGame();
复制代码
上面的代码可以放在三个独立的文件中。你可以用更生动的图像来替换背景、蛇头、蛇身和食物。如果你没有这些图像,也可以选择颜色填充的方式展示蛇和食物。你只需要将这些文件保存在同一个目录下,然后在浏览器中打开`index.html`来启动游戏。
游戏开始时,点击“开始游戏”按钮进行游戏,每次游戏结束后会显示得分。这样,你就具备了一个完整的、有开始按钮和结束提示的贪吃蛇游戏。希望你喜欢这个小游戏! |
|