Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
    <head>
    <title>Single Bullet</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
</head>
<body>

    <div id="game"></div>

    <script type="text/javascript">

var game = new Phaser.Game(640, 416, Phaser.AUTO, 'game'); //,{ preload: preload, create: create, update: update });

    
    //  Our core Bullet class
    //  This is a simple Sprite object that we set a few properties on
    //  It is fired by all of the Weapon classes
var Bullet = function (game, key) {
    Phaser.Sprite.call(this, game, 0, 0, key);
    this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST;
    this.anchor.set(-11.5,-1.2);
    this.checkWorldBounds = true;
    this.outOfBoundsKill = true;
    this.exists = false;
    this.tracking = false;
    this.scaleSpeed = 0;
};

Bullet.prototype = Object.create(Phaser.Sprite.prototype);
Bullet.prototype.constructor = Bullet;
Bullet.prototype.fire = function (x, y, angle, speed, gx, gy) {
    gx = gx || 0;
    gy = gy || 0;
    this.reset(x, y);
    this.scale.set(1);
    this.game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity);
    this.angle = angle;
    this.body.gravity.set(gx, gy);
};
Bullet.prototype.update = function () {
    if (this.tracking)
    {
        this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x);
    }
    if (this.scaleSpeed > 0)
    {
        this.scale.x += this.scaleSpeed;
        this.scale.y += this.scaleSpeed;
    }
};

var SingleBullet = function (game) {
    Phaser.Group.call(this, game, game.world, 'Single Bullet', false, true, Phaser.Physics.ARCADE);
    this.nextFire = 0;
    this.bulletSpeed = 1200;
    this.fireRate = 1000;
    for (var i = 0; i < 64; i++)
    {
        this.add(new Bullet(game, 'bullet5'), true);
    }
    return this;
};

SingleBullet.prototype = Object.create(Phaser.Group.prototype);
SingleBullet.prototype.constructor = SingleBullet;
SingleBullet.prototype.fire = function (source) {
    if (game.time.time < this.nextFire) { return; }
    var x = source.x + 10;
    var y = source.y + 10;
    var usable=this.getFirstExists(false);
    if( usable ){
	usable.fire(x, y, 0, this.bulletSpeed, 0, 0);
    }
    this.nextFire = game.time.time + this.fireRate;
};

var Game=function(){
  
  this.game;      //  a reference to the currently running game (Phaser.Game)
    this.add;       //  used to add sprites, text, groups, etc (Phaser.GameObjectFactory)
    this.camera;    //  a reference to the game camera (Phaser.Camera)
    this.cache;     //  the game cache (Phaser.Cache)
    this.input;     //  the global input manager. You can access this.input.keyboard, this.input.mouse, as well from it. (Phaser.Input)
    this.load;      //  for preloading assets (Phaser.Loader)
    this.math;      //  lots of useful common math operations (Phaser.Math)
    this.sound;     //  the sound manager - add a sound, play one, set-up markers, etc (Phaser.SoundManager)
    this.stage;     //  the game stage (Phaser.Stage)
    this.time;      //  the clock (Phaser.Time)
    this.tweens;    //  the tween manager (Phaser.TweenManager)
    this.state;     //  the state manager (Phaser.StateManager)
    this.world;     //  the game world (Phaser.World)
    this.particles; //  the particle manager (Phaser.Particles)
    this.physics;   //  the physics manager (Phaser.Physics)
    this.rnd;       
    
    this.background=null;
    this.foreground=null;
    this.player=null;
    this.cursors=null;
    this.speed = 300;
    this.weapon = null;
    this.flag = 0;
    this.score = 0;
    this.scoreText = null;
    this.flame = null;
    this.timeCounter = null;
	  this.leftTime = null;
	  this.leftTimeText = null;
	  this.timesup_title = null;
    this.go_title = null;
    this.mummy = null;
    this.bara = null;
    this.bakuhatu = null;
}

