<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="Dangrain.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory game "Simon says"</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #fff3b0;
}
.game-button {
width: 100px;
height: 100px;
margin: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
opacity: 0.6;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: #b36609;
}
.counter {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="game-container">
<button class="game-button green" onclick="handleButtonClick('green')"></button>
<button class="game-button red" onclick="handleButtonClick('red')"></button>
<button class="game-button blue" onclick="handleButtonClick('blue')"></button>
<button class="game-button yellow" onclick="handleButtonClick('yellow')"></button>
</div>
<p>
<h1>I am going to be frankly pretty honest, ChatGPT helped me a lot with this one.</h1>
<h1>I personally didn't really know that HTML has this many functions.</h1>
</p>
<div class="counter">Round: 0</div>
<script>
const buttonColors = ['green', 'red', 'blue', 'yellow'];
const gameSequence = [];
let playerSequence = [];
let round = 0;
let isFlashing = false;
function generateRandomButton() {
const randomIndex = Math.floor(Math.random() * buttonColors.length);
return buttonColors[randomIndex];
}
async function playSequence() {
isFlashing = true;
for (const buttonColor of gameSequence) {
await flashButton(buttonColor, 500);
await sleep(300);
}
isFlashing = false;
playerSequence = []; // Clear player sequence after computer sequence
}
function flashButton(buttonColor, duration) {
return new Promise(resolve => {
const buttonElement = document.querySelector(`.${buttonColor}`);
buttonElement.style.opacity = 1;
setTimeout(() => {
buttonElement.style.opacity = 0.6;
resolve();
}, duration);
});
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function handleButtonClick(color) {
if (!isFlashing) {
playerSequence.push(color);
flashButton(color, 300);
if (playerSequence.length === gameSequence.length) {
if (JSON.stringify(playerSequence) === JSON.stringify(gameSequence)) {
round++;
updateRoundCounter();
await sleep(500);
playRound();
} else {
alert('Game Over! You made a mistake. Click OK to restart.');
resetGame();
}
}
}
}
async function playRound() {
const nextButton = generateRandomButton();
gameSequence.push(nextButton);
await sleep(500);
await playSequence();
}
function resetGame() {
gameSequence.length = 0;
playerSequence.length = 0;
round = 0;
updateRoundCounter();
playRound();
}
function updateRoundCounter() {
const counterElement = document.querySelector('.counter');
counterElement.textContent = `Round: ${round}`;
}
playRound(); // Start the game
</script>
</body>
</html>