topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

#js-game.cfg / cfg

style/css


  <style>
    #playingArea{
      position: absolute;
      top: 100;
      left: 100;
      border: 1px solid black;
      width: 500;
      height: 500;
      background-color: rgb(192,192,192);
    }

paddle / style


    #paddle{
      position: absolute;
      top: 470;
      left: 228;
      width: 64;
      height: 16;
    }

ball / style


    #ball{
      position: absolute;
      top: 4;
      left: 200;
      width: 16;
      height: 16;
    }

score / style


    #score{
      position: absolute;
      top: 486;
      left: 0;
      width: 500;
      height: 14;
      font-size: 10pt;
      color: white;
      background-color: rgb(32,128,64);
    }
  </style>

script


  <script language="JavaScript">
  //get info, process data, update screen objects
    //instance vars
    var ball;
    var paddle;
    var score;

initial speeds


    var dx = 6;
    var dy = 6;
    var currentScore = 0;
    var timer;
    //set initial conditions for ball and paddle
    var paddleLeft = 228;
    var ballLeft = 200;
    var ballTop = 4;

init


    
    function init(){
      //instantiate HTML object instance vars
      ball = document.getElementById('ball');
      paddle = document.getElementById('paddle');
      score = document.getElementById('score');
      //register key listener with document object
      document.onkeydown = keyListener;
      //start the game loop
      start();
    }

listen / key code(s)


    
    function keyListener(e){
      if(!e){
        //for IE
        e = window.event;
      }
      if(e.keyCode==37 && paddleLeft > 0){
        //keyCode 37 is left arrow
        paddleLeft -= 4;
        paddle.style.left = paddleLeft + 'px';
      }
      if(e.keyCode==39 && paddleLeft < 436){
        //keyCode 39 is right arrow
        paddleLeft += 4;
        paddle.style.left = paddleLeft + 'px';
      }
      //FYI - keyCode 38 is up arrow, keyCode 40 is down arrow
    }

game loop


    
    function start(){
      //game loop
      detectCollisions();
      render();
      difficulty();

end conditions


      if(ballTop < 470){
        //still in play - keep the loop going
        timer = setTimeout('start()',50);
      }
      else{
        gameOver();
      }
    }

collision(s)


    
    function detectCollisions(){
      //just reflect the ball on a collision
      //a more robust engine could change trajectory of ball based
      //on where the ball hits the paddle
      if(collisionX())
        dx = dx * -1;
      if(collisionY())
        dy = dy * -1;
    }

collision X


    
    function collisionX(){
      //check left and right boundaries
      if(ballLeft < 4 || ballLeft > 480)
        return true;
      return false;
    }

collision Y


    
    function collisionY(){
      //check if at top of playing area
      if(ballTop < 4)
        return true;
      //check to see if ball collided with paddle
      if(ballTop > 450){
        if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64)
          return true;
      }
      return false;
    }

render and move


    
    function render(){
      moveBall();
      updateScore();
    }

move ball


    function moveBall(){
      ballLeft += dx;
      ballTop += dy;
      ball.style.left = ballLeft;
      ball.style.top = ballTop;
    }

score


    
    function updateScore(){
      currentScore += 5;
      score.innerHTML = 'Score: ' + currentScore;
    }
    
    function difficulty(){
      //as the game progresses, increase magnitude of the vertical speed
      if(currentScore % 1000 == 0){
        if(dy > 0)
          dy += 1;
        else
          dy -= 1;
      }
    }

game over


    
    function gameOver(){
      //end the game by clearing the timer, modifying the score label
      clearTimeout(timer);
      score.innerHTML += "  Game Over";
      score.style.backgroundColor = 'rgb(128,0,0)';
    }
  </script>

onload


  
   <script>function page() { init(); }</script>
   <script>function slide() { init(); }</script>

div(s) / the playground


  
   <div id="playingArea">
  <div id="paddle">
    <img src="local/assets/js/paddle.gif">
  </div>
  <div id="ball">
    <img src="local/assets/js/ball.gif">
  </div>
  <div id="score">
    Score: 0
  </div>
   </div>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.