Game.prototype={

    init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },

    preload: function() {
  this.load.crossOrigin = 'anonymous';
  this.load.image('ground', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/platform.png');
	this.load.image('background', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/20071014_419307.png');
	//this.load.image('foreground', 'assets/fore.png');
	this.load.spritesheet('player', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/sensya.png', 200, 90);
  this.load.spritesheet('star', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/hitodama2.png', 36, 55);
  this.load.image('flame', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/efa.png');
  this.load.image('bara', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/lgi01a2014072318.png');
//	this.load.bitmapFont('shmupfont', 'assets/shmupfont.png', 'assets/shmupfont.xml');
  this.load.image('bullet5', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1540498/bullet5.png');
  this.load.image('timesup', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/taimeup.png');
  this.load.spritesheet('mummy', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/lgi01a20140723180.png', 100, 173);
    this.load.image('bakuhatu', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/Explosion-417894_icon.png');
     this.load.image('go', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/ouver.png'); 
      
	//  Note: Graphics are not for use in any commercial project
    },

    create: function(){
      
      //platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    //platforms.enableBody = true;

    // Here we create the ground.
    //var ground = platforms.create(0, game.world.height - 20, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    //ground.scale.setTo(2, 2);

    //  This stops it from falling away when you jump on it
    //ground.body.immovable = true;
      
	this.background = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'background');
	this.background.autoScroll(-40, 0);

      this.stars = this.add.group();
      this.stars.enableBody = true;
      this.mummys = this.add.group();
      this.mummys.enableBody = true;
  scoreText = game.add.text(16, 16, 'スコア: 0', { fontSize: '32px', fill: '#fff' });
      
  this.time.advancedTiming = true;
  this.timeCounter = 0;
  this.leftTime = 60;	//こここここここおこここここ
	this.leftTimeText = this.add.text(16, 40, 'Time: 60', { fontSize: '28px', fill: '#FFF' });
      
	this.player = this.add.sprite(30, 150, 'player');
	this.physics.arcade.enable(this.player);
  this.player.body.bounce.y = 0.2;
  this.player.body.gravity.y = 50000;
	this.player.body.collideWorldBounds = true;
  this.player.body.setSize(10,69,100,34);
      
  this.player.animations.add('up', [1,2], 1000, true);
  this.player.animations.add('right',[5,6], 1000, true);
  this.player.animations.add('left',[3,4], 1000, true);
//  this.mummy.animations.add('walk',[0,1,0,2],5,true);
  
	this.cursors = this.input.keyboard.createCursorKeys();
	this.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR ]);

	this.weapon=new SingleBullet(game);
      
      this.flame = this.add.sprite(0, 0, 'flame');
      this.flame.anchor.set(0.5);
      this.flame.visible = false;
      
      this.bara = this.add.sprite(0, 0, 'bara');
      this.bara.anchor.set(0.5);
      this.bara.visible = false;
      
      this.bakuhatu = this.add.sprite(0, 0, 'bakuhatu');
      this.bakuhatu.anchor.set(0.5);
      this.bakuhatu.visible = false;
      
    },
  
  collectMummy: function(weapon, mummy){
    mummy.kill();
    weapon.kill();
    this.fireeee(mummy);
    
    this.score += 1;
    scoreText.text = 'スコア: ' + this.score;
  },

  collectStar: function(weapon, star){
  //  this.flag += 1;
    star.kill();
    weapon.kill();
    this.fireee(star);
    
    this.score += 5;
    scoreText.text = 'スコア: ' + this.score;
},
  
    collectP: function(player, mummy){
      player.kill();
      this.bakuhatu.x = player.x+23.5;
      this.bakuhatu.y = player.y+32;
      this.bakuhatu.alpha = 1;
      this.bakuhatu.visible = true;
            //  Boom
      this.add.tween(this.bakuhatu).to( { alpha: 0 }, 2000, "Linear", true);
      
      this.go_title = this.add.sprite(130, 100, 'go');
       
       this.game.paused = true;
       var pausedText = this.add.text(120, 300, "クリックするとタイトルに戻ります", { fontSize: '28px', fill: '#FFF' });
       this.input.onDown.add(function(){
			pausedText.destroy();
			this.game.paused = false;
      this.score = 0;
			this.state.start('Boot');
		}, this);
    },

    fireee: function (star) {
            this.flame.x = star.x+23.5;
            this.flame.y = star.y+32;
            this.flame.alpha = 1;
            this.flame.visible = true;
            //  Boom
            this.add.tween(this.flame).to( { alpha: 0 }, 2000, "Linear", true);
        },
  
  fireeee: function(mummy){
            this.bara.x = mummy.x+20;
            this.bara.y = mummy.y+100;
            this.bara.alpha = 1;
             this.bara.visible = true;
           //  Boom
            this.add.tween(this.bara).to( { alpha: 0 }, 2000, "Linear", true);
  },
  
     quitGame: function (pointer){
       this.timesup_title = this.add.sprite(130, 100, 'timesup');
       
       this.game.paused = true;
       var pausedText = this.add.text(120, 300, "クリックするとタイトルに戻ります", { fontSize: '28px', fill: '#FFF' });
       this.input.onDown.add(function(){
			pausedText.destroy();
			this.game.paused = false;
      this.score = 0;
			this.state.start('Boot');
		}, this);
     },
  
    update: function(){

	this.player.body.velocity.set(0);
  this.physics.arcade.overlap(this.weapon, this.stars, this.collectStar, null, this);
  this.physics.arcade.overlap(this.weapon, this.mummys, this.collectMummy, null, this);
  this.physics.arcade.overlap(this.player, this.mummys, this.collectP, null, this);
  
	if (this.cursors.left.isDown)
	{
            this.player.body.velocity.x = -this.speed;
	}
	else if (this.cursors.right.isDown)
	{
            this.player.body.velocity.x = this.speed;
	}
	if (this.cursors.up.isDown)
	{
            this.player.body.velocity.y = -1000;
            
            if(this.cursors.right.isDown)
              this.player.animations.play('left');
            else if(this.cursors.left.isDown)
              this.player.animations.play('right');
            else
              this.player.animations.play('up');
	}
	else if (this.cursors.down.isDown)
	{
            this.player.body.velocity.y = this.speed;
	}
  else
  {
    this.player.animations.stop();
    this.player.frame = 0;
  }
	if (this.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR))
	{
            this.weapon.fire(this.player);
	}
      
   this.timeCounter += this.time.elapsed;
		// if spawn timer reach one second (1000 miliseconds)
      
		if(this.timeCounter > 1000) {
			// reset it
			this.timeCounter = 0;
			this.leftTime --;
      if(this.leftTime%2 == 0){
      var star = this.stars.create((Math.random()*240) + 400, 0, 'star');
      star.animations.add('yura',[0,1,2,3],5,true);
      star.animations.play('yura');
      star.body.velocity.y = (Math.random()+0.8)*200;
      star.body.velocity.x = -(Math.random()+0.8)*200;
    star.body.bounce.y = 1;
    star.body.bounce.x = 1;
    star.body.collideWorldBounds = true;
    }
      if(this.leftTime%3 == 0){
        
        var mummy = this.mummys.create(560, 230, 'mummy');
        mummy.body.velocity.x = -(Math.random()+0.8)*50;
        mummy.animations.add('walk',[0,1,0,2],5,true);
        mummy.animations.play('walk'); 
        this.physics.arcade.enable(this.mummys);
      /*    this.mummy = this.add.sprite(560, 230, 'mummy');
          this.mummy.animations.add('walk',[0,1,0,2],5,true);
          this.physics.arcade.enable(this.mummy);
          this.mummy.body.velocity.x = -(Math.random()+0.8)*50;
          this.mummy.animations.play('walk'); 
        */
      }
			this.leftTimeText.text = 'Time: ' + this.leftTime;
		}
		
		if(this.leftTime <= 0) {
			this.quitGame();
		}      
  }
};
      
var Sto = function(game){
  this.playButton = null;
};
      
Sto.prototype = {
  init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },
  preload: function() {
    this.load.crossOrigin = 'anonymous';
    this.load.image('back', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/arasuzi1.png');
    this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/title.png', 90, 50);
    this.load.spritesheet('tugi-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/tugi.png', 90, 50);
  },
  
  create: function(){
    this.add.sprite(0, 0, 'back');
    this.add.button(0, 0,'start-button', this.backS, this, 0, 2, 1);
    this.add.button(640-90, 416-50,'tugi-button', this.S2, this, 0, 2, 1);
  },
  
  backS: function(pointer){
    this.state.start('Boot');
  },
  
  S2: function(pointer){
    this.state.start('Sto2');
  },
  
  update: function(){
  
  }
};
      
var Sto2 = function(game){
  this.playButton = null;
};
      
Sto2.prototype = {
  init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },
  preload: function() {
    this.load.crossOrigin = 'anonymous';
    this.load.image('back', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/arasuzi2.png');
    this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/title.png', 90, 50);
    this.load.spritesheet('tugi-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/tugi.png', 90, 50);
    this.load.spritesheet('mae-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/mae.png', 90, 50);
  },
  
  create: function(){
    this.add.sprite(0, 0, 'back');
    this.add.button(0, 0,'start-button', this.backS, this, 0, 2, 1);
    this.add.button(640-90, 416-50,'tugi-button', this.S3, this, 0, 2, 1);
    this.add.button(0, 416-50,'mae-button', this.S1, this, 0, 2, 1);
  },
  
  backS: function(pointer){
    this.state.start('Boot');
  },
  
  S3: function(pointer){
    this.state.start('Sto3');
  },
  
  S1: function(pointer){
    this.state.start('Sto');
  },
  
  update: function(){
  
  }
};
      
var Sto3 = function(game){
  this.playButton = null;
};
      
Sto3.prototype = {
  init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },
  preload: function() {
    this.load.crossOrigin = 'anonymous';
    this.load.image('back', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/arasuzi3.png');
    this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/title.png', 90, 50);
    this.load.spritesheet('mae-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/mae.png', 90, 50);
    
  },
  
  create: function(){
    this.add.sprite(0, 0, 'back');
    this.add.button(0, 0,'start-button', this.backS, this, 0, 2, 1);
    this.add.button(0, 416-50,'mae-button', this.S2, this, 0, 2, 1);
  },
  
  backS: function(pointer){
    this.state.start('Boot');
  },
  
  S2: function(pointer){
    this.state.start('Sto2');
  },
  
  update: function(){
  
  }
};
      
var set = function(game){
  this.playButton = null;
};
      
set.prototype = {
  init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },
  preload: function() {
    this.load.crossOrigin = 'anonymous';
    this.load.image('back', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/setumei.png');
    this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/title.png', 90, 50);
    this.load.spritesheet('tugi-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/tugi.png', 90, 50);
  },
  
  create: function(){
    this.add.sprite(0, 0, 'back');
    this.add.button(0, 0,'start-button', this.backS, this, 0, 2, 1);
    this.add.button(640-90, 416-50,'tugi-button', this.S2, this, 0, 2, 1);
  },
  
  backS: function(pointer){
    this.state.start('Boot');
  },
  
  S2: function(pointer){
    this.state.start('set2');
  },
  
  update: function(){
  
  }
};
      
var set2 = function(game){
  this.playButton = null;
};
      
set2.prototype = {
  init: function() {
	this.game.renderer.renderSession.roundPixels = true;
	this.game.physics.startSystem(Phaser.Physics.ARCADE);
    },
  preload: function() {
    this.load.crossOrigin = 'anonymous';
    this.load.image('back', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/setumei2.png');
    this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/title.png', 90, 50);
    this.load.spritesheet('tugi-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/mae.png', 90, 50);
  },
  
  create: function(){
    this.add.sprite(0, 0, 'back');
    this.add.button(0, 0,'start-button', this.backS, this, 0, 2, 1);
    this.add.button(640-90, 416-50,'tugi-button', this.S2, this, 0, 2, 1);
  },
  
  backS: function(pointer){
    this.state.start('Boot');
  },
  
  S2: function(pointer){
    this.state.start('set');
  },
  
  update: function(){
  
  }
};


var Boot = function (game) {
    this.playButton = null;
};

Boot.prototype = {
    
    init: function () {

        //  Unless you specifically know your game needs to support multi-touch I would recommend setting this to 1
        this.input.maxPointers = 1;

        //  Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:
        this.stage.disableVisibilityChange = true;

        if (this.game.device.desktop)
        {
            //  If you have any desktop specific settings, they can go in here
            this.scale.pageAlignHorizontally = true;
        }
        else
        {
            //  Same goes for mobile settings.
            //  In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"
            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.setMinMax(480, 260, 1024, 768);
            this.scale.forceLandscape = true;
            this.scale.pageAlignHorizontally = true;
            this.scale.setScreenSize(true);
            this.scale.refresh();
        }
    },

    preload: function () {
        this.load.crossOrigin = 'anonymous';
        this.load.spritesheet('start-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/stbt.png', 160, 50);
      this.load.spritesheet('ar-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/arbt.png', 160, 50);
        this.load.image('titlepage', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/wallpaper-tanks-illustration-04.png');
      this.load.spritesheet('sou-button', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566180/soubt.png', 160, 50);
    },

    create: function () {
        this.add.sprite(0, 0, 'titlepage');
        //titleText = game.add.text(320-(32*4), 16, '  ホバーパンツァー\n~終わりなき戦い~', { fontSize: '64px', fill: '#000' });
        //  By this point the preloader assets have loaded to the cache, we've set the game settings
        //  So now let's start the real preloader going
        this.add.button(320-80, 340,'start-button', this.startGame, this, 0, 1, 2);
        this.add.button(320-80-180, 340,'ar-button', this.startS, this, 0, 1, 2);
        this.add.button(320+80+20, 340,'sou-button', this.set, this, 0, 1, 2);

        

    },
  
    startS: function(pointer){
      this.state.start('Sto');
    },
  
    set: function(pointer){
      this.state.start('set');
    },
  
    startGame: function (pointer) {
		  this.state.start('Game');
	}

};

      
game.state.add('Boot', Boot, true);
game.state.add('Game', Game, true);
game.state.add('Sto', Sto, true);
game.state.add('Sto2', Sto2, true);
game.state.add('Sto3', Sto3, true);
game.state.add('set', set, true);
game.state.add('set2', set2, true);
game.state.start('Boot');
</script>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console