Usage of a Score

Scores are powerful mechanisms in which a game can have to enhance user experience. Not only do they serve as a tool to increase engagement, but they serve as a way in which a developer can easily increase the difficulty throughout the game based off the current score of the user. Enemies can be made faster, styling of the canvas can change, audio plays, etc. All of this is made readily avaliable thanks to adding a score function to one’s game.

Implementation

Let’s take a look at the basic setup for setting up a score in JavaScript. We will be focusd purely on the javascript part, not the styling.

let score = 0;

if (certain event happens) {
  score++;
}

This, in its most innate form, is how scoring works for JavaScript games. First you have to define the variable with a starting value of 0, and once a certain events happens, such as killing or escaping the enemy, then add a specified amount to score, and in this case it would be 1 point.

Now that we have a basic understanding of how scoring works, let’s take a look at a more complex example, involing styling, OOP, and functions.

// Score.js

let score = 0;

//Adds to Score & Updates Display
function incrementScore() {
    score += 5;
    updateScoreDisplay(); // Call the function to update the score display
}

//Returns the Score
function getScore() {
    return score;
}

//Creates Score Display
function createScoreDisplay() {
    const scoreDisplay = document.createElement('div'); //Creates Element for Score
    scoreDisplay.id = 'scoreDisplay'; //Id
    scoreDisplay.textContent = `Score: ${score}`; //Text format
    document.body.appendChild(scoreDisplay); //Adds score to webpage
    applyScoreStyles(scoreDisplay); // Apply styles to the score display
}

//Updates Score Display
function updateScoreDisplay() {
    const scoreDisplay = document.getElementById('scoreDisplay'); //Gets the scoreDisplay with the ID
    if (scoreDisplay) {
        scoreDisplay.textContent = `Score: ${getScore()}`; //Updates the score
    }
}

//Styling for Score Display
function applyScoreStyles(element) {
    element.style.position = 'absolute';
    element.style.top = '10px';
    element.style.left = '10px';
    element.style.fontSize = '20px';
    element.style.color = 'white';
}

// Initialize the score display when the page loads
window.addEventListener('load', createScoreDisplay);

//Exports Functions
export { incrementScore, getScore, score };

Let’s break down the code.

  1. Score is defined as a variable
  2. 5 is added to the score when incrementScore() runs
  3. getScore() retrieves the score
  4. createScoreDisplay() creates the display in which will show the score
  5. updateScoreDisplay styles the display
  6. There is an event listener to create the score on initialization
  7. 3 parts of the code are exported to be used eslwhere in the code

That’s a lot of bullets but in summary, we create a display for the score to be easily viewed by the user, we have the ability to add to that score, and we export certain functions, which we be used elsewhere, both for special and events and incrementation of the score. Let’s see how this is true for the enemy.

else if (this.domainOffset > this.domain * 2) {
  this.domainOffset = 0; // reset the counter back to 0
  incrementScore(); //add 5 to the score
//If Enemy reaches right side, add 5 to the score
} else if (this.domainOffset === this.domain) {
  incrementScore();
}

if(score===10 && this.enemySpeed===4) {
  this.enemySpeed += 4;
  console.log(this.enemySpeed)
};

You can see how the enemy uses incrementScore() & score. Everytime the player goes to one side, 5 is added to score, and if the score is 10, the speed of the enemy is permanetly increased by 4. This is how a score can be added onto and how the score be used for special events. In the heart of both those things are if statements.

Conclusion

Add a score feature to one’s game allow for creative ingenutiy to shine, giving the developer a new isle of control in the efforts to creating ag reat game. While, we were pressed on time to continue to add on to our score feature, it can already been seen how easily it can be used to add many different features to the game.