Error in points calculation and verification of colors

Question

Error in points calculation and verification of colors

Welcome to the Color Challenge, where you must match the target color from a grid of colors to earn points. However, there seems to be an issue with the color checking and point tracking system. Initially, everything works fine, but as you click on more colors, errors start to creep in and eventually the game breaks down completely.

// script.js
const startBtn = document.getElementById('startBtn');
const startScreen = document.getElementById('startScreen');
const gameScreen = document.getElementById('gameScreen');
const endScreen = document.getElementById('endScreen');

const pointsBox = document.getElementById('pointsBox');
let points = 0;
console.log(points)


const targetClrBox = document.getElementById('targetClr');
const gridClrs = document.getElementById('gridClrs');

startBtn.addEventListener('click', setupColorGame);

function setupColorGame() {
  startScreen.classList.add('hidden');
  gameScreen.classList.remove('hidden');
  gameScreen.style.display = 'flex';

  initializeGame();
}

function initializeGame() {
  const clrs = [
    'rgb(238, 82, 83)',
    'rgb(253, 57, 115)',
    'rgb(87, 101, 116)',
    'rgb(95, 39, 205)',
    'rgb(6, 152, 22)',
    'rgb(29, 209, 161)',
    'rgb(243, 104, 224)',
    'rgb(255, 159, 243)',
    'rgb(230, 126, 34)',
    'rgb(254, 202, 87)',
    'rgb(46, 134, 222)',
    'rgb(84, 160, 255)',
    'rgb(1, 163, 164)',
    'rgb(0, 210, 211)'
  ];

  const targetClr = selectTargetClr(clrs);
  targetClrBox.style.backgroundColor = targetClr;

  const shuffledGridClrs = shuffleArray(clrs);
  setDivBackgroundColors(shuffledGridClrs);
  addBoxEventListeners();
}

function selectTargetClr(clrs) {
  const clrsIndex = Math.floor(Math.random() * clrs.length);
  return clrs[clrsIndex];
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

let boxes;

function setDivBackgroundColors(colors) {
  boxes = document.querySelectorAll('.clrBoxes');
  boxes.forEach((box, index) => {
    box.style.backgroundColor = colors[index];
  });
}

function addBoxEventListeners() {
  boxes.forEach(box => {
    box.addEventListener('click', () => {
      if (box.style.backgroundColor === targetClrBox.style.backgroundColor) {
        points++
        pointsBox.innerHTML = points;
        console.log(points);
        initializeGame();
      } else {

        initializeGame();
      }
    });
  });
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none;
}


#gameScreen {
  flex-direction: column;
  justify-content: space-between; /* Changed to space-between */
  align-items: center;
  height: 100vh;
}

.clrBox {
  width: 125px;
  height: 125px;
  border: 1px dashed black;
  border-radius: 7px;
  margin: 3px;
  transition: all ease 0.1s;
}

.clrBox:hover {
  margin-top: -3px;
  margin-left: -1px;
}

#targetClr {
  margin-top: 20px;
  border: 1px solid black;
}

#gridClrs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 7px;

  margin-bottom: 20px; 

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Match Chaos</title>

  <link rel="stylesheet" href="./styles/main.css">
</head>
<body>


  <div id="startScreen">
    
    
    <button id="startBtn">Start Game</button>

  </div>


  <div id="gameScreen" class="hidden">

    <div id="targetBox">
      <div id="targetClr" class="clrBox"></div>

    </div>
    
    <div>
      <span id="pointsBox">0</span> / 10
    </div>

    <div id="gridClrs">

      <div class="clrBox clrBoxes" id="1"></div>
      <div class="clrBox clrBoxes" id="2"></div>
      <div class="clrBox clrBoxes" id="3"></div>
      <div class="clrBox clrBoxes" id="4"></div>
      <div class="clrBox clrBoxes" id="5"></div>
      <div class="clrBox clrBoxes" id="6"></div>
      <div class="clrBox clrBoxes" id="7"></div>
      <div class="clrBox clrBoxes" id="8"></div>
      <div class="clrBox clrBoxes" id="9"></div>
      <div class="clrBox clrBoxes" id="10"></div>
      <div class="clrBox clrBoxes" id="11"></div>
      <div class="clrBox clrBoxes" id="12"></div>
      <div class="clrBox clrBoxes" id="13"></div>
      <div class="clrBox clrBoxes" id="14"></div>

    </div>


  </div>



  <div id="endScreen" class="hidden">

  </div>

  <script type="module" src="./scripts/main.js"></script>
  
