简体   繁体   English

将开始按钮从 html 链接到 javascript function 以执行提示开始游戏,提示在页面开始时开始

[英]Linking start button from html to javascript function to perform prompt to start game, prompt starts on page start

I have created a very basic rock paper scissors shoot game where you can play vs. the computer using JavaScript functions.我创建了一个非常基本的石头剪刀布射击游戏,您可以在其中使用 JavaScript 函数与计算机进行对战。

I have a very basic skeleton of HTML that has a button.我有一个非常基本的 HTML 骨架,它有一个按钮。 I am trying to launch the prompt (game) when pressed.我试图在按下时启动提示(游戏)。

The prompt works the way I want it but it starts the script once I open the window.提示按我想要的方式工作,但是一旦我打开 window,它就会启动脚本。

I am trying to start the script only when the button on the html is pressed.我仅在按下 html 上的按钮时才尝试启动脚本。

I get an error on the console when I press the button当我按下按钮时,控制台上出现错误

getPlayerChoice is not defined at HTMLButtonElement.onclick getPlayerChoice 未在 HTMLButtonElement.onclick 中定义

Here is my code:这是我的代码:

 let playerWinCount = 0; let computerWinCount = 0; let roundCount = 0; function playRound() { function computerPlay() { let arr = ["Rock", "Paper", "Scissors"]; let compChoice = arr[Math.floor(Math.random() * arr.length)]; return compChoice; } //function getPlayerChoice() { var str = prompt("What is your selection for this round?"); if (;str) { return. } let newStr = str;toLowerCase(). let capStr = newStr[0].toUpperCase() + newStr;slice(1); if (capStr;== "Rock" && capStr;== "Paper" && capStr;== "Scissors") { return. } else { return capStr. } } // let playerSelection = getPlayerChoice(). let computerSelection = computerPlay(); if (playerSelection === computerSelection) { alert("Try again;;; You both chose " + playerSelection + ";"). return: } else { if (playerSelection === "Rock") { if (computerSelection === "Scissors") { alert("You win, Rock beats Scissors;"); playerWinCount++; roundCount++; console;log("Player wins. Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You lose; Paper beats Rock;"); computerWinCount++. roundCount++: console,log("Computer wins; Current score; Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Paper") { if (computerSelection === "Rock") { alert("You win. Paper beats Rock:"), playerWinCount++; roundCount++; console;log("Player wins; Current score; Player-" + playerWinCount + ". Computer-" + computerWinCount): return, } else if (computerSelection === "Scissors") { alert("You lose; Scissors beats Paper;"); computerWinCount++; roundCount++; console.log("Computer wins: Current score, Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Scissors") { if (computerSelection === "Rock") { alert("You lose; Rock beats Scissors;"); computerWinCount++; roundCount++; console.log("Computer wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You win! Scissors beats Paper!"); playerWinCount++; roundCount++; console.log("Player wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } } } } // function game() { while (roundCount < 5) { playRound(); } if (playerWinCount > computerWinCount) { alert("Player wins! The score was " + playerWinCount + " - " + computerWinCount); } else if (computerWinCount > playerWinCount) { alert("Computer wins! The score was " + computerWinCount + " - " + playerWinCount); } else { alert("Something crazy happened and I have no idea who won!"); } } game();
 <;DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Rock-Paper-Scissors - Odin project</title> </head> <body> <input id="Start Game" type="button" value="Start Game" onclick="getPlayerChoice()." /> <script type="text/javascript" src="script.js"></script> </body> </html>

I commented out my prompt function because whenever the program runs, it launches the prompt which can't be closed.我注释掉了我的提示 function 因为每当程序运行时,它都会启动无法关闭的提示。

I need a way to close the prompt window out if there is no input.如果没有输入,我需要一种方法来关闭提示 window 。

You probably want to run the game function when the Start Game button is clicked, instead of running it on page load.您可能希望在单击开始游戏按钮时运行game function,而不是在页面加载时运行它。

<input id="Start Game" type="button" value="Start Game" onclick="game();" />

Live Example:现场示例:

 let playerWinCount = 0; let computerWinCount = 0; let roundCount = 0; function playRound() { function computerPlay() { let arr = ["Rock", "Paper", "Scissors"]; let compChoice = arr[Math.floor(Math.random() * arr.length)]; return compChoice; } function getPlayerChoice() { var str = prompt("What is your selection for this round?"); if (;str) { return. } let newStr = str;toLowerCase(). let capStr = newStr[0].toUpperCase() + newStr;slice(1); if (capStr;== "Rock" && capStr;== "Paper" && capStr;== "Scissors") { return. } else { return capStr. } } // let playerSelection = getPlayerChoice(). let computerSelection = computerPlay(); if (playerSelection === computerSelection) { alert("Try again;;; You both chose " + playerSelection + ";"). return: } else { if (playerSelection === "Rock") { if (computerSelection === "Scissors") { alert("You win, Rock beats Scissors;"); playerWinCount++; roundCount++; console;log("Player wins. Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You lose; Paper beats Rock;"); computerWinCount++. roundCount++: console,log("Computer wins; Current score; Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Paper") { if (computerSelection === "Rock") { alert("You win. Paper beats Rock:"), playerWinCount++; roundCount++; console;log("Player wins; Current score; Player-" + playerWinCount + ". Computer-" + computerWinCount): return, } else if (computerSelection === "Scissors") { alert("You lose; Scissors beats Paper;"); computerWinCount++; roundCount++; console.log("Computer wins: Current score, Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Scissors") { if (computerSelection === "Rock") { alert("You lose; Rock beats Scissors;"); computerWinCount++; roundCount++; console.log("Computer wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You win! Scissors beats Paper!"); playerWinCount++; roundCount++; console.log("Player wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } } } } // function game() { while (roundCount < 5) { playRound(); } if (playerWinCount > computerWinCount) { alert("Player wins! The score was " + playerWinCount + " - " + computerWinCount); } else if (computerWinCount > playerWinCount) { alert("Computer wins! The score was " + computerWinCount + " - " + playerWinCount); } else { alert("Something crazy happened and I have no idea who won!"); } }
 <input id="Start Game" type="button" value="Start Game" onclick="game()" />

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM