0
私は最近、情報学の学位を取得し始めました。私のクラスの1つでは、基本（html、javascriptなど）を学んでいます。私がこれまでに学んだことを使って、私はロックペーパーのハサミゲームを作ろうとしました。しかし、このゲームには多くの欠陥があります： 1.私はuser2の選択をしている間にuser1の選択を外す方法を理解する必要があります。 2.ゲームの結果を示す関数は、最初の入力が入力されてから2番目の入力が行われたときにのみ機能します。逆ではありません。HTML/Javascript二人のロックペーパーハサミゲーム
私はすべてのコメント/提案に公開されています！ は次のコードです
<html>
<head>
<title>JAVASCRIPT 4</title>
<link href="js4 practice.css" rel="stylesheet" type"text/css">
</head>
<body>
<h1> Rock, Paper, Scissors Game'</h1>
<br>
<h2 class= "p1"> User One: </h2>
<h2 class= "p2"> User Two: </h2>
<input type="text" ID="compare()"/>
<input type="button" value="Enter" onClick="enter_Answer()"/>
<input type="text" ID="compare2()"/>
<input type="button" value="Enter" onClick="enter_Answer2();game();"/>
<p class="pic" id="pictureLocation"> </p>
<p class="pic2" id="pictureLocation2"> </p>
<p class="answer" id="answerLocation"> </p>
<script>
function enter_Answer() {
var userPick = document.getElementById("compare()").value;
var r = "rock";
var s = "scissors";
var p = "paper";
if (userPick == r) {
document.getElementById("pictureLocation").innerHTML ="<img src='images/rock.jpg' />";
}
else if (userPick == s) {
document.getElementById("pictureLocation").innerHTML ="<img src='images/scissors.jpg' />";
}
else if (userPick == p) {
document.getElementById("pictureLocation").innerHTML ="<img src='images/paper.jpg' />";
}
else {
document.getElementById("pictureLocation").innerHTML = "not a valid input";
}
}
function enter_Answer2() {
var userPick2 = document.getElementById("compare2()").value;
var userPick = document.getElementById("compare()").value;
var r = "rock";
var s = "scissors";
var p = "paper";
if (userPick2 == r) {
document.getElementById("pictureLocation2").innerHTML ="<img src='images/rock.jpg' />";
}
else if (userPick2 == s) {
document.getElementById("pictureLocation2").innerHTML ="<img src='images/scissors.jpg' />";
}
else if (userPick2 == p) {
document.getElementById("pictureLocation2").innerHTML ="<img src='images/paper.jpg' />";
}
else {
document.getElementById("pictureLocation2").innerHTML = "not a valid input";
}
}
function game() {
var userPick = document.getElementById("compare()").value;
var userPick2 = document.getElementById("compare2()").value;
var r = "rock";
var s = "scissors";
var p = "paper";
if (userPick == userPick2) {
document.getElementById("answerLocation").innerHTML = "it's a tie!";
}
else if ((userPick == r) && (userPick2 == s)) {
document.getElementById("answerLocation").innerHTML = "user one wins!";
}
else if ((userPick == r) && (userPick2 == p)) {
document.getElementById("answerLocation").innerHTML = "user two wins!";
}
else if ((userPick == s) && (userPick2 == p)) {
document.getElementById("answerLocation").innerHTML = "user one wins!";
}
else if ((userPick == s) && (userPick2 == r)) {
document.getElementById("answerLocation").innerHTML = "user two wins!";
}
else if ((userPick == p) && (userPick2 == s)) {
document.getElementById("answerLocation").innerHTML = "user one wins!";
}
else if ((userPick == p) && (userPick2 == s)) {
document.getElementById("answerLocation").innerHTML = "user two wins!";
}
}
</script>
</body>
</html>
これを使用できるかどうかを確認するには、http：//jsfiddle.net/h3TcP/4/をご覧ください。連想配列について教えてくれます。それを2人のプレイヤーのゲームに変換して、選択肢の配列に画像を追加するとよいでしょう。これは以前の回答に基づいています：https://stackoverflow.com/a/22623993/4665 –