Move

Bored with no work

by Luis Martin

HTML

<img hidden id="k" width="10" height="10" src="https://www.fcommerce.gr/trikala/tourism/images/key.png
">Score:
<label id="score"></label>
<br>
<canvas style="border:1px solid #d3d3d3;" id="g" width="200" height="200"></canvas>
<br>
<p id="text"></p>

<img hidden id="s" width="10" height="10" src="https://i.stack.imgur.com/ymvDn.png" alt="The Scream">
<img hidden id="f1" width="10" height="10" src="https://i.stack.imgur.com/LwVIw.png
">
<img hidden id="f2" width="10" height="10" src="https://i.stack.imgur.com/3um29.png
">

CSS

img {
  margin-right: 5px;
}

JavaScript

isPaused = false;
isFinished = false;
points = 0;
lvy = 0;
v = 2;
hasKey = false;
kx = ky = 0;
var room1 = {
 floor : document.getElementById("f1"),
 doorPosx1 : "90",
 doorPosx2 : "110",
 doorOpened : false

};

var room2 = {
 floor : document.getElementById("f2"),
 doorPosx1 : "10",
 doorPosx2 : "30"

};

	var currentRoom = room1;
var texto = document.getElementById("text");
pointPerSecond = 1;
scoreboard = document.getElementById("score");
key = document.getElementById("k");
var canvas = document.getElementById("g");
var ctx = canvas.getContext("2d");

start();

function start() {

myGamePiece = new component(30, 30, "red", 10, 120);

  showText("Welcome! Try to scape if you can", 0, 70);
  points = 0;
  v = 2;
  appleEated = 0;
  sx = sy = (canvas.width / 2) - 5;
  svx = 0;
  svy = 0;
  ctx.fillRect(sx, sy, 10, 10);
  putKey();
}
setInterval(update, 1000 / 30);

function update() {
  if (isFinished) {
    ctx.font = "30px Arial";
    ctx.fillText("You lost", 50, 80);
    ctx.font = "15px Arial";
    ctx.fillText("Press space bar to start", 25, 100);
  } else {
    if (isPaused) {
      ctx.font = "30px Arial";
      ctx.fillText("Paused", 50, 100);
    } else {
      //points += pointPerSecond / 30;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      sx += svx;
      sy += svy;
      ctx.drawImage(currentRoom.floor, 0, 0);
      ctx.drawImage(document.getElementById("s"), sx, sy);
      scoreboard.innerHTML = Math.round(points * 10);
      checkWalls();
      checkKey();
      if (!hasKey)
        drawKey();
    }
  }
}
document.onkeydown = checkKeys;
document.onkeyup = dontMove;

function checkWalls() {
  if (sx + 10 >= canvas.width || sx <= 0 || sy + 10 >= canvas.height || sy <= 15) {
    console.log("hit");
    if (sx <= 0)
      sx = 0;
    if (sx + 10 >= canvas.width)
      sx = canvas.width - 10;
    if (sy <= 15) {
      sy = 15;
      if (sx > currentRoom.doorPosx1 && sx < currentRoom.doorPosx2) {
        if (!hasKey) {
          sy = 25;
  ...