如何為我的蛇游戲添加重啟按鈕
[英]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.