topical media & game development

talk show tell print

mobile-game-ch05-binding.htm / htm



   <!DOCTYPE HTML>
  <html lang="en">
  <head>
          <meta charset="UTF-8">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
          <title>Event Binding Test</title>
  </head>
  <body>
  <div id='container'></div>
  <script>
  var width=window.width(), height=window.height(),
      countdown = 20, countup = 0, timer;
  
  var nextElement = function() {
    if(countdown == 0) { 
      gameOver();
      return;
    }
  
    var x=Math.random()*(width - 50),
        y=Math.random()*(height - 50);
  
    $("<div>").css({
        position:'absolute',
        left: x,   top: y,
        width: 50, height: 50,
        backgroundColor: 'red'
      }).appendTo("#container");
  
    countdown--;
  }
  
  var gameOver = function() {
    clearInterval(timer);
    if(countup > 15) {
      alert("You won!");
    } else {
      alert("You lost!");
    }
  }
  
  timer = setInterval(nextElement,500);
  
  $("#container").on('mousedown','div',function(e) {
      countup++;
      this.fadeOut();
   });
  
  </script>
  </body>
  </html>
  


(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.