Designing a final splash screen for my game with the help of JavaScript, Cascading Style Sheets, and

Question

Designing a final splash screen for my game with the help of JavaScript, Cascading Style Sheets, and

I'm facing a challenge with setting up an end screen for my candy crush game. I have implemented a timer, but when the time runs out and certain conditions are met, the end screen fails to appear. Do you know what might be causing this issue?

function timer() {
    var seconds = 120;
    var timer = setInterval(function() {
        document.getElementById("safeTimerDisplay").innerHTML = seconds;
        seconds--;
        if (seconds < 0) {
            clearInterval(timer);
        }
    }, 1000);
}

timer();


function endGame() {
    if (seconds === 0 && score > 1800) {
        console.log(endWindow1)
    }
}

#EndWindow1 {
    background: url("./endscreen.jpg") no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
}

<div id="EndWindow1" style="display:none;"></div>
<h1>Timer: <span id="safeTimerDisplay"></span></h1>

In an attempt to showcase a specific image when the user's score surpasses 1800 and the timer hits zero, I have set up a conditional statement. However, upon reaching zero on the clock, nothing changes and the game continues as normal. It seems like something is interrupting the display of the end screen.

javascript html css

Answer 1

Answer №1

There are a number of concerns to address in this scenario:

The element EndWindow1 lacks content and has a default height of auto, making it effectively invisible due to its empty nature.
The function endGame() is never invoked within the code snippet.
console.log() serves as a debugging tool for outputting information to the console, rather than toggling element visibility.
A variable/constant that was not declared is being referenced instead of the intended element EndWindow1.

window.addEventListener('DOMContentLoaded', function() {
  const TIMER = document.getElementById('safeTimerDisplay');
  const END_WINDOW = document.getElementById('EndWindow1');
  let remaining_time = 10;
  let score = 1801;
  
  function timer() {
    let timer = setInterval(function() {
      TIMER.textContent = remaining_time;
      remaining_time--;
      switch (remaining_time) {
        case 0:
          endGame();
          break;
        case -1:
          clearInterval(timer);
          break;
        default:
          break;
      }
    }, 1000);
  }

  timer();

  function endGame() {
    END_WINDOW.classList.toggle('d-none', !(score > 1800));
  }
})

#EndWindow1 {
  background: url("https://via.placeholder.com/200.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  height: 200px;
}

.d-none {
  display: none;
}

<div id="EndWindow1" class="d-none"></div>
<h1>Timer: <span id="safeTimerDisplay"></span></h1>

Code Enhancement:

Rather than utilizing:

if (seconds === 0 && score > 1800) {
  console.log(endWindow1)
}

and evaluating two conditions separately, consider incorporating the call to endGame directly within the setInterval callback where timing is continuously monitored.

Eliminate the need for an if statement by managing element visibility through CSS class manipulation using classList.toggle to show or hide based on specified conditions.

Answer 2

There are a number of concerns to address in this scenario:

The element EndWindow1 lacks content and has a default height of auto, making it effectively invisible due to its empty nature.
The function endGame() is never invoked within the code snippet.
console.log() serves as a debugging tool for outputting information to the console, rather than toggling element visibility.
A variable/constant that was not declared is being referenced instead of the intended element EndWindow1.

window.addEventListener('DOMContentLoaded', function() {
  const TIMER = document.getElementById('safeTimerDisplay');
  const END_WINDOW = document.getElementById('EndWindow1');
  let remaining_time = 10;
  let score = 1801;
  
  function timer() {
    let timer = setInterval(function() {
      TIMER.textContent = remaining_time;
      remaining_time--;
      switch (remaining_time) {
        case 0:
          endGame();
          break;
        case -1:
          clearInterval(timer);
          break;
        default:
          break;
      }
    }, 1000);
  }

  timer();

  function endGame() {
    END_WINDOW.classList.toggle('d-none', !(score > 1800));
  }
})

#EndWindow1 {
  background: url("https://via.placeholder.com/200.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  height: 200px;
}

.d-none {
  display: none;
}

<div id="EndWindow1" class="d-none"></div>
<h1>Timer: <span id="safeTimerDisplay"></span></h1>

Code Enhancement:

Rather than utilizing:

if (seconds === 0 && score > 1800) {
  console.log(endWindow1)
}

and evaluating two conditions separately, consider incorporating the call to endGame directly within the setInterval callback where timing is continuously monitored.

Eliminate the need for an if statement by managing element visibility through CSS class manipulation using classList.toggle to show or hide based on specified conditions.

Answer 3

Answer №2

function countdown() {
  var time = 120;
  var timerInterval = setInterval(function() {
    document.getElementById("countdownDisplay").innerHTML = time;
    time--;
    if (time < 0) {
      clearInterval(timerInterval);
    }
  }, 1000);
}

countdown();


function evaluateScore() {
  if (time === 0 && score > 1800) {
    console.log(gameOverMessage)
  }
}

#endScreen1 {
  background: url("./endscreen.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
}

Answer 4

function countdown() {
  var time = 120;
  var timerInterval = setInterval(function() {
    document.getElementById("countdownDisplay").innerHTML = time;
    time--;
    if (time < 0) {
      clearInterval(timerInterval);
    }
  }, 1000);
}

countdown();


function evaluateScore() {
  if (time === 0 && score > 1800) {
    console.log(gameOverMessage)
  }
}

#endScreen1 {
  background: url("./endscreen.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
}

Designing a final splash screen for my game with the help of JavaScript, Cascading Style Sheets, and

Answer №1

Code Enhancement:

Answer №2

Similar questions

Exploring the PayPal Checkout JavaScript SDK's CreateOrder call and interpreting the response

Update the blue glow effect on checkbox inputs within Bootstrap 4 to create a unique visual experience

Include the window.innerWidth value in the initial GET request

What is the best way to modify .js source files while using AjaxControlToolkit?

Retrieve data from server using Angular and present content on a dedicated webpage

Explore records within a specific date range AS WELL AS insert data within a defined date range

Tips for aligning content to the right edge

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

The specified CSS background image is not correctly aligned with the dimensions of the selector

Importing multiple modules in Typescript is a common practice

How can I fully personalize the ion-toggle in Ionic?

Unable to toggle sidebar in Angular Material component

The ng-repeat ng-switch combination is not functioning as expected

AngularJS $q - pausing execution to synchronize all promises

how to change visibility with Javascript

Issues with displaying images in IE 11 when using Flex

What's causing me to encounter two canvases while implementing PIXI.js in my Next.js project?

Designing versatile buttons with HTML

Add the item to a fresh array using the Ajax function

Adding numerous objects to a Vuex store using mutations