Question posted in 
I am doing a biology project (the effect of sounds on concentration) and I need a program where the concentration itself will be checked. I don’t know html so I asked the AI to make me a code, but it doesn’t work, and I don’t know why. About the essence of the code: at the beginning we select the time and then during this time click on the squares, after which a button appears to start the second game, the essence of this game is that at first the figures are displayed and evaporate in the center (circle, square and trigon) and then you need to repeat the sequence by clicking on three buttons (circle, square and trigon), first you need to repeat 3 figures, then 5, then 10 and so on (+5 each time) and so on until the person makes a mistake. After that, it says about the error and a screen appears where the results of the 1st and 2nd games are written. (I wrote this through a translator, sorry for possible errors). Can someone help with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333333;
font-family: Arial, sans-serif;
}
.game-container {
position: relative;
width: 100vw;
height: 100vh;
}
.square, .circle, .triangle {
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
}
.square {
background-color: rgb(190, 57, 57);
}
.circle {
background-color: rgb(57, 190, 57);
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid rgb(57, 57, 190);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
#timer, #result {
position: absolute;
top: 20px;
left: 20px;
color: rgb(255, 255, 255);
font-size: 20px;
}
#start-screen, #game2-screen {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #333333;
z-index: 1000;
color: white;
}
#restart-button, #next-game-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
padding: 10px;
font-size: 16px;
margin: 10px;
background-color: #555;
border: none;
color: white;
cursor: pointer;
}
.button:hover {
background-color: #777;
}
.game2-button {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="start-screen">
<h1>Click on as many squares as possible</h1>
<label for="time-input">Select a time (in seconds):</label>
<input type="number" id="time-input" min="5" max="60" value="10">
<button id="start-button" class="button">Start the game</button>
</div>
<div id="game2-screen" style="display: none;">
<h1>Remember the sequence and repeat</h1>
<div id="sequence"></div>
<div>
<button id="square-button" class="game2-button square"></button>
<button id="circle-button" class="game2-button circle"></button>
<button id="triangle-button" class="game2-button triangle"></button>
</div>
<div id="feedback"></div>
<button id="next-game-button" class="button" style="display: none;">Restart game</button>
</div>
<div class="game-container">
<div id="timer"></div>
<div id="result"></div>
</div>
<script>
const gameContainer = document.querySelector('.game-container');
const timerElement = document.getElementById('timer');
const resultElement = document.getElementById('result');
const startScreen = document.getElementById('start-screen');
const game2Screen = document.getElementById('game2-screen');
const startButton = document.getElementById('start-button');
const timeInput = document.getElementById('time-input');
const restartButton = document.getElementById('restart-button');
const nextGameButton = document.getElementById('next-game-button');
let score = 0;
let timeLeft;
let gameInterval;
let game2Score1 = 0;
let game2Score2 = 0;
let sequence = [];
let userSequence = [];
let sequenceLength = 3;
function getRandomPosition() {
const x = Math.random() * (window.innerWidth - 50);
const y = Math.random() * (window.innerHeight - 50);
return { x, y };
}
function spawnSquare() {
const square = document.createElement('div');
square.classList.add('square');
const { x, y } = getRandomPosition();
square.style.left = `${x}px`;
square.style.top = `${y}px`;
square.addEventListener('click', () => {
score++;
square.remove();
spawnSquare();
});
gameContainer.appendChild(square);
}
function startGame() {
score = 0;
timeLeft = parseInt(timeInput.value);
startScreen.style.display = 'none';
spawnSquare();
timerElement.textContent = `Time: ${timeLeft}s`;
gameInterval = setInterval(() => {
timeLeft--;
timerElement.textContent = `Time: ${timeLeft}s`;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function startMemoryGame() {
sequence = [];
userSequence = [];
generateSequence();
showSequence();
}
function generateSequence() {
for (let i = 0; i < sequenceLength; i++) {
const shapes = ['square', 'circle', 'triangle'];
sequence.push(shapes[Math.floor(Math.random() * shapes.length)]);
}
}
function showSequence() {
const sequenceDiv = document.getElementById('sequence');
sequenceDiv.innerHTML = '';
sequence.forEach((shape, index) => {
setTimeout(() => {
const shapeDiv = document.createElement('div');
shapeDiv.classList.add(shape);
sequenceDiv.appendChild(shapeDiv);
setTimeout(() => shapeDiv.remove(), 500);
}, index * 1000);
});
setTimeout(() => {
sequenceDiv.innerHTML = '';
enableButtons();
}, sequence.length * 1000);
}
function enableButtons() {
document.getElementById('square-button').addEventListener('click', () => handleUserInput('square'));
document.getElementById('circle-button').addEventListener('click', () => handleUserInput('circle'));
document.getElementById('triangle-button').addEventListener('click', () => handleUserInput('triangle'));
}
function handleUserInput(shape) {
userSequence.push(shape);
if (userSequence[userSequence.length - 1] !== sequence[userSequence.length - 1]) {
endMemoryGame(false);
return;
}
if (userSequence.length === sequence.length) {
endMemoryGame(true);
}
}
function endMemoryGame(success) {
document.getElementById('square-button').removeEventListener('click', () => handleUserInput('square'));
document.getElementById('circle-button').removeEventListener('click', () => handleUserInput('circle'));
document.getElementById('triangle-button').removeEventListener('click', () => handleUserInput('triangle'));
if (success) {
game2Score2 = sequenceLength;
sequenceLength += 5;
document.getElementById('feedback').textContent = 'Well done!';
} else {
document.getElementById('feedback').textContent = 'Try again!';
}
resultElement.innerHTML = `
Your score of 1 game: ${game2Score1}<br>
Your score of 2 game: ${game2Score2}
`;
nextGameButton.style.display = 'block';
}
function restartGame() {
resultElement.textContent = '';
game2Screen.style.display = 'none';
startScreen.style.display = 'flex';
nextGameButton.style.display = 'none';
}
function startNewGame() {
resultElement.textContent = '';
game2Screen.style.display = 'none';
startGame();
}
startButton.addEventListener('click', startGame);
nextGameButton.addEventListener('click', startNewGame);
</script>
</body>
</html>
2
Answers
There were some oversights, which AI used to do. The following code has a bit of design issue, but it should work as expected
Nice try with your HTML project.
Try to use DevTool Console to find/debug your problems. That’s what everyone does.
As mentioned in Console output there is no endGame() function in your code.
Good Luck with your project! 😉