JS Canvas Game

Pure JavaScript canvas game.

by ffxff

HTML

<div id="grand-container">

      <!-- START GAME CONTAINER -->

      <div id="start-game-container">
        <div id="logo-wrapper">
          <p id="logo">Where's Meow?</p>
        </div>
        <div id="start-game-wrapper">
          <button class="retro-game-btn" onclick="startGame()">Start Game</button>
        </div>
      </div>

      <!-- CANVAS CONTAINER -->

      <div id="canvas-container">

        <div class="grid" id="canvas-wrapper">
          <canvas id="canvas" width="1000" height="500"></canvas>
        </div>

        <!-- CANVAS BOXES -->

        <div id="canvas-sub-container-one">
          <div class="canvas-boxes" id="trophies-box">
            T<br><br>R<br><br>O<br><br>P<br><br>H<br><br>I<br><br>E<br><br>S
          </div>
        </div>

        <div id="canvas-sub-container-two">
          <div class="canvas-boxes" id="question-box">

            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">+
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">+
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">=
            <br><br>
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">+
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">+
            <img src="https://i.imgur.com/oPoKSfV.png" class="question-cat">=
            <br><br>
            <img src="https://i.imgur.com/oPoKSfV.png" class="question-cat">
            <img src="https://i.imgur.com/oPoKSfV.png" class="question-cat">+
            <img src="https://i.imgur.com/jEQYpZ6.png" class="question-cat">=

            <div id="answers">
              <button class="answer-button" id="first-question-button-one">
                <img src="https://i.imgur.com/jEQYpZ6.png" class="answer-cat">
                <img src="https://i.imgur.com/jEQYpZ6.png" class="answer-cat">
              </button>
         ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --background-color-one: rgb(44, 0, 95);
  --background-color: rgb(0, 14, 61);
  --blue-border-color: rgb(0, 255, 255);
  --green-border-color: #09FF00;
  --retro-game-font: 'Press Start 2P', cursive;
}

html,
body {
  color: #FFF;
  font-size: 1em;
  letter-spacing: -1px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--background-color-one);
}

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

/* GRAND CONTAINER */

#grand-container {
  position: relative;
  background-color: var(--background-color-one);
  margin: 0;
  height: 100vh;
  width: 100vw;
}

/* GAME START CONTAINER */

#start-game-container {
  height: 200px;
  width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-bottom: 2px solid #FFF;
  border-left: 2px solid #FFF;
  border-radius: 40px;
  z-index: 10;
}

#logo-wrapper {
  padding: 10px;
  margin: 30px;
}

#logo {
  display: grid;
  justify-content: center;
  font-family: var(--retro-game-font);
  font-size: 2em;
  color: #FFF;
}

#start-game-wrapper {
  display: grid;
  justify-content: center;
  padding: 10px;
  margin: -30px 10px 10px 10px;
}

.retro-game-btn {
  background: #000;
  color: #FFF;
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 1.5em;
  padding: 10px 20px 10px 20px;
  font-family: var(--retro-game-font);
  text-decoration: none;
  box-shadow: inset -4px -4px 0px 0px #000;
}

.retro-game-btn:hover,
.retro-game-btn:focus {
  background: #FFF;
  box-shadow: inset -6px -6px 0px 0px #000;
  color: #000;
}

.retro-game-btn:active {
  box-shadow: inset 4px 4px 0px 0px #000;
}

.retro-game-btn::before,
.retro-game-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height:...

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const cat = new Cat(163, 344);

const firstQuestionB2 = document.getElementById('first-question-button-two');
const continueButton = document.getElementById('continue-button');

document.getElementById("start-game-container").style.display = "none";
document.getElementById("canvas-container").style.display = "block";
document.getElementById("canvas").style.display = "block";
document.getElementById("trophies-box").style.display = "none";
document.getElementById("question-box").style.display = "none";
document.getElementById("dialog-box").style.display = "none";
document.getElementById("game-over-box").style.display = "none";
document.getElementById("right-answer-box").style.display = "none";

function startGame() {
  document.getElementById("start-game-container").style.display = "none";
  document.getElementById("canvas-container").style.display = "block";
}

firstQuestionB2.onclick = function() {
  document.getElementById('question-box').style.display = 'none'
  document.getElementById('right-answer-box').style.display = 'block'
}

function Cat(x, y) {
  this.x = x;
  this.y = y;

  let spriteCat = new Image();
  spriteCat.src = 'https://i.imgur.com/UEdg4Iu.png';

  this.displayCat = function() {
    ctx.drawImage(spriteCat, 0, 0, 310, 320, this.x, this.y, 50, 50);
  }

  // // // // // // // // // // // // // // // //    

  // MOVE CAT TO CHECKPOINT #1
  this.moveCatToCheckpoint1 = function() {

    // #0 TO #1: (163, 344) > (102, 344) [WHILE TEST]
    while (this.x > 102 && this.y === 344) {
      this.x -= 1;
      break
    }
    // #1 TO #2: (102 344) > (102, 148)
    while (this.x === 102 && this.y > 148) {
      this.y -= 1;
      break
    }
    // #2 TO #3: (102 148) > (167, 148)
    while (this.x < 167 && this.y === 148) {
      this.x += 1;
      break
    }
    // #3 TO #4: (167, 148) > (167, 115)
    while (this.x === 167 && this.y > 115) {
      this.y -= 1;
  ...