Charades

Live Demo

1. Overview

Charades has always been a party game hit. It is a word guessing game, with one player acting without any spoken language and the other players guessing. In my app, instead of acting, the acter draw for guesser to guess the answer.

2. How to Play the Game

• Acter can type in the answer or use auto generated question

• When the round start, Acter can start drawing and Guesser has only 60 seconds to guess for correct answer. Acter can change color and clear all while drawing.

• The score board will record the total rounds which Guesser answer correctly and the total rounds which Guesser has played.

3. Architecture and Technology

The project is implemented with:

• JavaScript for the overall gaming logic
• HTML5 Canvas for drawing
• Webpack as the JS module bundler

The following scripts are used to support the game implementation:

• drawing.js: The canvas for user to draw and change color
• round.js: The game logic for a round, including checking the answer that Guesser typed in and a countdown timer.
• game.js: The game logic for several rounds and record the score.

4. Code snippets

The game round will stop as soon as Guesser type in the correct answer or the time is up. I used await and async function to realize this logic. The async run function will wait until either the two conditions are fulfilled, otherwise it will do the same check 1 second later.

function waitForCondition(answer, handleEnd, handleWin) {
      return new Promise((resolve) => {
          let timeleft = 60;
          function checkAnswer() {
            document.getElementById("progressBar").value = timeleft;
            document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
            timeleft--;
            if (
              document.getElementById("answer").value.toLowerCase() ===
              answer.toLowerCase()
            ) {
              document.getElementById("round-result").innerText = "Well Done!";
              handleWin();
              window.setTimeout(()=> handleEnd(), 5000);
              resolve();
            } else if (timeleft < 0) {
              document.getElementById("countdown").innerHTML = "Time's Up!";
              document.getElementById("round-result").innerText = `The answer is ${answer}`;
              window.setTimeout(() => handleEnd(), 5000);
              resolve();
            } else {
              window.setTimeout(checkAnswer, 1000);
            }
          }
          checkAnswer();
      });
 }
const run = async () => {
  await waitForCondition(answer, this.handleEnd, this.handleWin);
};
run();