Phaser Example With Baddies
Phaser offers some great tutorials and hopefully you've had success working through the 'making your first game' tutorial series:
https://phaser.io/tutorials/making-your-first-phaser-game
This is a great way to learn the basics.
If you have downloaded the example from the phaser website you will notice that there are some extra assets included with the source code. We have implemented these in order to create our own version.
We've turned things up by including the following additions:
- Sound effects
- optional full screen support
- Optional game pad support
- A moving and killable enemy
- Life indicator
- Improved physics
oh and we made the good guy the bad guy and the bad guy the good guy! Just like terminator 2...
Phaser Example With Baddies
This is not a very polished demo but demonstrates several important principles that you can use in your own projects.
You can check out the source code below and and there is also a download link to the full zip file.
Download Phaser Example With Baddies from FileFactory
Experiment with the code and tweak it to create the next masterpiece, we can't wait to see what you come up with!
Enjoy
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser Baddies Demo</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body style = "background-color:#6ac1f7">
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
function preload() {
//Allow the user to go full screen
game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
game.scale.startFullScreen(true);
//center game on screen
this.game.scale.pageAlignHorizontally = true;
this.game.scale.pageAlignVertically = true;
this.game.scale.refresh();
//Load images
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('badguy', 'assets/dude.png', 32, 48);
//add the dog sprite included in the assets folder
game.load.spritesheet('dog', 'assets/baddie.png', 32, 32);
//Load sound effects
game.load.audio('barksound', 'assets/bark.wav');
}
//Public Variables - These can be accessed from anywhere!
var player;
var enemy;
var platforms;
var cursors;
var stars;
var score = 0;
var scoreText;
//health indicator
var life = 100;
//sprite controls
var playerLeft;
var playerRight;
//gamepad support
var pad1;
var indicator;
function create() {
// To listen to buttons from a specific pad listen directly on that pad game.input.gamepad.padX, where X = pad 1-4
game.input.gamepad.start();
pad1 = game.input.gamepad.pad1;
// Maintain aspect ratio
game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
//Go full screen if user clicks game canvas
game.input.onDown.add(gofull, this);
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
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 - 64, '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;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(72, game.world.height - 150, 'dog');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 410;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1], 10, true);
player.animations.add('right', [2, 3], 10, true);
//The enemy and settings
enemy = game.add.sprite(500, game.world.height - 248, 'badguy');
game.physics.arcade.enable(enemy);
enemy.body.collideWorldBounds = true;
enemy.animations.add('left', [0, 1, 2, 3], 10, true);
enemy.animations.add('right', [5, 6, 7, 8], 10, true);
//initialise enemy movement
enemy.body.velocity.x = 350;
enemy.animations.play('right');
// Finally some stars to collect
stars = game.add.group();
// We will enable physics for any star that is created in this group
stars.enableBody = true;
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i < 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 1000;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.1 + Math.random() * 0.2;
}
// The score
scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#000' });
//Life Guage
lifeText = game.add.text(16, 46, 'Life: 100', { fontSize: '32px', fill: '#000' });
// Our controls.
cursors = game.input.keyboard.createCursorKeys();
//Sound effects
barksound = game.add.audio('barksound');
}
function update() {
// Collide the player, enemy and the stars with the platforms
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(enemy, platforms);
game.physics.arcade.collide(stars, platforms);
// Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
game.physics.arcade.overlap(player, stars, collectStar, null, this);
// Checks to see if the player overlaps with any of the enemies, if he does call the touchEnemy function
game.physics.arcade.overlap(enemy, player, touchEnemy, null, this);
// Reset the players velocity (movement)
//enemy automatic movenemt
if (enemy.x < 400){
enemy.body.velocity.x = 350;
enemy.animations.play('right');
} else if(enemy.x > 760){
enemy.body.velocity.x = -350;
enemy.animations.play('left');
}
player.body.velocity.x = 0;
// Controls
//Check if Game Pad is connected otherwise use keyboard controls
if (game.input.gamepad.supported && game.input.gamepad.active && pad1.connected){
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.10){
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
playerLeft = true;
playerRight = false;
} else if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.10){
playerLeft = false;
playerRight = true;
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
} else {
// Stand still
player.animations.stop();
if (playerLeft == true){
player.frame = 0;
} else {
player.frame = 3;
}
}
if (pad1.justPressed(Phaser.Gamepad.XBOX360_A) && player.body.touching.down){
player.body.velocity.y = -350;
}
} else {
//keyboard controls
if (cursors.left.isDown) {
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
playerLeft = true;
playerRight = false;
}
else if (cursors.right.isDown) {
playerLeft = false;
playerRight = true;
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
} else {
// Stand still
player.animations.stop();
if (playerLeft == true){
player.frame = 0;
} else {
player.frame = 3;
}
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down) {
player.body.velocity.y = -350;
}
}
//Check if player has collected all the stars and won the game
if (score == 120) {
enemy.kill();
player.kill();
//player.scale.setTo(3, 3);
//player.y = game.height/2;
var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
var text = game.add.text(game.world.centerX, game.world.centerY, "YOU WIN!", style);
}
}
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
barksound.play();
// Add and update the score
score += 10;
scoreText.text = 'Score: ' + score;
}
function touchEnemy (enemy, player) {
if ( player.y < enemy.y ){
enemy.body.velocity.x = 0;
enemy.y -= 500;
enemy.kill();
player.y -= 30;
} else {
// Removes the star from the screen
barksound.play();
// Add and update the score
life -= 10;
}
lifeText.text = 'Life: ' + life;
//Gameover
if(life == 0){
player.kill();
var text = game.add.text(game.world.centerX, game.world.centerY, "YOU LOSE!", { font: "65px Arial", fill: "#ff0044", align: "center" });
}
}
function gofull() {
if (game.scale.isFullScreen) {
game.scale.stopFullScreen();
} else {
game.scale.startFullScreen(false);
}
}
</script>
<div id="game" style=""></div>
</body>
</html>