OK, here we go. I made several modifications to your Codepen code:
#1) I organized your code, because it was quite scattered. First, I moved all the functions and main code inside the $(document).ready function. Next, I put all the functions (including event handlers) at the top of the ready function and all of the global variables and code at the bottom of the ready function.
#2) I simplified your Queue’s internal delete function from:
this.delete = function(){
len = this.ele.length;
for(var i = 0; i < len;i++){
this.ele.pop();
}
}
to
this.delete = function() { this.ele = [] };
#3) I removed your Queue’s dequeue function, because it was not used anywhere and was taking up space.
#4) I modified your html so that each of the four blocks had an id which matches the colors of the buttons. Instead of your block1, block2, block3, block4, they are now, red, blue, green, and yellow. I did this to make the console.logs display the computer and players actual button colors pressed which makes the code and game more readable. I also modifed your css to reflect the name changes of the block IDs.
#5) The change I describe here and in #6 below answers part of your main question of how to get the computer to wait for the player’s response. The start button and block button click events is where most of the changes were made. When the game is started, two things happen. First, computerQ gets assigned a randomly selected color via the computerPress function. You will now see that computerPress is much simpler now and makes use of a new variable called colors which contains the 4 colors of the buttons.
var computerPress = function() {
num = Math.floor(Math.random() * 4);
return colors[num];
};
Second, I created a new function called displayComputerMove, so you can see what the computer actually put into the queue.
var displayComputerMove = function() {
console.log('Computer move is ' + computerQ.ele[0]);
};
For now, that is all that needs to happen once the game button is clicked.
#6) The “waiting” part is taken care of by waiting until the block button is clicked. I left most of your logic in place for the block click event function, but did add a console.log statement so you could see what the player presses. Once it is displayed, the computerQ gets a new color added to it and then it is displayed via the displayComputerMove function again.
And Finally…
So with the changes I made, it does not solve all your problems. All it does for you is start the game, have computer display a new color and wait for the player to respond, and then display player’s response once player has clicked a button, then the process is repeated over and over.
You need to figure out how to get the computer to display a new sequence of colors and not just a new single color. Once you get that working, then you will need to figure out how to make the buttons light up and sounds play, display the current sequence length, etc… I think I have left you with enough of a working solution to get you started.
The entire new code is below:
HTML
<body>
<div class="container-fluid">
<div class="text-center wrapper">
<button id= "reset">reset</button>
<button id="start">Start</button>
<div id="row1">
<button class="block" id="red"></button>
<button class="block" id="blue"></button>
</div>
<div id="row2">
<button class="block" id="green"></button>
<button class="block" id="yellow"></button>
<label><input type="radio" name="easy"> Easy</label>
<label><input type="radio" name="easy"> Hard</label>
</div>
</div>
</body>
CSS
body{
background-color:lightblue;
}
#reset{
display:block;
margin: 0 auto;
width:200px
}
.block{
display:block;
margin:0 auto;
width:150px;
height:150px;
}
.block:focus{
outline:none;
}
.wrapper{
margin-top:100px;
}
#start{
margin-bottom:5px;
width:310px;
}
#row1{
width:310px;
margin:0 auto;
}
#row2{
width:310px;
margin:0 auto;
}
#red{
background-color:red;
float:left;
margin:0px 5px 5px 0px;
}
#blue{
background-color:blue;
float:right;
margin: 0px 0px 5px 5px;
}
#green{
background-color:green;
float:left;
margin: 5px 5px 0px 0px;
}
#yellow{
background-color:yellow;
float:right;
margin: 5px 0px 0px 5px;
}
label{
width:143px;
border:solid black 1px;
margin:5px;
background-color:white;
}
JavaScript
$(document).ready(function() {
function Queue() {
this.ele = [];
this.enqueue = function(item) { this.ele.unshift(item) };
this.delete = function() { this.ele = [] };
}
var computerPress = function() {
num = Math.floor(Math.random() * 4);
return colors[num];
};
var displayComputerMove = function() {
console.log('Computer move is ' + computerQ.ele[0]);
};
var compareMoves = function(m1, m2) {
return m1 === m2;
};
// following function controls what happens after player clicks a button
$(".block").on("click", function(event) {
playerQ.enqueue(this.id);
//Supposed to check if move is correct
if (compareMoves(computerQ.ele[0], playerQ.ele[0])) {
console.log("Player's move of " + playerQ.ele[0] + " is Correct");
computerQ.enqueue(computerPress());
displayComputerMove();
}
else {
console.log("Player's move of " + playerQ.ele[0] + " is Wrong");
}
});
$("#reset").on("click", function(event) {
playerQ.delete();
computerQ.delete();
count = 1;
});
$("#start").on("click", function(event) {
playerQ.delete();
computerQ.delete();
computerQ.enqueue(computerPress());
displayComputerMove();
});
// MAIN PROGRAM
var colors = ['red', 'blue', 'green', 'yellow'];
var playerQ = new Queue();
var computerQ = new Queue();
var count = 1;
});