topical media & game development

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) _
mobile-game-ch17-lander-collision.htm / htm

  <!DOCTYPE HTML>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Lander</title>
      <script src='mobile-game-ch17-js-jquery.min.js'></script>
      <script src='mobile-game-ch17-js-underscore.js'></script>
      <script src='mobile-game-ch17-js-quintus.js'></script>
      <script src='mobile-game-ch17-js-quintus-input.js'></script>
      <script src='mobile-game-ch17-js-quintus-sprites.js'></script>
      <script src='mobile-game-ch17-js-quintus-scenes.js'></script>
  
      <meta name="viewport" content="width=480, user-scalable=no">
      <style>
        body { padding:0px; margin:0px; }
        #quintus { background-color:#CCC; }
      </style>
    </head>
    <body>
      <canvas id='quintus' width='480' height='320'></canvas>
      
      <script>
        var Q = Quintus()
                .include("Input,Sprites,Scenes")
                .setup()
                .controls();
  
        Q.Ship = Q.MovingSprite.extend({
          step: function(dt) {
            if(this.dead) return;
            var p = this.p;
  
            // Set our horizontal force
            p.fx = 0;
            if(Q.inputs['left']) { p.fx -= p.thrustX; }
            if(Q.inputs['right']) { p.fx += p.thrustX; }
  
            // Set our vertical force
            if(Q.inputs['fire']) {
              p.fy = -p.thrustY;
              p.asset = "lander-thrust.png";
              } else {
              p.fy = 0;
              p.asset = "lander.png";
            }
  
            // Calculate our y and x acceleration
            p.ay = p.gravity + p.fy / p.m;
            p.ax = p.fx / p.m;
  
            // Let our super-class update our x and y
            this._super(dt);
  
            var col;
            if(col = this.checkCollision()) {
              if(col == 1 && Math.abs(p.vy) < 30) {
                if(p.vy > 0) { 
                  p.vy = 0;
                }
                } else {
                this.dead=true;
              }
            }
  
            // Force our lander to stay in our box 
            // and zero out our velocity when we hit a wall
            if(p.y < 0) { p.y = 0;  p.vy = 0; }
            if(p.y > Q.height- p.h) { p.y = Q.height - p.h; p.vy = 0; }
            if(p.x < 0) { p.x = 0; p.vx = 0; }
            if(p.x > Q.width - p.w) { p.x = Q.width - p.w; p.vx = 0; }
          },
  
          checkCollision: function() {
            var bgData = Q.backgroundPixels;
  
            // Get a integer based position from our
            // x and y values
            var bgx = Math.floor(this.p.x);
            var bgy = Math.floor(this.p.y);
  
            // Calculate the initial offset into our background
            var bgOffset = bgx * 4 + bgy * bgData.width * 4 + 3;
  
            // Pull out our data easy access
            var pixels = this.imageData.data;
            var bgPixels = bgData.data;
  
            for(var sy=0;sy < this.imageData.height;sy++) {
              for(var sx=0;sx < this.imageData.width;sx++) {
                // Check for an existing pixel on our ship
                if(pixels[sx*4 + sy * this.imageData.width * 4 + 3]) {
  
                  // Then check for a matching existing pixel on the background
                  // starting from our bgOffest and then indexing in from there
                  if(bgPixels[bgOffset + sx*4 + sy * bgData.width * 4]) {
  
                    // Next check if we are at the bottom of the lander
                    // if so return 1, to indicate that we might be landing
                    // instead of crashing
                    if(sy > this.imageData.height - 2) {
                      return 1;
                      } else {
                      // Otherwise return 2 and...Boom!
                      return 2;
                    }
                  }
                }
              }
            }
            return 0;
          }
  
        });
  
        Q.load(['lander.png','background.png', 
                'lander-thrust.png','map.png'], function() {
  
          Q.scene("level",new Q.Scene(function(stage) {
            stage.insert(new Q.Sprite({ asset: "background.png" }));
            stage.insert(new Q.Sprite({ asset: "map.png" }));
  
            var ship = stage.insert(new Q.Ship({
              asset: 'lander.png',
              x:       10, // X Position
              y:       170, // Y Position
              gravity: 20,  // Gravity
              m:       1,   // Ship’s Mass
              thrustX: 40,  // Horizontal Thrust
              thrustY: 80,  // Vertical Thrust    
            }));
  
            Q.backgroundPixels = Q.imageData(Q.asset('map.png'));
            ship.imageData = Q.imageData(Q.asset('lander.png'));
  
          }));
  
          Q.stageScene("level");
        });
   
      </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) _
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.