<!DOCTYPE html>

<html>

<head>

  <title>Simple Game</title>

  <style>

    #game {

      width: 500px;

      height: 500px;

      border: 1px solid black;

      position: relative;

    }

    #box {

      width: 50px;

      height: 50px;

      background-color: red;

      position: absolute;

    }

  </style>

</head>

<body>

  <div id="game">

    <div id="box"></div>

  </div>

  <script>

    var box = document.getElementById("box");

    var game = document.getElementById("game");

    var x = 0;

    var y = 0;

    var speed = 5;


    document.onkeydown = function(e) {

      switch (e.keyCode) {

        case 37: // left arrow

          x -= speed;

          break;

        case 38: // up arrow

          y -= speed;

          break;

        case 39: // right arrow

          x += speed;

          break;

        case 40: // down arrow

          y += speed;

          break;

      }

      box.style.left = x + "px";

      box.style.top = y + "px";

    }

  </script>

</body>

</html>

Powered By Easy Deploy