body {
  background: black;
  width: 600px;
  margin: auto;
  
}

// 1. Tile map generator

function generateMap() {
  var map = [];
  for (var i = 0; i < 20; i++) {
    map[i] = [];
    for (var j = 0; j < 20; j++) {
      map[i][j] = 0;
    }
  }
  for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 20; j++) {
      if (Math.random() < 0.1) {
        map[i][j] = "T";
      }
    }
  }
  for (var i = 0; i < 5; i++) {
    var x = Math.floor(Math.random() * 20);
    var y = Math.floor(Math.random() * 20);
    if (map[x][y] === "T") {
      i--;
    } else {
      map[x][y] = "G";
    }
  }
  return map;
}

// 2. Add canvas

var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
canvas.style.border = "1px solid black";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 400);

// 3. Score

var score = 0;
var scoreDisplay = document.createElement("p");
scoreDisplay.style.position = "absolute";
scoreDisplay.style.left = "10px";
scoreDisplay.style.bottom = "10px";
scoreDisplay.style.color = "white";
scoreDisplay.style.fontFamily = "Arial";
scoreDisplay.style.fontSize = "18px";
scoreDisplay.innerHTML = "Coins: " + score;
document.body.appendChild(scoreDisplay);

// 4. Add map

var map = generateMap();

for (var i = 0; i < 20; i++) {
  for (var j = 0; j < 20; j++) {
    if (map[i][j] === "T") {
      ctx.fillStyle = "green";
      ctx.fillRect(i * 20, j * 20, 20, 20);
    } else if (map[i][j] === "G") {
      ctx.fillStyle = "yellow";
      ctx.fillRect(i * 20, j * 20, 20, 20);
    }
  }
}

// 5. Add the player

var player = {
  x: 10,
  y: 10,
  width: 20,
  height: 20,
  color: "white"
};

ctx.fillStyle = player.color;
ctx.fillRect(player.x * 20, player.y * 20, player.width, player.height);

// 6. Create a new map if the player moves to the other side.

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 37) {
    if (player.x > 0 && map[player.x - 1][player.y] !== "T") {
      player.x--;
    } else if (player.x === 0) {
      map = generateMap();
      player.x = 19;
    }
  } else if (event.keyCode === 38) {
    if (player.y > 0 && map[player.x][player.y - 1] !== "T") {
      player.y--;
    } else if (player.y === 0) {
      map = generateMap();
      player.y = 19;
    }
  } else if (event.keyCode === 39) {
    if (player.x < 19 && map[player.x + 1][player.y] !== "T") {
      player.x++;
    } else if (player.x === 19) {
      map = generateMap();
      player.x = 0;
    }
  } else if (event.keyCode === 40) {
    if (player.y < 19 && map[player.x][player.y + 1] !== "T") {
      player.y++;
    } else if (player.y === 19) {
      map = generateMap();
      player.y = 0;
    }
  }
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, 400, 400);
  for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 20; j++) {
      if (map[i][j] === "T") {
        ctx.fillStyle = "green";
        ctx.fillRect(i * 20, j * 20, 20, 20);
      } else if (map[i][j] === "G") {
        ctx.fillStyle = "yellow";
        ctx.fillRect(i * 20, j * 20, 20, 20);
      }
    }
  }
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x * 20, player.y * 20, player.width, player.height);
  if (map[player.x][player.y] === "G") {
    score++;
    scoreDisplay.innerHTML = "Coins: " + score;
    map[player.x][player.y] = 0;
  }
});

// 7. Add monster

var monster = {
  x: Math.floor(Math.random() * 20),
  y: Math.floor(Math.random() * 20),
  width: 20,
  height: 20,
  color: "red"
};

ctx.fillStyle = monster.color;
ctx.fillRect(monster.x * 20, monster.y * 20, monster.width, monster.height);

setInterval(function() {
  if (Math.random() < 0.5) {
    if (monster.x > 0 && map[monster.x - 1][monster.y] !== "T") {
      monster.x--;
    }
  } else {
    if (monster.x < 19 && map[monster.x + 1][monster.y] !== "T") {
      monster.x++;
    }
  }
  if (Math.random() < 0.5) {
    if (monster.y > 0 && map[monster.x][monster.y - 1] !== "T") {
      monster.y--;
    }
  } else {
    if (monster.y < 19 && map[monster.x][monster.y + 1] !== "T") {
      monster.y++;
    }
  }
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, 400, 400);
  for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 20; j++) {
      if (map[i][j] === "T") {
        ctx.fillStyle = "green";
        ctx.fillRect(i * 20, j * 20, 20, 20);
      } else if (map[i][j] === "G") {
        ctx.fillStyle = "yellow";
        ctx.fillRect(i * 20, j * 20, 20, 20);
      }
    }
  }
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x * 20, player.y * 20, player.width, player.height);
  ctx.fillStyle = monster.color;
  ctx.fillRect(monster.x * 20, monster.y * 20, monster.width, monster.height);
  if (map[player.x][player.y] === "G") {
    score++;
    scoreDisplay.innerHTML = "Coins: " + score;
    map[player.x][player.y] = 0;
  }
  if (player.x === monster.x && player.y === monster.y) {
    score--;
    scoreDisplay.innerHTML = "Coins: " + score;
  }
}, 100);