I am making a Simon game for freecodecamp.
For some reason, when the pcPattern array is being displayed in the browser, it comes out backwards.
Please help guys, have been study for hours.
https://codepen.io/danovity/pen/ZyvvKM
$( document ).ready(function() {
var move=0;
var pcPattern=[];
var userPattern=[];
var clickAmount=0;
var stage=0;
//Updates count screen
function moveDisplay(move,id,color){
let buttonPressed=id;
let countDisplay='count';
document.getElementById(countDisplay).style.color = color; document.getElementById(countDisplay).firstChild.data=move;
}
//Compare if move matches the pcPattern
function compareMove(){
console.log("At compareMove, userPattern.length: "+userPattern.length);
clickAmount+=1;
console.log("clickAmount is: "+clickAmount);
if(pcPattern[clickAmount-1]===userPattern[clickAmount-1]){
console.log('pcPattern['+clickAmount+'] is: '+pcPattern[clickAmount-1]);
console.log('userPattern['+clickAmount+'] is: '+userPattern[clickAmount-1]);
setTimeout(
function chkPatternLength(){
console.log('check patterns length, pcPattern.length= '+pcPattern.length+' ,userPattern.length= '+userPattern.length);
if (pcPattern.length===userPattern.length){
userPattern=[];
clickAmount=0;
stage+=1;
generatePattern();
//showPattern(pcPattern);
console.log("Stage is: "+stage);
}
},3000);
}
}
//Generate Pattern
function generatePattern(){
//generate random number from 1-4
let randomNumber=Math.ceil(Math.random()*2);
pcPattern.push(randomNumber);
console.log("randomNumber is: "+randomNumber);
console.log("pcPattern is: "+pcPattern);
showPattern(pcPattern);
}
//Check Pattern Length
// function chkPatternLength(){
// console.log('check patterns length, pcPattern.length= '+pcPattern.length+' ,userPattern.length= '+userPattern.length);
// if (pcPattern.length===userPattern.length){
// userPattern=[];
// clickAmount=0;
// stage+=1;
// generatePattern();
// //showPattern(pcPattern);
// console.log("Stage is: "+stage);
// }
// }
//btn Animation
function btnAnimation(btnId,firstColor,secondColor){
$(btnId).animate({backgroundColor:firstColor});
$(btnId).delay(500);
$(btnId).animate({backgroundColor:secondColor});
$(btnId).delay(500);
}
//Light up button based on generated pattern
function activateBtn(btn){
console.log("btn is: "+btn);
if (btn===1){
btnAnimation('#btnBlue','blue','#87ceeb');
// $('#btnBlue').animate({backgroundColor:'blue'});
// $('#btnBlue').delay(500);
// $('#btnBlue').animate({backgroundColor:'#87ceeb'});
// $('#btnBlue').delay(500);
console.log('btnBlue activated, btn===1');
}
if (btn===2){
btnAnimation('#btnGreen','#32CD32','green');
// $('#btnGreen').animate({backgroundColor:'green'});
// $('#btnGreen').delay(500);
// $('#btnGreen').animate({backgroundColor:'#32CD32'});
// $('#btnGreen').delay(500);
console.log('btnGreen activated, btn===2');
}
// if (btn===3){
// btnAnimation('#btnRed','#ffc0cb','red');
// console.log('btnRed activated, btn===3');
// }
// if (btn===4){
// btnAnimation('#btnYellow','yellow','#ffa500');
// console.log('btnYellow activated, btn===4');
// }
}
//Show pattern
window.showPattern=function(pattern){
console.log("pattern is: "+pattern);
for (var i=0;i<pattern.length;i++){
console.log('pattern['+i+'] is: '+pattern[i]);
activateBtn(pattern[i]);
}
}
//everytime when a button is clicked
function btnClicked(number){
console.log('Before push('+number+'),userPattern is: '+userPattern);
userPattern.push(number);
console.log('After push('+number+'),userPattern is: '+userPattern);
activateBtn(number);
if (clickAmount<userPattern.length){
compareMove();
//moveDisplay(move,clicked,'black');
}
}
$("button").click(function(){
let clicked=this.id;
if (clicked==="btnBlue"){
//move+=1;
btnClicked(1);
// console.log('Before push(1),userPattern is: '+userPattern);
// userPattern.push(1);
// console.log('After push(1),userPattern is: '+userPattern);
// activateBtn(1);
// compareMove();
// //moveDisplay(move,clicked,'black');
}
if (clicked==="btnGreen"){
//move+=1;
btnClicked(2);
}
// if (clicked==="btnRed"){
// //move+=1;
// btnClicked(3);
// }
// if (clicked==="btnYellow"){
// //move+=1;
// btnClicked(4);
// }
if (clicked==="btnReset"){
userPattern=[];
pcPattern=[];
moveDisplay(move,clicked,'transparent');
stage=0;
}
if (clicked==="btnStart"){
moveDisplay(move,clicked,'black');
generatePattern();
console.log("Stage is: "+stage);
}
});
});
.grid{
width:340px;
height:320px;
margin:auto;
border: 1px solid black;
margin-top:3%;
padding:5px;
}
.select{
background-color: lightblue;
height:150px;
width:150px;
color:transparent;
}
.select #btnBlue:active {
background-color: blue;
}
/* .select #btnGreen:active {
background-color: #90ee90;
}
.select #btnRed:active {
background-color: pink;
}
.select #btnYellow:active {
background-color: lightyellow;
} */
#count{
width:50%;
padding:5%;
margin:5%;
border: 1px solid black;
text-align:center;
color:transparent;
}
<div class="grid">
<button class="select" id="btnBlue">1</button>
<button class="select" id="btnGreen" style="background-color:green">1</button>
<button class="select" id="btnRed" style="background-color:red">1</button>
<button class="select" id="btnYellow" style="background-color:orange">1</button>
<button class="StartStop" id="btnStart">Start</button>
<button class="StartStop" id="btnReset">Reset</button>
<output id="count">1</output>
</div>