Bytefeeds

Sometime ago I started creating Pong in HTML5 to experiment with the canvas element. I never got around to finishing the game. However I'd love to see it work, so if you feel like putting the finishing touch to it, please do so and repost.

<!DOCTYPE HTML>
<html>
<body>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" src="/pong/javascript/jquery.hotkeys.js" type="text/javascript"></script>
    <script language="javascript" src="/pong/javascript/key_status.js" type="text/javascript"></script>
    <script language="javascript" src="/pong/javascript/util.js" type="text/javascript"></script>
    <script type="text/javascript">
    <p id='score'>0</p>

      // canvas
      var CANVAS_WIDTH = 480;
      var CANVAS_HEIGHT = 320;

      var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas>");
      var canvas = canvasElement.get(0).getContext("2d");
      canvas.fillStyle='#000000';
      canvasElement.appendTo('body');

     window.localStorage.setItem('score', 0);

     var ball = {
        color: "#00A",
        x: 250,
        y: 270,
        x_velocity: -3,
        y_velocity: -3,
        radius: 3,
        draw: function() {
          canvas.beginPath();
          canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
          canvas.closePath();
          canvas.fillStyle = this.color;
          canvas.fill();
        },
        update: function() {
          this.x = this.x + this.x_velocity;
          this.y = this.y - this.y_velocity;
        }
      };

      var court = {
        color: "#00A",
        x: 10,
        y: 10,
        width: 460,
        height: 300,
        draw: function() {
          canvas.strokeStyle = this.color;
          canvas.strokeRect(this.x, this.y, this.width, this.height);
        }
      }


      // game objects
      var racket = {
        color: "#00A",
        x: 20,
        y: court.y + (court.height/2) ,
        width: 5,
        height: 32,
        draw: function() {
          canvas.fillStyle = this.color;
          canvas.fillRect(this.x, this.y, this.width, this.height);
        }
      };


      // game loop
      var FPS = 30;
      var loop = setInterval(function() {
        update();
        draw();
        if (collides_ball_baseline()) {
         set_score();
         window.clearInterval(loop);
        }
      }, 1000/FPS);

      function set_score() {
        score = parseInt(window.localStorage.getItem('score'));
        score += 1;
        window.localStorage.setItem('score', score);
        document.getElementById('score').innerHTML = score;
      }

      function update() {
        if (keydown.up) {
          racket.y -= 2;
        }
        if (keydown.down) {
          racket.y += 2;
        }
        racket.y = racket.y.clamp(0, CANVAS_HEIGHT - racket.height); // clamp racket
        ball.update();

      }

      function draw() {
        canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        racket.draw();
        ball.draw();
        court.draw();

        if (collides_ball_racket()) {
          ball.x_velocity = ball.x_velocity*-1;
        }

        if (collides_ball_sideline()) {
          ball.y_velocity = ball.y_velocity*-1;
        }
      }


      // collision detection
      function collides_ball_racket() {
        return racket.x + racket.width > ball.x - ball.radius &&
          racket.y + racket.height > ball.y + ball.radius &&
          racket.y < ball.y - ball.radius;
      }

      function collides_ball_sideline() {
        return court.y > ball.y - ball.radius ||
          court.y + court.height < ball.y + ball.radius;
      }

      function collides_ball_baseline() {
        return court.x > ball.x - ball.radius ||
          court.x + court.width < ball.x + ball.radius;
      }



      /**
      function handleCollisions() {
        playerBullets.forEach(function(bullet) {
          enemies.forEach(function(enemy) {
            if (collides(bullet, enemy)) {
              enemy.explode();
              bullet.active = false;
            }
          });
        });

        enemies.forEach(function(enemy) {
          if (collides(enemy, player)) {
            enemy.explode();
            player.explode();
          }
        });
      }
      */
    </script>
</body>
</html>

Pages

Wednesday, September 28, 2011

An Arcade Classic In HTML5?

Sunday, May 15, 2011

Google IO 2011