jan-osch/dinosaur.html

## dinosaur.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            height: 20px;
            width: 20px;
        }

        .row {
            display: flex;
        }

        .player {
            background-color: red;
        }

        .free {
            background-color: #6a6a6a;
        }

        .occupied {
            background-color: black;
        }
    </style>
</head>
<body>


<div id="game"></div>
<div id="score"></div>

<script>
  const initialInterval = 100;

  class Game {
    constructor() {
      this.interval = null;
      this.callback = null;
    }

    restart() {
      this.score = 0;
      this.playerY = 0;
      this.playerYSpeed = 0;
      this.playerX = 0;
      this.world = new Array(40).fill([false, false, false, false, false, false]);
    }

    tick() {
      this.doGravity();
      this.score += 1;
      this.moveWorld();
      this.callback();
    }

    doGravity() {
      if (this.playerYSpeed > 0) {
        this.playerY++;
        this.playerYSpeed--;
      } else if (this.playerY > 0) {
        this.playerY--;
      }
    }

    moveWorld() {
      this.world.shift();
      this.world.push([Math.random() < 0.1, Math.random() < 0.05, false, false, false, false]);

      if (this.world[this.playerX][this.playerY]) {
        this.restart();
      }
    }

    jump() {
      if (this.playerY === 0) {
        this.playerYSpeed += 4;
      }
    }

    start(onUpdate) {
      this.restart();
      this.callback = onUpdate;
      this.interval = setInterval(() => this.tick(), initialInterval);
    }
  }

  const game = new Game();

  const draw = () => {
    const gameNode = document.getElementById('game');

    while (gameNode.firstChild) {
      gameNode.firstChild.remove();
    }

    let index = 5;
    while (index >= 0) {
      const current = document.createElement('div');
      current.classList.add('row');

      game.world.forEach((boxes, x) => {
        const box = document.createElement('div');
        box.classList.add('box');

        if (x === game.playerX && index === game.playerY) {
          box.classList.add('player');
        } else if (boxes[index]) {
          box.classList.add('occupied');
        } else {
          box.classList.add('free');
        }

        current.append(box);
      });

      gameNode.appendChild(current);
      index--;
    }

    const score = document.getElementById('score');
    if (score.firstChild) {
      score.firstChild.remove();
    }
    score.appendChild(document.createTextNode(game.score));
  };

  document.body.onkeyup = (event) => {
    if (event.key === ' ') {
      game.jump();
    }
  };

  game.start(draw);


</script>

</body>


</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
	.box {
	height: 20px;
	width: 20px;
	}

	.row {
	display: flex;
	}

	.player {
	background-color: red;
	}

	.free {
	background-color: #6a6a6a;
	}

	.occupied {
	background-color: black;
	}
	</style>
	</head>
	<body>


	<div id="game"></div>
	<div id="score"></div>

	<script>
	const initialInterval = 100;

	class Game {
	constructor() {
	this.interval = null;
	this.callback = null;
	}

	restart() {
	this.score = 0;
	this.playerY = 0;
	this.playerYSpeed = 0;
	this.playerX = 0;
	this.world = new Array(40).fill([false, false, false, false, false, false]);
	}

	tick() {
	this.doGravity();
	this.score += 1;
	this.moveWorld();
	this.callback();
	}

	doGravity() {
	if (this.playerYSpeed > 0) {
	this.playerY++;
	this.playerYSpeed--;
	} else if (this.playerY > 0) {
	this.playerY--;
	}
	}

	moveWorld() {
	this.world.shift();
	this.world.push([Math.random() < 0.1, Math.random() < 0.05, false, false, false, false]);

	if (this.world[this.playerX][this.playerY]) {
	this.restart();
	}
	}

	jump() {
	if (this.playerY === 0) {
	this.playerYSpeed += 4;
	}
	}

	start(onUpdate) {
	this.restart();
	this.callback = onUpdate;
	this.interval = setInterval(() => this.tick(), initialInterval);
	}
	}

	const game = new Game();

	const draw = () => {
	const gameNode = document.getElementById('game');

	while (gameNode.firstChild) {
	gameNode.firstChild.remove();
	}

	let index = 5;
	while (index >= 0) {
	const current = document.createElement('div');
	current.classList.add('row');

	game.world.forEach((boxes, x) => {
	const box = document.createElement('div');
	box.classList.add('box');

	if (x === game.playerX && index === game.playerY) {
	box.classList.add('player');
	} else if (boxes[index]) {
	box.classList.add('occupied');
	} else {
	box.classList.add('free');
	}

	current.append(box);
	});

	gameNode.appendChild(current);
	index--;
	}

	const score = document.getElementById('score');
	if (score.firstChild) {
	score.firstChild.remove();
	}
	score.appendChild(document.createTextNode(game.score));
	};

	document.body.onkeyup = (event) => {
	if (event.key === ' ') {
	game.jump();
	}
	};

	game.start(draw);


	</script>

	</body>


	</html>