Simon game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simon Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Simon Game</h1>
<h3>Press any key to start game</h3>
<div class="btn-container">
<div type="button" id="red" class="btn red"></div>
<div type="button" id="green" class="btn green"></div>
<div type="button" id="purple" class="btn purple"></div>
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<script src="app.js"></script>
</body>
</html>
----------------------------------------------------------
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
text-align: center;
margin: 1rem 0;
}
.btn-container {
width: fit-content;
padding: 2rem;
margin: auto;
text-align: center;
display: grid;
grid-gap: .8rem;
grid-template-columns: repeat(2, 180px);
}
.btn {
height: 170px;
width: 170px;
border-radius: 20%;
cursor: pointer;
border: 8px solid #2d3436;
}
.red {
background-color: #d63031;
}
.green {
background-color: #00b894;
}
.purple {
background-color: #e84393;
}
.yellow {
background-color: #ffeaa7;
}
/* Javascript class */
.flash {
background-color: #fff;
}
.userFlash {
background-color: #393737;
}
---------------------------------------------------------------------
javaScript Code
let gameSeq = [];
let userSeq = [];
let colors = ["red", "yellow", "green", "purple" ];
let started = false;
let level = 0;
// step = 1
document.addEventListener("keypress", function (event) {
if (started == false) {
started = true;
console.log("game started");
levelUp();
}
});
// step = 2
let h3 = document.querySelector("h3");
function levelUp() {
userSeq = []; // because user enter gameSequence 0 to last index
level++;
h3.innerText = `Level ${level}`;
// flash random btn
let randIdx = Math.floor(Math.random() * 3);
let randColor = colors[randIdx];
let randBtn = document.querySelector(`.${randColor}`);
// add random color into game sequence array
gameSeq.push(randColor);
console.log(gameSeq);
gameFlash(randBtn);
}
function gameFlash(btn) {
btn.classList.add("flash");
setTimeout(function () {
btn.classList.remove("flash");
}, 300);
}
// step - 3
let allBtn = document.querySelectorAll(".btn-container .btn");
for (btn of allBtn) {
btn.addEventListener("click", btnPress);
}
function btnPress() {
let btn = this;
userFlash(btn);
let userColor = btn.getAttribute("id");
userSeq.push(userColor); // push user pressed color into array
checkSequence(userSeq.length-1);
}
function userFlash(btn) {
btn.classList.add("userFlash");
setTimeout(function () {
btn.classList.remove("userFlash");
}, 250);
}
function checkSequence(idx) {
if (userSeq[idx] === gameSeq[idx]) {
if (userSeq.length == gameSeq.length) {
setTimeout(levelUp, 1000);
}
}
else {
h3.innerHTML = `Game Over!! Your score is <b> ${level} </b> <br> Press any key to start`;
document.querySelector("body").style.background = "red";
setTimeout(function () {
document.querySelector("body").style.background = "white";
}, 250);
reset();
}
}
function reset() {
started = false;
gameSeq = [];
userSeq = [];
level = 0;
}
======================================================
0 Comments