So far I have created some event listeners and a random sequence that the program output once the start button is pressed in my Simon game. I am having trouble of thinking of next steps. I am thinking of way of implementing what my code processes out once the start button is pressed and what the user should click. Any help would be highly appreciated
JS file
// create all the variables, element references
let currentScore = 0;
let scoreBoard = document.querySelector('.js-score');
let start = false;
let playerTurn = [];
let gameStart;
const computerChoices = [];
const gameGrid = document.querySelector('.game-grid');
const redButton = document.querySelector('#red-panel');
const greenButton = document.querySelector('#green-panel');
const blueButton = document.querySelector('#blue-panel');
const yellowButton = document.querySelector('#yellow-panel');
const startButton = document.querySelector('#start');
const restartButton = document.querySelector('#restart');
const winnerDisplay = document.querySelector('.winner-display')
// create an event listener so the program records what the player inputs
gameGrid.addEventListener('click', (event) => {
event.preventDefault();
if (event.target.classList.contains('js-button')) {
playerTurn.push(event.target.id);
console.log(playerTurn);
}
});
// create a woking score board so each time the player gets the right prompt it increments +1
gameGrid.addEventListener('click', (event) => {
if (event.target.classList.contains('js-button')) {
currentScore += 1;
if (currentScore < 9999) {
scoreBoard.innerText = currentScore;
// console.log(currentScore);
}
}
});
// create a random sequence that computer outputs
// change game to start once start is pressed
const getRandomSequence = () => {
let sequence = [
redButton,
greenButton,
blueButton,
yellowButton,
];
computerChoices.push(sequence[Math.floor(Math.random()* sequence.length)])
console.log(computerChoices)
};
startButton.addEventListener('click', (event) => {
start = true;
getRandomSequence();
scoreBoard.innerHTML = '0000';
});
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Guillermo Say's</title>
</head>
<body>
<header>
<h1>Simon Say's</h1>
<div class="header-score">
<h2 class="score js-score">----</h2>
</div>
</header>
<button id="about" type="button">About Game</button>
<main>
<div class='game-grid'>
<a href='#' id='red-panel' class='js-button'></a>
<a href='#' id='green-panel' class='js-button'></a>
<a href='#' id='blue-panel' class='js-button'></a>
<a href='#' id='yellow-panel' class='js-button'></a>
</div>
</main>
<h2 class="winner-display"></h2>
<div class="button">
<button id="start" type="button">Start</button>
<button id="restart" type="button">Restart</button>
</div>
<script src='app.js'></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire