API tools faq
paste
Advertisement
Stecklain

tanks.html

Stecklain
Jan 18th, 2017
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>Tanks - Part 2</title>
  5.     <meta charset="utf-8">
  6.     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10.     <div id="game"></div>
  11.  
  12.     <script type="text/javascript">
  13.  
  14.     var game = new Phaser.Game(1366, 663, Phaser.CANVAS, 'game');
  15.  
  16.     var PhaserGame = function (game) {
  17.  
  18.         this.tank = null;
  19.         //this.tank2= null;
  20.         this.turret = null;
  21.         //this.turret2 = null;
  22.  
  23.         this.flame = null;
  24.         this.bullet = null;
  25.         //this.bullet2 = null;
  26.  
  27.         this.background = null;
  28.         this.targets = null;
  29.         this.land = null;
  30.         this.emitter = null;
  31.  
  32.         this.power = 300;
  33.         this.powerText = null;
  34.  
  35.         this.cursors = null;
  36.         this.fireButton = null;
  37.  
  38.     };
  39.  
  40.     PhaserGame.prototype = {
  41.  
  42.         init: function () {
  43.  
  44.             this.game.renderer.renderSession.roundPixels = true;
  45.  
  46.             this.game.world.setBounds(0, 0, 992, 480);
  47.  
  48.             this.physics.startSystem(Phaser.Physics.ARCADE);
  49.             this.physics.arcade.gravity.y = 200;
  50.  
  51.         },
  52.  
  53.         preload: function () {
  54.  
  55.             //  We need this because the assets are on Amazon S3
  56.             //  Remove the next 2 lines if running locally
  57.             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue002/';
  58.             this.load.crossOrigin = 'anonymous';
  59.  
  60.             this.load.image('tank', 'assets/tank2.png');
  61.             //this.load.image('tank2', 'assets/tank2.png');
  62.             this.load.image('turret', 'assets/turret2.png');
  63.             //this.load.image('turret2', 'assets/turret2.png');
  64.             this.load.image('bullet', 'assets/bullet.png');
  65.             //this.load.image('bullet2', 'assets/bullet2.png');
  66.             this.load.image('background', 'assets/skyy.png');
  67.             this.load.image('flame', 'assets/flame.png');
  68.             this.load.image('target', 'assets/target.png');
  69.             this.load.image('land', 'assets/landd.png');
  70.  
  71.             //  Note: Graphics from Amiga Tanx Copyright 1991 Gary Roberts
  72.  
  73.         },
  74.  
  75.         create: function () {
  76.  
  77.             //  Simple but pretty background
  78.             this.background = this.add.sprite(0, 0, 'background');
  79.  
  80.             //  The targets to hit (hidden behind the land slightly)
  81.             this.targets = this.add.group(this.game.world, 'targets', false, true, Phaser.Physics.ARCADE);
  82.  
  83.             this.targets.create(284, 378, 'target');
  84.             this.targets.create(456, 153, 'target');
  85.             this.targets.create(545, 305, 'target');
  86.             this.targets.create(726, 391, 'target');
  87.             this.targets.create(972, 74, 'target');
  88.  
  89.             //  Stop gravity from pulling them away
  90.             this.targets.setAll('body.allowGravity', false);
  91.  
  92.             //  The land is a BitmapData the size of the game world
  93.             //  We draw the 'lang.png' to it then add it to the world
  94.             this.land = this.add.bitmapData(1366, 663);
  95.             this.land.draw('land');
  96.             this.land.update();
  97.             this.land.addToWorld();
  98.  
  99.             //  A small burst of particles when a target is hit
  100.             this.emitter = this.add.emitter(0, 0, 30);
  101.             this.emitter.makeParticles('flame');
  102.             this.emitter.setXSpeed(-120, 120);
  103.             this.emitter.setYSpeed(-100, -200);
  104.             this.emitter.setRotation();
  105.  
  106.             //  A single bullet that the tank will fire
  107.             this.bullet = this.add.sprite(0, 0, 'bullet');
  108.             this.bullet.exists = false;
  109.             this.physics.arcade.enable(this.bullet);
  110.  
  111.             //this.bullet2 = this.add.sprite(0, 0, 'bullet2');
  112.             //this.bullet2.exists = false;
  113.             //this.physics.arcade.enable(this.bullet2);
  114.  
  115.             //  The body of the tank
  116.             this.tank = this.add.sprite(10, 350, 'tank');
  117.             //this.tank2 = this.add.sprite(1280, 566, 'tank2');
  118.  
  119.             //  The turret which we rotate (offset 30x14 from the tank)
  120.             this.turret = this.add.sprite(this.tank.x + 240, this.tank.y + 14, 'turret');
  121.             //this.turret2 = this.add.sprite(this.tank2.x - 5, this.tank2.y + 14, 'turret2');
  122.  
  123.             //  When we shoot this little flame sprite will appear briefly at the end of the turret
  124.             this.flame = this.add.sprite(0, 0, 'flame');
  125.             this.flame.anchor.set(0.5);
  126.             this.flame.visible = false;
  127.  
  128.             //  Used to display the power of the shot
  129.             this.power = 300;
  130.             this.powerText = this.add.text(8, 8, 'Power: 300', { font: "18px Arial", fill: "#ffffff" });
  131.             this.powerText.setShadow(1, 1, 'rgba(0, 0, 0, 0.8)', 1);
  132.             this.powerText.fixedToCamera = true;
  133.  
  134.             //  Some basic controls
  135.             this.cursors = this.input.keyboard.createCursorKeys();
  136.    
  137.             this.fireButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
  138.             this.fireButton.onDown.add(this.fire, this);
  139.  
  140.         },
  141.  
  142.         /**
  143.          * Called by update if the bullet is in flight.
  144.          *
  145.          * @method bulletVsLand
  146.          */
  147.         bulletVsLand: function () {
  148.  
  149.             //  Simple bounds check
  150.             if (this.bullet.x < 0 || this.bullet.x > this.game.world.width || this.bullet.y > this.game.height)
  151.             {
  152.                 this.removeBullet();
  153.                 return;
  154.             }
  155.  
  156.             var x = Math.floor(this.bullet.x);
  157.             var y = Math.floor(this.bullet.y);
  158.             var rgba = this.land.getPixel(x, y);
  159.  
  160.             if (rgba.a > 0)
  161.             {
  162.                 this.land.blendDestinationOut();
  163.                 this.land.circle(x, y, 16, 'rgba(0, 0, 0, 255');
  164.                 this.land.blendReset();
  165.                 this.land.update();
  166.  
  167.                 //  If you like you could combine the above 4 lines:
  168.                 // this.land.blendDestinationOut().circle(x, y, 16, 'rgba(0, 0, 0, 255').blendReset().update();
  169.  
  170.                 this.removeBullet();
  171.             }
  172.  
  173.             /*if (this.bullet2.x < 0 || this.bullet2.x > this.game.world.width || this.bullet2.y > this.game.height)
  174.             {
  175.                 this.removeBullet();
  176.                 return;
  177.             }
  178.  
  179.             var x = Math.floor(this.bullet.x);
  180.             var y = Math.floor(this.bullet.y);
  181.             var rgba = this.land.getPixel(x, y);
  182.  
  183.             if (rgba.a > 0)
  184.             {
  185.                 this.land.blendDestinationOut();
  186.                 this.land.circle(x, y, 16, 'rgba(0, 0, 0, 255');
  187.                 this.land.blendReset();
  188.                 this.land.update();
  189.  
  190.                 //  If you like you could combine the above 4 lines:
  191.                 // this.land.blendDestinationOut().circle(x, y, 16, 'rgba(0, 0, 0, 255').blendReset().update();
  192.  
  193.                 this.removeBullet();
  194.             }*/
  195.  
  196.         },
  197.  
  198.         /**
  199.          * Called by fireButton.onDown
  200.          *
  201.          * @method fire
  202.          */
  203.         fire: function () {
  204.  
  205.             if (this.bullet.exists)
  206.             {
  207.                 return;
  208.             }
  209.  
  210.             //  Re-position the bullet where the turret is
  211.             this.bullet.reset(this.turret.x, this.turret.y);
  212.  
  213.             //  Now work out where the END of the turret is
  214.             var p = new Phaser.Point(this.turret.x, this.turret.y);
  215.             p.rotate(p.x, p.y, this.turret.rotation, false, 34);
  216.  
  217.             //  And position the flame sprite there
  218.             this.flame.x = p.x;
  219.             this.flame.y = p.y;
  220.             this.flame.alpha = 1;
  221.             this.flame.visible = true;
  222.  
  223.             //  Boom
  224.             this.add.tween(this.flame).to( { alpha: 0 }, 100, "Linear", true);
  225.  
  226.             //  So we can see what's going on when the bullet leaves the screen
  227.             this.camera.follow(this.bullet);
  228.  
  229.             //  Our launch trajectory is based on the angle of the turret and the power
  230.             this.physics.arcade.velocityFromRotation(this.turret.rotation, this.power, this.bullet.body.velocity);
  231.  
  232.             /*if (this.bullet2.exists)
  233.             {
  234.                 return;
  235.             }
  236.  
  237.             //  Re-position the bullet where the turret is
  238.             this.bullet2.reset(this.turret2.x, this.turret2.y);
  239.  
  240.             //  Now work out where the END of the turret is
  241.             var p = new Phaser.Point(this.turret2.x, this.turret2.y);
  242.             p.rotate(p.x, p.y, this.turret2.rotation, false, 34);
  243.  
  244.             //  And position the flame sprite there
  245.             this.flame.x = p.x;
  246.             this.flame.y = p.y;
  247.             this.flame.alpha = 1;
  248.             this.flame.visible = true;
  249.  
  250.             //  Boom
  251.             this.add.tween(this.flame).to( { alpha: 0 }, 100, "Linear", true);
  252.  
  253.             //  So we can see what's going on when the bullet leaves the screen
  254.             this.camera.follow(this.bullet2);
  255.  
  256.             //  Our launch trajectory is based on the angle of the turret and the power
  257.             this.physics.arcade.velocityFromRotation(this.turret2.rotation, this.power, this.bullet2.body.velocity);*/
  258.  
  259.         },
  260.  
  261.         /**
  262.          * Called by physics.arcade.overlap if the bullet and a target overlap
  263.          *
  264.          * @method hitTarget
  265.          * @param {Phaser.Sprite} bullet - A reference to the bullet (same as this.bullet)
  266.          * @param {Phaser.Sprite} target - The target the bullet hit
  267.          */
  268.         hitTarget: function (bullet, target) {
  269.  
  270.             this.emitter.at(target);
  271.             this.emitter.explode(2000, 10);
  272.  
  273.             target.kill();
  274.  
  275.             this.removeBullet(true);
  276.  
  277.         },
  278.  
  279.         /**
  280.          * Removes the bullet, stops the camera following and tweens the camera back to the tank.
  281.          * Have put this into its own method as it's called from several places.
  282.          *
  283.          * @method removeBullet
  284.          */
  285.         removeBullet: function (hasExploded) {
  286.  
  287.             if (typeof hasExploded === 'undefined') { hasExploded = false; }
  288.  
  289.             this.bullet.kill();
  290.             this.camera.follow();
  291.  
  292.             var delay = 1000;
  293.  
  294.             if (hasExploded)
  295.             {
  296.                 delay = 2000;
  297.             }
  298.  
  299.             this.add.tween(this.camera).to( { x: 0 }, 1000, "Quint", true, delay);
  300.  
  301.         },
  302.  
  303.         /**
  304.          * Core update loop. Handles collision checks and player input.
  305.          *
  306.          * @method update
  307.          */
  308.         update: function () {
  309.  
  310.             //  If the bullet is in flight we don't let them control anything
  311.             if (this.bullet.exists)
  312.             {
  313.                 //  Bullet vs. the Targets
  314.                 this.physics.arcade.overlap(this.bullet, this.targets, this.hitTarget, null, this);
  315.  
  316.                 //  Bullet vs. the land
  317.                 this.bulletVsLand();
  318.             }
  319.             else
  320.             {
  321.                 //  Allow them to set the power between 100 and 600
  322.                 if (this.cursors.left.isDown && this.power > 100)
  323.                {
  324.                    this.power -= 2;
  325.                 }
  326.                 else if (this.cursors.right.isDown && this.power < 600)
  327.                {
  328.                    this.power += 2;
  329.                 }
  330.  
  331.                 //  Allow them to set the angle, between -90 (straight up) and 0 (facing to the right)
  332.                 if (this.cursors.up.isDown && this.turret.angle > -90)
  333.                {
  334.                    this.turret.angle--;
  335.                 }
  336.                 else if (this.cursors.down.isDown && this.turret.angle < 0)
  337.                {
  338.                    this.turret.angle++;
  339.                 }
  340.  
  341.                 //  Update the text
  342.                 this.powerText.text = 'Power: ' + this.power;
  343.             }
  344.  
  345.         }
  346.  
  347.     };
  348.  
  349.     game.state.add('Game', PhaserGame, true);
  350.  
  351.     </script>
  352.  
  353. </body>
  354. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!