1
私はSimon Gameを作っていますが、すでにロジックを追加していますが、プレイヤーが押すまで実行を一時停止する方法はわかりませんタイルに私はuser()という関数を作りました。この関数はユーザーの入力を記録し、それをuserSeq配列にプッシュします。それから、次の（コンピュータかユーザ）のターンを確認するために、私は関数checkTurn()を作った。それがユーザーのターンであれば、私はelseで、user()関数が終了するのを待ってから、callcheckClicks()を呼び出して、ユーザーの入力がコンピュータのものと同じであるかどうかを確認してから新しいレベルに進みます。助けてください！関数を別のものが実行を停止するようにする方法（Simon Game）javascript
$(document).ready(function() {
var green = document.getElementById("green");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var blue = document.getElementById("blue");
var tile = document.getElementsByClassName("tile");
//audio for every click
var audio = [
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
];
// record the round
var round = 0;
// record the random presses
var compSeq = [];
//record user clicks
var userSeq = [];
//if it's false computer moves
var turn = false;
//round number
var round = 0;
//count how many moves user does
var playerIndex = 0;
//start
$(".start").click(function() {
round++;
turn = false;
$("#round")
.html("Round: " + round)
.show();
$(".start, .reset").hide();
checkTurn();
});
function addNewRandomNumber() {
var random = Math.floor(Math.random() * 4) + 1;
computer(random);
console.log("random" + random);
}
// call the computer to make an action
function callComp() {
addNewRandomNumber();
enableClicks();
turn = true;
checkTurn();
}
function callCheckClicks() {
checkClicks();
}
//check every time the user clicks if the user clicks are the same as the computer's
function checkClicks() {
console.log("random clicks: " + compSeq);
//if user guess is correct
if (userSeq[playerIndex] == compSeq[playerIndex]) {
if (userSeq[playerIndex].length == compSeq[playerIndex].length) {
// if they are then it's computer's turn
callComp();
} else {
playerIndex += 1;
$(".start")
.html("Next")
.show();
// user is right, he can continue inputting another clicks if the sequence has
checkTurn();
}
} else {
resetUserVariables(); // user is wrong
}
}
//reset playerIndex
function resetUserVariables() {
playerIndex = 0;
}
//press a random button
function computer(ran) {
switch (ran) {
case 1:
blink(green);
audio[0].play();
compSeq.push(1);
break;
case 2:
blink(red);
audio[1].play();
compSeq.push(2);
break;
case 3:
blink(blue);
audio[2].play();
compSeq.push(3);
break;
case 4:
blink(yellow);
audio[3].play();
compSeq.push(4);
break;
default:
return;
}
console.log("random clicks: " + compSeq);
enableClicks();
turn = true;
checkTurn();
}
//blink a tile
function blink(tile) {
$(tile).fadeOut("slow", function() {
$(this).fadeIn("slow", function() {
return;
});
});
}
//user input
function user() {
if ($(this).is("#green")) {
userSeq.push(1);
audio[0].play();
blink(green);
playerIndex++;
} else if ($(this).is("#red")) {
userSeq.push(2);
audio[1].play();
blink(red);
playerIndex++;
} else if ($(this).is("#blue")) {
userSeq.push(3);
audio[2].play();
blink(blue);
playerIndex++;
} else if ($(this).is("#yellow")) {
userSeq.push(4);
audio[3].play();
blink(yellow);
playerIndex++;
}
turn = false;
checkTurn();
console.log("user clicks: " + userSeq);
}
//add an event listener for user clicks
function enableClicks() {
for (var i = 0; i < tile.length; i++) {
tile[i].addEventListener("click", user, false);
}
}
//disable clicks when is computer's turn
function disableClicks() {
for (var i = 0; i < tile.length; i++) {
tile[i].removeEventListener("click", user, false);
}
}
//check who's turn is next
function checkTurn() {
if (turn === false) {
//call computer
callComp();
} else {
callCheckClicks();
}
}
//document.ready().
});html * {
text-align: center;
background-color: #d3d3d3;
}
h1 {
font-size: 60px;
padding-bottom: 10px;
}
h3 {
display: none;
padding-bottom: 30px;
}
.circle {
background: #d3d3d3;
width: 320px;
height: 320px;
border-radius: 50%;
border: 10px solid gray;
margin: auto;
}
.tile {
height: 150px;
width: 150px;
float: left;
cursor: pointer;
}
#red {
background-color: red;
border-top-right-radius: 100%;
}
#green {
background-color: green;
border-top-left-radius: 100%;
}
#blue {
background-color: blue;
border-bottom-right-radius: 100%;
}
#yellow {
background-color: yellow;
border-bottom-left-radius: 100%;
}
btn {
padding-top: 40px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1 class="text-center">Simon Game</h1>
<div class="container text-center">
<h3 id="round">Round: </h3>
<div class="circle">
<div class="tile" onclick="user()" id="green"></div>
<div class="tile" onclick="user()" id="red"></div>
<div class="tile" onclick="user()" id="yellow"></div>
<div class="tile" onclick="user()" id="blue"></div>
</div>
<a class="btn start btn-default">Start</a>
<a class="btn reset btn-default" onclick="reset()">Reset</a>
<!-- container !-->
</div>
あなたのコードは読みにくいです。疑わしい部分を選択してください – moon
コンピュータが再生した後はいつも、問題がcheckTurn（）関数にあると思います。その関数を呼び出し、else文のコードを実行し、checkClicks （）関数が終了するのを待つことなく、（）を呼び出すことができ、ユーザーの入力を待つ方法がわかりません。 – Teo