</body>
</html>

javascript html css

Answer 1

Answer №1

The reason for multiple event listener bindings in each iteration

box.addEventListener('click', () => {

is the absence of removal of previous listeners.

A closer look during debugging reveals that every click activates the handlers N times, with N being the total number of previous clicks.

Answer 2

The reason for multiple event listener bindings in each iteration

box.addEventListener('click', () => {

is the absence of removal of previous listeners.

A closer look during debugging reveals that every click activates the handlers N times, with N being the total number of previous clicks.

Answer 3

Answer №2

const startBtn = document.getElementById('startBtn');
const startScreen = document.getElementById('startScreen');
const gameScreen = document.getElementById('gameScreen');
const endScreen = document.getElementById('endScreen');

const pointsBox = document.getElementById('pointsBox');
let points = 0;

const targetClrBox = document.getElementById('targetClr');
const gridClrs = document.getElementById('gridClrs');

startBtn.addEventListener('click', setupColorGame);

function setupColorGame() {
  startScreen.classList.add('hidden');
  gameScreen.classList.remove('hidden');
  gameScreen.style.display = 'flex';

  initializeGame();
}

function initializeGame() {
  const clrs = [
    'rgb(238, 82, 83)',
    'rgb(253, 57, 115)',
    'rgb(87, 101, 116)',
    'rgb(95, 39, 205)',
    'rgb(6, 152, 22)',
    'rgb(29, 209, 161)',
    'rgb(243, 104, 224)',
    'rgb(255, 159, 243)',
    'rgb(230, 126, 34)',
    'rgb(254, 202, 87)',
    'rgb(46, 134, 222)',
    'rgb(84, 160, 255)',
    'rgb(1, 163, 164)',
    'rgb(0, 210, 211)'
  ];

  const targetClr = selectTargetClr(clrs);
  targetClrBox.style.backgroundColor = targetClr;

  const shuffledGridClrs = shuffleArray(clrs);
  setDivBackgroundColors(shuffledGridClrs);
  addBoxEventListeners();
}

function selectTargetClr(clrs) {
  const clrsIndex = Math.floor(Math.random() * clrs.length);
  return clrs[clrsIndex];
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function setDivBackgroundColors(colors) {
  const boxes = document.querySelectorAll('.clrBoxes');
  boxes.forEach((box, index) => {
    box.style.backgroundColor = colors[index];
  });
}

function addBoxEventListeners() {
  const boxes = document.querySelectorAll('.clrBoxes');
  boxes.forEach(box => {
    if (box.style.backgroundColor === targetClrBox.style.backgroundColor) {
      box.addEventListener('click', checkColorMatch);
      box.addEventListener('click', startNewGame);
    }
  });
}

function checkColorMatch(event) {
  const clickedColor = event.target.style.backgroundColor;
  const targetColor = targetClrBox.style.backgroundColor;
  
  if (clickedColor === targetColor) {
    points++;
    pointsBox.textContent = `Points: ${points}`;
    event.target.removeEventListener('click', checkColorMatch);
  }
}

function startNewGame() {
  initializeGame();
}

I made adjustments to only add event listeners to the target color in the grid boxes and remove it after incrementing the points. I also added an event listener to all boxes to create a new game when clicked. It now functions correctly.

Answer 4

const startBtn = document.getElementById('startBtn');
const startScreen = document.getElementById('startScreen');
const gameScreen = document.getElementById('gameScreen');
const endScreen = document.getElementById('endScreen');

const pointsBox = document.getElementById('pointsBox');
let points = 0;

const targetClrBox = document.getElementById('targetClr');
const gridClrs = document.getElementById('gridClrs');

startBtn.addEventListener('click', setupColorGame);

function setupColorGame() {
  startScreen.classList.add('hidden');
  gameScreen.classList.remove('hidden');
  gameScreen.style.display = 'flex';

  initializeGame();
}

function initializeGame() {
  const clrs = [
    'rgb(238, 82, 83)',
    'rgb(253, 57, 115)',
    'rgb(87, 101, 116)',
    'rgb(95, 39, 205)',
    'rgb(6, 152, 22)',
    'rgb(29, 209, 161)',
    'rgb(243, 104, 224)',
    'rgb(255, 159, 243)',
    'rgb(230, 126, 34)',
    'rgb(254, 202, 87)',
    'rgb(46, 134, 222)',
    'rgb(84, 160, 255)',
    'rgb(1, 163, 164)',
    'rgb(0, 210, 211)'
  ];

  const targetClr = selectTargetClr(clrs);
  targetClrBox.style.backgroundColor = targetClr;

  const shuffledGridClrs = shuffleArray(clrs);
  setDivBackgroundColors(shuffledGridClrs);
  addBoxEventListeners();
}

function selectTargetClr(clrs) {
  const clrsIndex = Math.floor(Math.random() * clrs.length);
  return clrs[clrsIndex];
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function setDivBackgroundColors(colors) {
  const boxes = document.querySelectorAll('.clrBoxes');
  boxes.forEach((box, index) => {
    box.style.backgroundColor = colors[index];
  });
}

function addBoxEventListeners() {
  const boxes = document.querySelectorAll('.clrBoxes');
  boxes.forEach(box => {
    if (box.style.backgroundColor === targetClrBox.style.backgroundColor) {
      box.addEventListener('click', checkColorMatch);
      box.addEventListener('click', startNewGame);
    }
  });
}

function checkColorMatch(event) {
  const clickedColor = event.target.style.backgroundColor;
  const targetColor = targetClrBox.style.backgroundColor;
  
  if (clickedColor === targetColor) {
    points++;
    pointsBox.textContent = `Points: ${points}`;
    event.target.removeEventListener('click', checkColorMatch);
  }
}

function startNewGame() {
  initializeGame();
}

I made adjustments to only add event listeners to the target color in the grid boxes and remove it after incrementing the points. I also added an event listener to all boxes to create a new game when clicked. It now functions correctly.

Error in points calculation and verification of colors

Answer №1

Answer №2

Similar questions

Make sure to execute observables just once, and afterwards verify if they have finished - angular2 typescript

Sharing Angular 4 components in my project - collaboration at its finest

Prevent a button on my side bar from being clicked until the user has logged in?

Incorporating images with JavaScript in Jade templates

A compilation of web browsers and their compatible versions for the SVG engine

looking to save a service or factory as a variable

Failed to successfully sort several distinct lists using the ng2-dnd sorting library

Error encountered while parsing Node.js code for MySQL query execution

The jQuery mobile button may occasionally appear selected without triggering a page transition

Ways to extract Document ID from a Firestore database collection

It's not possible to add additional options to the select input in a react

Display the page for 10 seconds continuously in a loop

When attempting to access the shazam API, I encountered an issue where my useTopChartsQuery function was not recognized as a valid function

Utilize JQuery variables for toggling the visibility of various DIV elements

The hover effect in CSS is not altering the entire background

What is the difference in memory usage for JavaScript objects between Node.js and Chrome?

Is it possible to execute node.js code within a Java script environment?

Attempting to integrate a TypeScript library with a JavaScript Express application

What is the process for incorporating the Angular JS $q service into this specific scenario?

The issue of numbers not being properly summed in Node.js