JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="circle">
<div class = "playbox green top" id="1"></div>
<div class = "playbox red top" id="2"></div>
<div class = "playbox yellow" id="3"></div>
<div class = "playbox blue" id="4"></div>
</div>
<button class="btn" id="start">Start</button>
CSS
body {
margin: 0;
padding: 0;
text-align: center;
}
div {
height: 100px;
width: 100px;
}
.green {
background: green;
float: left;
}
.red {
background: red;
margin-left: 100px;
}
.yellow {
background: yellow;
float: left;
}
.blue {
background: blue;
margin-left: 100px;
}
.hover {
background: white;
}
JavaScript
$(document).ready(function(){
//Global Arrays
var player = [];
var comp = [];
//function for RandomInt 1-4
function randomInt()
{
return Math.floor(Math.random()*(4-1+1)+1);
}
//hover function
function hover(value){
$("#" + value).addClass("hover");
setTimeout(function(){
$("#" + value).removeClass("hover");
}, 500);
};
//Comp Move
var hoverCount = 0
function addCompMove(){
comp.push(randomInt());
compHover();
}
function compHover()
{setTimeout(function (){
console.log(hoverCount);
hover(comp[hoverCount]);
hoverCount++;
if (hoverCount < comp.length){
compHover();
}
}, 1000)
playerMove();
};
//Player Move
function playerMove() {
$(".playbox").on("click", function() {
var clickedId = parseInt(this.id)
console.log(clickedId);
player.push(clickedId);
hover(clickedId);
correctMove();
})
}
//Testing
function arrayEqual(arr1, arr2){
if (arr1.length !== arr2.length){
return false;
}
for (var i = arr1.length; i > -1; i--){
if(arr1[i] !== arr2[i])
return false;
}
return true;
};
function correctMove(){
if(arrayEqual(comp, player)) {
hoverCount = 0;
player.length = 0;
addCompMove();
}
else {playerMove();}
};
//Start
$("#start").bind("click", function(){
addCompMove();
});
});