cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <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>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console