11 Minute Roguelike

roguelike.html

<pre id="maze"></pre>
<script>
  'use strict'
  const maze = [
  '#####',
  '#@..#',
  '###.#',
  '#...#',
  '#.#####',
  '#.#...###',
  '#......T#',
  '#########'
  ]

  let map = maze.map(line => line.split(''))

  function render (map) {
    document.getElementById('maze').innerHTML =
    map.map(characters => characters.join('')).join('<br>')
  }

  render(map)

  const keyToDirection = {
    37: {x: -1, y: 0},
    38: {x: 0, y: -1},
    39: {x: 1, y: 0},
    40: {x: 0, y: 1}
  }

  document.onkeydown = function (e) {
    const direction = keyToDirection[e.keyCode]
    if (direction) {
      e.preventDefault()
      move(direction)
    }
  }

  let player = {x: 1, y: 1}
  const addPoints = (point1, point2) =>
  ({x: point1.x + point2.x, y: point1.y + point2.y})

  function move(direction) {
   const newPosition = addPoints(player, direction)
   const newCharacter = map[point.y][point.x]
   if (newCharacter === '.')
    teleportPlayer(newPosition)
   else if (newCharacter === 'T')
    alert("Congrats! You are a winner!")
 }

 function teleportPlayer ({x,y}) {
   map[player.y][player.x] = '.'
   map[y][x] = '@'
   player = {x, y}
   render(map)
 }
</script>