Untitled

<html>
  <head>
    <title>OOP test 2</title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
      const FPS = 30;
      var x = 0;
      var y = 0;
      var xDirection = 1;
      var yDirection = 1;
      var xMoving = 0;
      var yMoving = 0;
      var image = new Image();
      var missiles = new Array();
      image.src = "http://dl.dropbox.com/u/3451091/pokeball.gif";
      var canvas = null;
      var context2D = null;
      window.onload = init;

      function init() {
        canvas = document.getElementById('canvas');
        context2D = canvas.getContext('2d');
        setInterval(draw, 1000/FPS);
      }

      function draw() {
        context2D.clearRect(0, 0, canvas.width, canvas.height);
        context2D.drawImage(image, x, y);
        moveMissiles();
        drawMissiles();
        x += xMoving * xDirection;
        y += yMoving * yDirection;

        if (x >= 434) {
          x = 434; xDirection = -1;
        } else if (x <=0) {
          x = 0; xDirection = 1;
        } else if (y >= 434) {
          y = 434; yDirection = -1;
        } else if (y <= 0) {
          y = 0; yDirection = 1;
        }
      }

      function drawMissiles() {
        for (var i = 0; i < missiles.length; i++) {
          missile = missiles[i];
          context2D.drawImage(missile.mimage, missile.pos[0], missile.pos[1]);
        }
      }

      function moveMissiles() {
        for (var i = 0; i < missiles.length; i++) {
          missile = missiles[i];
          missile.pos[0] += 2 * missile.direction[0];
          missile.pos[1] += 2 * missile.direction[1];
        }
      }

      function handleKeyDown(event) {
        key = event.keyCode;
        if (key >= 37 && key <= 40) {
          setDirection(event);
          startMoving(event);
        } else if (key == 32) {
          fireMissile(event);
        }
      }

      function handleKeyRelease(event) {
        if (key >= 37 && key <= 40) {
          stopMoving(event);
        }
      }

      function setDirection(event) {
        if (event.keyCode == 39) {
          xDirection = 1;
        } else if (event.keyCode == 37) {
          xDirection = -1;
        } else if (event.keyCode == 38) {
          yDirection = -1;
        } else if (event.keyCode == 40) {
          yDirection = 1;
        }
      }

      function startMoving(event) {
        var key = event.keyCode;
        if (key == 39 || key == 37) {
          xMoving = 1;
        } else if (key == 38 || key == 40) {
          yMoving = 1;
        }
      }

      function stopMoving(event) {
        var key = event.keyCode;
        if (key == 39 || key == 37) {
          xMoving = 0;
        } else if (key == 38 || key == 40) {
          yMoving = 0;
        }
      }

      function getPlayerDirection() {
        return [xDirection, yDirection];
      }

      function Missile() {
        this.direction = getPlayerDirection();
        this.mimage = new Image();
        this.mimage.src = "http://dl.dropbox.com/u/3451091/dot.gif";
        this.pos = [x, y];

        this.getDirection = function() {
          return this.direction;
        }
      }

      function fireMissile(event) {
        missiles.push(new Missile());
        updateDisplay(missiles[0].mimage.src);
      }

      function updateDisplay(value) {
        document.getElementById('display').innerHTML = value;
      }
    </script>
  </head>

  <body onkeydown="handleKeyDown(event)" onkeyup="handleKeyRelease(event);">

    <canvas id="canvas" width="450" height="450" style="border: 1px solid black;">
      <p>Your browser does not support the canvas element.</p>
    </canvas>

    <div id="display">
      0
    </div>
  </body>
</html>