I’m doing the simon calculator and I’m stuck on getting the program to wait for a user to press a button.
Basically I want the flow to be
//Computer presses button function
//Player presses button function
//Checks if player made right move function
How do I get the third function to wait for the second function to have a value before it checks if it is the right move?
https://codepen.io/amthomps/pen/YrZrBK?editors=0111
To get you started, I have two questions.
Q1: Do you realize you have an error showing in the console related to a typo of one of you Queue functions?
Q2: Can you explain to me what you think the following lines of code do?
for (var i = 0; i < count; i++) {
var pmove = humanPress();
playerQ.eneque(pmove); // you have a typo of the function name used
}
Didn’t realize, I was messing around with my code for a while to no avail before I posted this and made some things sloppy in the process.
Well I’m trying to use two different queues to store the sequence of moves that the computer makes and that the player makes. SO what I tried to do with these lines (and I realize it doesn’t do what I want) was to have the player make a move with the function humanPress() and load the returned value into pmove. I then want to put pmove in the player queue of moves. The for loop is going to be used to make however many moves depending on how far the player is in the game.
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;
});