<div class="title">Current Score:</div>
<div class="score" id="js-score"></div>

<p>Let's add a "New Game" button that resets the score to 0 and updates it</p>

<button onClick="newGame()">New Game</button>

<p>Let's simulate an allowed way of updating the game score, using the button to represent the user action .</p>
<button onClick="incrementScore()">Increment score (game mechanic)</button>

<p>Let's add an action that simulates end of the game state where we submit the current score to leaderboards</p>

<button onClick="gameOver()">Game Over</button>

<div class="explanation">
  <p>Open the Console by clicking the button below below. Try using <code>updateScore(500)</code> function to manipulate the score and <code>gameOver()</code> function to submit the score.</p>
</div> 
body {
  font-family: sans-serif;
  font-size: 1.25rem;
  max-width: 768px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.333;
}

.score {
    font-size: 3rem;
  text-align: center;
}

.title {
  font-size: 1.5rem;
    text-align: center;
}
/* Init variables */

let score = 0;
let scoreContainer, buttonContainer;

/* Function that updates the score variable and the HTML element value */
const updateScore = newScore => {
  if(isNaN(newScore)) return;
  score = newScore;
  scoreContainer.innerHTML = score;
}

/* Function that increments the score (part of a game mechanic) */

const incrementScore = () => {
  updateScore(score + 1);
}

/* Function that submits the score */

const submitScore = () => alert("Submitting Score: "+score);

/* Function that ends the game */

const gameOver = () => submitScore();

/* Function that starts/resets the game */

const newGame = () => {
  updateScore(0);
}

/* Init function, selects elements and sets up the game */

const init = () => {
  scoreContainer = document.getElementById("js-score");
  newGame();
}

/* Calls the init function */

init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.