Skip to content

Instantly share code, notes, and snippets.

@janzeteachesit

janzeteachesit/index.html

Created April 7, 2017 18:05
Show Gist options
  • Save janzeteachesit/2bf8bce52a92d382799bfd7443c373a9 to your computer and use it in GitHub Desktop.
Save janzeteachesit/2bf8bce52a92d382799bfd7443c373a9 to your computer and use it in GitHub Desktop.
Download ZIP
Phaser - Game Template
Raw
index.html
<head>
<title>Phaser - Game Template</title>
<meta charset="utf-8">
<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
</head>
<body>
<div id="game"></div>
<!--a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue001/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a -->
</body>
Raw
phaser-game-template.markdown
Raw
script.js
var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
var PhaserGame = function (game) {
this.tank = null;
this.turret = null;
this.flame = null;
this.bullet = null;
this.background = null;
this.targets = null;
this.power = 300;
this.powerText = null;
this.cursors = null;
this.fireButton = null;
};
PhaserGame.prototype = {
init: function () {
this.game.renderer.renderSession.roundPixels = true;
this.game.world.setBounds(0, 0, 992, 480);
this.physics.startSystem(Phaser.Physics.ARCADE);
this.physics.arcade.gravity.y = 200;
},
preload: function () {
// We need this because the assets are on Amazon S3
// Remove the next 2 lines if running locally
this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue001/';
this.load.crossOrigin = 'anonymous';
this.load.image('tank', 'assets/tank.png');
this.load.image('turret', 'assets/turret.png');
this.load.image('bullet', 'assets/bullet.png');
this.load.image('background', 'assets/background.png');
this.load.image('flame', 'assets/flame.png');
this.load.image('target', 'assets/target.png');
// Note: Graphics from Amiga Tanx Copyright 1991 Gary Roberts
},
create: function () {
// Simple but pretty background
this.background = this.add.sprite(0, 0, 'background');
// Something to shoot at :)
this.targets = this.add.group(this.game.world, 'targets', false, true, Phaser.Physics.ARCADE);
this.targets.create(300, 390, 'target');
this.targets.create(500, 390, 'target');
this.targets.create(700, 390, 'target');
this.targets.create(900, 390, 'target');
// Stop gravity from pulling them away
this.targets.setAll('body.allowGravity', false);
// A single bullet that the tank will fire
this.bullet = this.add.sprite(0, 0, 'bullet');
this.bullet.exists = false;
this.physics.arcade.enable(this.bullet);
// The body of the tank
this.tank = this.add.sprite(24, 383, 'tank');
// The turret which we rotate (offset 30x14 from the tank)
this.turret = this.add.sprite(this.tank.x + 30, this.tank.y + 14, 'turret');
// When we shoot this little flame sprite will appear briefly at the end of the turret
this.flame = this.add.sprite(0, 0, 'flame');
this.flame.anchor.set(0.5);
this.flame.visible = false;
// Used to display the power of the shot
this.power = 300;
this.powerText = this.add.text(8, 8, 'Power: 300', { font: "18px Arial", fill: "#ffffff" });
this.powerText.setShadow(1, 1, 'rgba(0, 0, 0, 0.8)', 1);
this.powerText.fixedToCamera = true;
// Some basic controls
this.cursors = this.input.keyboard.createCursorKeys();
this.fireButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
this.fireButton.onDown.add(this.fire, this);
},
/**
* Called by fireButton.onDown
*
* @method fire
*/
fire: function () {
if (this.bullet.exists)
{
return;
}
// Re-position the bullet where the turret is
this.bullet.reset(this.turret.x, this.turret.y);
// Now work out where the END of the turret is
var p = new Phaser.Point(this.turret.x, this.turret.y);
p.rotate(p.x, p.y, this.turret.rotation, false, 34);
// And position the flame sprite there
this.flame.x = p.x;
this.flame.y = p.y;
this.flame.alpha = 1;
this.flame.visible = true;
// Boom
this.add.tween(this.flame).to( { alpha: 0 }, 100, "Linear", true);
// So we can see what's going on when the bullet leaves the screen
this.camera.follow(this.bullet);
// Our launch trajectory is based on the angle of the turret and the power
this.physics.arcade.velocityFromRotation(this.turret.rotation, this.power, this.bullet.body.velocity);
},
/**
* Called by physics.arcade.overlap if the bullet and a target overlap
*
* @method hitTarget
* @param {Phaser.Sprite} bullet - A reference to the bullet (same as this.bullet)
* @param {Phaser.Sprite} target - The target the bullet hit
*/
hitTarget: function (bullet, target) {
target.kill();
this.removeBullet();
},
/**
* Removes the bullet, stops the camera following and tweens the camera back to the tank.
* Have put this into its own method as it's called from several places.
*
* @method removeBullet
*/
removeBullet: function () {
this.bullet.kill();
this.camera.follow();
this.add.tween(this.camera).to( { x: 0 }, 1000, "Quint", true, 1000);
},
/**
* Core update loop. Handles collision checks and player input.
*
* @method update
*/
update: function () {
// If the bullet is in flight we don't let them control anything
if (this.bullet.exists)
{
if (this.bullet.y > 420)
{
// Simple check to see if it's fallen too low
this.removeBullet();
}
else
{
// Bullet vs. the Targets
this.physics.arcade.overlap(this.bullet, this.targets, this.hitTarget, null, this);
}
}
else
{
// Allow them to set the power between 100 and 600
if (this.cursors.left.isDown && this.power > 100)
{
this.power -= 2;
}
else if (this.cursors.right.isDown && this.power < 600)
{
this.power += 2;
}
// Allow them to set the angle, between -90 (straight up) and 0 (facing to the right)
if (this.cursors.up.isDown && this.turret.angle > -90)
{
this.turret.angle--;
}
else if (this.cursors.down.isDown && this.turret.angle < 0)
{
this.turret.angle++;
}
// Update the text
this.powerText.text = 'Power: ' + this.power;
}
}
};
game.state.add('Game', PhaserGame, true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment