Codex Zombie Game

by JamesonSaunders

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var player = document.createElement('div');
player.style.position = 'absolute';
player.style.left = '50%';
player.style.top = '50%';
player.style.width = '20px';
player.style.height = '20px';
player.style.backgroundColor = 'red';
document.body.appendChild(player);

var greenSquares = [];
var greenSquareTimer = null;
function createGreenSquare() {
  var greenSquare = document.createElement('div');
  greenSquare.style.position = 'absolute';
  greenSquare.style.left = Math.random() * (window.innerWidth - 20) + 'px';
  greenSquare.style.top = Math.random() * (window.innerHeight - 20) + 'px';
  greenSquare.style.width = '20px';
  greenSquare.style.height = '20px';
  greenSquare.style.backgroundColor = 'green';
  document.body.appendChild(greenSquare);
  greenSquares.push(greenSquare);
}
function moveGreenSquares() {
  for (var i = 0; i < greenSquares.length; i++) {
    var greenSquare = greenSquares[i];
    var dx = greenSquare.offsetLeft - player.offsetLeft;
    var dy = greenSquare.offsetTop - player.offsetTop;
    var distance = Math.sqrt(dx * dx + dy * dy);
    var speed = 10;
    var time = distance / speed;
    var x = player.offsetLeft + dx / time;
    var y = player.offsetTop + dy / time;
    greenSquare.style.transition = 'left ' + time + 's linear, top ' + time + 's linear';
    greenSquare.style.left = x + 'px';
    greenSquare.style.top = y + 'px';
  }
}
greenSquareTimer = setInterval(function() {
  createGreenSquare();
  moveGreenSquares();
}, 1000);

var keyDown = {};
document.addEventListener('keydown', function(e) {
  keyDown[e.keyCode] = true;
}, false);
document.addEventListener('keyup', function(e) {
  delete keyDown[e.keyCode];
}, false);
function movePlayer() {
  var dx = 0;
  var dy = 0;
  if (keyDown[87]) {
    dy = -1;
  }
  if (keyDown[65]) {
    dx = -1;
  }
  if (keyDown[83]) {
    dy = 1;
  }
  if (keyDown[68]) {
    dx = 1;
  }
  if (dx...