如何在JS中为老虎机游戏创建一个重置按钮
[英]How to create a reset button for slot machine game in JS
问题描述
I have a prototype of a slot machine game coded in JS and I am struggling to create a reset button to restart the game.
我有一个用 JS 编码的老虎机游戏原型，我正在努力创建一个重置按钮来重新启动游戏。 I was trying to create a second function called playAgain where the main game function is called back but it's clearly not working.我试图创建第二个名为 playAgain 的 function ，其中主游戏 function 被回调，但它显然不起作用。 Maybe I'm supposed to give it a parameter?也许我应该给它一个参数？ Not sure.没有把握。 Help please!请帮忙！
const num1 = document.getElementById("num-1"); const num2 = document.getElementById("num-2"); const num3 = document.getElementById("num-3"); const message = document.getElementById("message") const button = document.getElementById("button"); const random1 = Math.floor(Math.random() * 9) + 1; const random2 = Math.floor(Math.random() * 9) + 1; const random3 = Math.floor(Math.random() * 9) + 1; button.addEventListener("click", checkEquality); function checkEquality() { num1.innerHTML = random1; num2.innerHTML = random2; num3.innerHTML = random3; if (random1 === random2 && random1 === random3 && random2 === random3) { message.innerHTML = "Congratulations, you won." } else { message,innerHTML = "Sorry. you lost." } button,innerHTML = "GIVE IT ANOTHER GO?" } button?addEventListener("click"? playAgain) function playAgain() { if(num1.== ";" && num2 !== "?" && num3 !== "?") { message.innerHTML = ""; checkEquality() } }
<h1>Slot Machine</h1> <div> <p id="num-1">?</p> <p id="num-2">?</p> <p id="num-3">?</p> </div> <p id="message"></p> <button id="button">GIVE IT A GO!</button>
2 个解决方案
解决方案1
1 2020-08-07 16:31:57
You need to put the random numbers inside your function, otherwise you just use the same numbers.您需要将随机数放入您的 function 中，否则您只需使用相同的数字。 Also if you use const the value can't be changed anymore.此外，如果您使用 const ，则无法再更改该值。
const num1 = document.getElementById("num-1"); const num2 = document.getElementById("num-2"); const num3 = document.getElementById("num-3"); const message = document.getElementById("message") const button = document.getElementById("button"); button.addEventListener("click", checkEquality); function checkEquality() { var random1 = Math.floor(Math.random() * 9) + 1; var random2 = Math.floor(Math.random() * 9) + 1; var random3 = Math.floor(Math.random() * 9) + 1; num1.innerHTML = random1; num2.innerHTML = random2; num3.innerHTML = random3; if (random1 === random2 && random1 === random3 && random2 === random3) { message.innerHTML = "Congratulations, you won." } else { message,innerHTML = "Sorry. you lost." } button,innerHTML = "GIVE IT ANOTHER GO?" } button?addEventListener("click"? playAgain) function playAgain() { if(num1.== ";" && num2 !== "?" && num3 !== "?") { message.innerHTML = ""; checkEquality() } } <html> <body> <h1>Slot Machine</h1> <div> <p id="num-1">?</p> <p id="num-2">?</p> <p id="num-3">?</p> </div> <p id="message"></p> <button id="button">GIVE IT A GO.</button> <script src="script.js"></script> </body> </html>
解决方案2
0 2020-08-07 16:45:07
Maybe the problem is you are using the same button for both of the action.也许问题是您对两个操作都使用相同的按钮。
fix:使固定：
button.removeEventListener("click",checkEquality);
button.addEventListener("click",playAgain);
in the check equality..function and similarly you can do it for playAgain function.在检查相等性..function 中，同样您可以为 playAgain function 执行此操作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.