The Chrome Dinosaur Game

Table of Contents

• Introduction
• How to play
• The Images
• The HTML
• The CSS
• Custom Properties
• Ground

Introduction

Do you remember when you were a kid and the internet went out? The only thing left to do was the Dinosaur jumping game on Chrome. Does that ring a bell? Does that feel nostalgic? It did for me. That's why I recreated it.

How to play

1. Make an empty folder.
2. Open it in VS Code (or any other text editor).
3. Clone the repository

git clone https://github.com/Lazzzer00/Dinosaur-Game

4. Navigate to the cloned repository.

cd Dinosaur-Game

6. Install the Live Server VS Code extension.
7. Open the index.html file in the browser by right clicking and then 'Open with Live Server' or Alt+L Alt+O.

The Images

For all 'animations' only 6 images are used.

1. The cactus image. (Pretty straightforward)
2. The ground image. This one makes the ilusion on a never ending map because it just repeats forver stacking on itself.
3. The stacionary dino image. The one you see before you start the game.
4. The dino lose image. The one with Xs on its eyes when you lose.
5. 2 dino run images which alternate to create the ilusion of running.

The HTML

We select elements with data atributes rather than ids to make it faster. Also every element has a class for styling.

• There is one main with the class of 'world' and a data-world.
• Inside it there is a score card which has a class of score and a data-score. It is set to 0 by default.
• There is also the start screen div with the class of start-screen and a data-start-screen. It contains the well known text: "Press any key to start".
• Then we have 2 ground images with the class of ground and a data-ground.
• Lastly we have the dino image with the class of dino and a data-dino.

The CSS

• Firstly with this line of code we make the sizing normal (to include the border) and we make nothing on the page selectable just a precaution.

* {
  box-sizing: border-box;
  user-select: none;
}

• The we make the body fullscreen and we make everything in it centered using flexbox.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

• We make the world not overflow because it is repeating forever and we make it position relative.

.world {
  overflow: hidden;
  position: relative;
}

• The score is position absolute and set with the vmin units to always be to the right.

.score {
  position: absolute;
  font-size: 3vmin;
  right: 1vmin;
  top: 1vmin;
}

• The start screen text is also centered using position absolute.

.start-screen {
  position: absolute;
  font-size: 5vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

P.S: Use this trick to center things on position absolute. First set the top and left to 50%. This won't be perfect because it doesn't account for the size of the element. Because of that use the translate(-50%, -50%) to center it.

• Create a utility class for hiding things.

.hide {
  display: none;
}

• Then set the ground class by making a custom propery called '---left' (that we'll edit soon!) to make it appear as if it was moving on the X axis.

.ground {
  --left: 0;
  position: absolute;
  width: 300%;
  bottom: 0;
  left: calc(var(--left) * 1%)
}

• We do the exact same thing except we make it for the dinosaur and we set it to '--bottom' because the dino jumps and changes the Y axis.

.dino {
  --bottom: 0;
  position: absolute;
  left: 1%;
  height: 30%;
  bottom: calc(var(--bottom) * 1%);
}

• The cactus has a similar position to the ground because it has to be on the ground.

.cactus {
  position: absolute;
  left: calc(var(--left) * 1%);
  height: 30%;
  bottom: 0;
}

Custom Properties

This is the easy but important part. We have 3 functions here:

1. Get Custom Property

Pass it an element and the propery you want to get the value of, it will return the value, or 0, if the value doesn't exist.

export function getCustomProperty(elem, prop) {
  return parseFloat(getComputedStyle(elem).getPropertyValue(prop)) || 0
}

2. Set Custom Propery

Pass it an element, the propery and the value of the propery you want to set. The value of the propery before setting doesn't have to be 0.

export function setCustomProperty(elem, prop, value) {
  elem.style.setProperty(prop, value)
}

3. Increment Custom Propery

Pass it an element, the propery and the increment. Simple calls the previously mentioned function.

export function incrementCustomProperty(elem, prop, inc) {
  setCustomProperty(elem, prop, getCustomProperty(elem, prop) + inc)
}

Ground js

This is the part where we create the illusion that the ground is moving, although it's just a repeating image.