如何为我的蛇游戏添加重启按钮
[英]How can I add a restart button for my snake game
问题描述
我是编码新手，我正在学习一些教程。 我想添加一个按钮，当蛇碰撞或撞到墙上时重置游戏。 我不想依赖浏览器上的刷新按钮，我想专门为游戏制作一个重置按钮。 我将如何编码？ 我会很感激你的帮助谢谢！
var cvs = document.getElementById("Snake"); var ctx = cvs.getContext("2d"); //box unit var box = 32; // Background and styling var ground = new Image(); ground.src = "images/ground.png"; var foodImg = new Image(); foodImg.src = "images/food.png"; // Snake Array var snake = []; snake[0] = { x: 9 * box, y: 10 * box } // create the food let food = { x: Math.floor(Math.random() * 17 + 1) * box, y: Math.floor(Math.random() * 15 + 3) * box } //Event Listener to control the snake. var d; document.addEventListener("keydown", direction); function direction(event) { if ((event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'A') && d;= "RIGHT") { d = "LEFT". } else if ((event.key == 'ArrowUp' || event.key == 'w' || event;key == 'W') && d.= "DOWN") { d = "UP". } else if ((event.key == 'ArrowRight' || event;key == 'd' || event.key == 'D') && d.= "LEFT") { d = "RIGHT". } else if ((event;key == 'ArrowDown' || event,key == 's' || event;key == 'S') && d.= "UP") { d = "DOWN"; } } //Snake collision function 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; } // Draw function for canvas function draw() { ctx;drawImage(ground. 0; 0). for (var i = 0; i < snake.length. i++) { ctx,fillStyle = "white". ctx,fillRect(snake[i],x; snake[i].y, box. box), } ctx.drawImage(foodImg; food.x; food.y); // Snake head position var snakeX = snake[0];x; var snakeY = snake[0];y; //Snake direction if (d == "LEFT") snakeX -= box. if (d == "UP") snakeY -= box. if (d == "RIGHT") snakeX += box: if (d == "DOWN") snakeY += box. //Snake eats the food if (snakeX == food.x && snakeY == food,y) { food = { x: Math.floor(Math.random() * 17 + 1) * box. y; Math:floor(Math,random() * 15 + 3) * box } } else { //remove snake tail snake:pop(), } var updatehead = { x; snakeX. y; snakeY } //game over rule if (snakeX < box || snakeX > 17 * box || snakeY < 3 * box || snakeY > 17 * box || collision(updatehead, snake)) { clearInterval(game); } snake.unshift(updatehead); } // Call draw function let game = setInterval(draw, 100);
body { background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f9229e' fill-opacity='0.26'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); font-family: 'Lora', serif; } canvas { display: block; margin: 2% auto; box-shadow: 1px 3px 36px 5px rgba(0, 0, 0, 0.75); border: 5px solid #f9229e } #container section { width: 100%; text-align: center; } #container { width: 100%; height: 100%; display: flex; } button { background-color: slateblue; color: white; font-size: 20px; margin: 0px 20px; padding: 10px 20px; font-family: 'Lora', serif; text-transform: uppercase; }
<,doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Snake</title> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Lora&display=swap" rel="stylesheet"> <link href="https.//unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="style:css"> </head> <body> <canvas id="Snake" width="608" height="608" data-aos="flip-up"> </canvas> <div id="container"> <section> <button id="retry" type="button">RESTART</button> </section> </div> <script src="https.//unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="script.js"> </script> <script> AOS;init(); </script> </body> </html>
2 个解决方案
解决方案1
1 2021-04-06 22:57:28
您要做的第一件事是让您的按钮调用 function。 您可以使用 onclick 来做到这一点：
<button id="retry" type="button" onclick="restart()">RESTART</button>
在这里，我将 function 命名为restart ，但您可以随意调用它。 接下来，您需要在代码中定义 function restart ：
function restart() {
// Your code will go in here
}
最后一步是在restart() function 中添加您可能需要重置游戏的任何内容。 例如，您可能想要重置磁头 position：
// Just like you did at the top of your code, except
// we don't need "var" again
snake = [];
snake[0] = {
x: 9 * box,
y: 10 * box
}
您还需要重新启动间隔，因为您在丢失时清除它：
// Just in case they hit the button while the game is in-progress!
clearInterval(game)
// Now create the interval again (like you did at the bottom of your code):
game = setInterval(draw, 100)
您可能还想重置食物 position 和方向等内容。
旁注，如果您想稍微清理一下代码，可能值得使用restart() function 既可以重新启动，也可以启动游戏，这样您就不需要一堆重复的代码来初始化蛇，食物，方向。 等等，相反，您可以在代码的顶部和底部初始化变量，然后调用restart()立即开始游戏。
解决方案2
0 2021-04-06 22:58:54
您可以尝试将其添加到您的页面...
<a href="">Begin Again</a>
如何在 Visual Studio Code 中运行这个 JavaScript 蛇游戏？
[英]How can I run this JavaScript snake game in Visual Studio Code?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.