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

mobile-game-ch26-easel.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
    <meta name='viewport' content='width=device-width, user-scalable=no'>
  </head>
  <body>
    <canvas id='canvas' width='320' height='480'></canvas>
    <script>
  
      var canvas, stage, graphic, ball;
  
      canvas = document.getElementById("canvas");
      stage = new Stage(canvas);
  
      Touch.enable(stage);
      
  
      graphic = new Graphics();
      graphic.setStrokeStyle(1);
      graphic.beginStroke(Graphics.getRGB(0,0,0));
      graphic.beginFill(Graphics.getRGB(255,0,0));
      graphic.drawCircle(0,0,25);
      graphic.lineTo(0,0,0,25);
  
      ball = new Shape(graphic);
      ball.x = 50;
      ball.y = 50;
      ball.vx = 100;
      ball.vy = 100;
      ball.pulse = 0;
  
      ball.onPress = function() {
        var direction = Math.random()*Math.PI*2;
        ball.vx = Math.cos(direction) * 200;
        ball.vy = Math.sin(direction) * 200;
      }
  
      stage.addChild(ball);
  
      window.tick = function(dt) {
        var seconds  = dt / 1000;
  
        ball.vy += 50 * seconds; // Add some gravity
  
        ball.x += ball.vx * seconds;
        ball.y += ball.vy * seconds;
  
        ball.pulse += seconds;
        ball.scaleX = 1 + Math.sin(ball.pulse)/2;
        ball.scaleY = 1 + Math.sin(ball.pulse)/2;
  
        ball.rotation += ball.vx * seconds;
  
        if(ball.x + 25 > canvas.width) { 
          ball.vx = -Math.abs(ball.vx);
        } else if(ball.x - 25 < 0) {
          ball.vx = Math.abs(ball.vx);
        }
  
        if(ball.y + 25 > canvas.height) { 
          ball.vy = -Math.abs(ball.vy);
        } else if(ball.y - 25 < 0) {
          ball.vy = Math.abs(ball.vy);
        }
  
        stage.update();
      }
  
      Ticker.setFPS(60)
      Ticker.addListener(window);
  
    </script>
  </body>
  </html>
[] 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.