Hey all! Here’s my first attempt ever at coding a game. I’m still learning so any feedback you may have to simplify or clean up the code would be great or any other advice would be greatly appreciated!
(My next attempt will to be adding bullet functionality for the ship)
<!doctype html>
Making your first Phaser 3 Game - Part 1 body { margin: 0; }</style>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var player;
var space;
var enemy;
var ACCLERATION = 400;
var DRAG = 1600;
var MAXSPEED = 800;
var laser;
var scoreText;
var gasCollectible;
var collect;
var createAsteroid;
var createEnemy;
var explosion;
var score = 0;
var music;
function preload() {
this.load.image('ship', 'assets/ship.png');
this.load.image('space', 'assets/space.jpg');
this.load.image('gas', 'assets/collect.png');
this.load.image('asteroid', 'assets/asteroid.png');
this.load.image('asteroid2', 'assets/asteroid2.png');
this.load.image('alien', 'assets/alien.png');
this.load.spritesheet('explosion', 'assets/explosionsbg.png', {
frameWidth: 256,
frameHeight: 256
});
this.load.image('laser', 'assets/laser.png');
this.load.audio('explode', 'assets/explode.mp3');
this.load.audio('soundtrack', 'assets/soundtrack.mp3');
this.load.audio('laser', 'assets/laser.mp3');
this.load.audio('collect', 'assets/collect.wav')
}
function create() {
//Scrolling background
space = this.add.tileSprite(400, 300, 800, 600, 'space');
//Background music
var music = this.sound.add('soundtrack');
music.play();
//Player character
player = this.physics.add.sprite(200, 300, 'ship');
player.body.maxVelocity.setTo(MAXSPEED, MAXSPEED);
player.body.drag.setTo(DRAG, DRAG);
player.setCollideWorldBounds(true);
//Display Score
scoreText = this.add.text(600, 16, 'Score: 0', {
fontSize: '32px',
fill: '#fff'
});
scoreText.setDepth(2);
//Spawn Collectibles
var collectibleTimer = this.time.addEvent({
delay: 5000,
callback: createCollectible,
callbackScope: this,
loop: true
});
function createCollectible() {
gasCollectible = this.physics.add.sprite(850, Math.random() * 600, 'gas').setVelocity(-200, 0);
this.physics.add.overlap(player, gasCollectible, collectGas, null, this);
}
//Spawn Asteroids
var asteroidTimer = this.time.addEvent({
delay: 1250,
callback: createAsteroid,
callbackScope: this,
loop: true
});
function createAsteroid() {
createAsteroid = this.physics.add.sprite(850, Math.random() * 600, Phaser.Math.RND.pick(['asteroid', 'asteroid2'])).setVelocity(Phaser.Math.Between(-400, -100), 0).setScale(Math.random(1, .5));
this.physics.add.overlap(player, createAsteroid, hitAsteroid, null, this);
}
//Gameplay Mechanics
//Collect Gas Canister
function collectGas(player, gasCollectible) {
gasCollectible.disableBody(true, true);
score += 10;
scoreText.setText('Score: ' + score);
this.sound.play('collect');
//Spawn Alien Ship
if (score == 30) {
createEnemy = this.physics.add.sprite(700, 0, 'alien');
var tween = this.tweens.add({
targets: [createEnemy],
y: 600,
duration: 5000,
yoyo: true,
repeat: -1,
delay: function(i, total, target) {
return i * 600;
}
});
asteroidTimer.remove(false);
var laser = this.sound.add('laser');
laserTimer = this.time.addEvent({
delay: 750,
callback: createLaser,
callbackScope: this,
loop: true
});
function createLaser() {
createLaser = this.physics.add.sprite(createEnemy.x, createEnemy.y, 'laser').setVelocity(-400, 0);
this.physics.add.overlap(player, createLaser, hitLaser, null, this);
this.sound.play('laser');
}
//Laser Death
function hitLaser(player, laser) {
createAsteroid.disableBody(true, true);
player.disableBody(true, true);
laser.disableBody(true, true);
laserTimer.remove(false);
asteroidTimer.remove(false);
collectibleTimer.remove(false);
this.sound.play('explode');
// Explosion
var explode = {
key: 'boom',
frames: this.anims.generateFrameNumbers('explosion'),
frameRate: 24,
hideOnComplete: true
};
anim = this.anims.create(explode);
explosion = this.add.sprite(player.x + 40, player.y, 'explosion').setScale(1.5);
explosion.anims.play('boom');
gameOverText = this.add.text(330, 280, 'Game Over', {
fontSize: '32px',
fill: '#fff'
});
score = 0;
restartText = this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
});
restartText.setInteractive();
restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#3f4'
})));
restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
})));
restartText.on('pointerdown', () => {
this.scene.restart();
music.stop();
});
}
}
// Win Conditional
if (score == 50) {
gameWinText = this.add.text(330, 280, 'You Win', {
fontSize: '32px',
fill: '#fff'
});
asteroidTimer.remove(false);
collectibleTimer.remove(false);
laserTimer.remove(false);
createEnemy.disableBody(true, true);
score = 0;
restartText = this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
});
restartText.setInteractive();
restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#3f4'
})));
restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
})));
restartText.on('pointerdown', () => {
this.scene.restart();
music.stop();
});
}
}
//Lose Conditional
function hitAsteroid(player, asteroid) {
asteroid.disableBody(true, true);
player.disableBody(true, true);
asteroidTimer.remove(false);
collectibleTimer.remove(false);
this.sound.play('explode');
// Explosion
var explode = {
key: 'boom',
frames: this.anims.generateFrameNumbers('explosion'),
frameRate: 24,
hideOnComplete: true
};
anim = this.anims.create(explode);
explosion = this.add.sprite(player.x + 40, player.y, 'explosion').setScale(1.5);
explosion.anims.play('boom');
gameOverText = this.add.text(330, 280, 'Game Over', {
fontSize: '32px',
fill: '#fff'
});
score = 0;
restartText = this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
});
restartText.setInteractive();
restartText.on('pointerover', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#3f4'
})));
restartText.on('pointerout', () => (this.add.text(330, 315, 'Replay', {
fontSize: '32px',
fill: '#fff'
})));
restartText.on('pointerdown', () => {
this.scene.restart();
music.stop();
});
}
//Keyboard controls
cursors = this.input.keyboard.createCursorKeys();
}
function update() {
// Scroll the background
space.tilePositionX += 2;
// Player controls
player.body.acceleration.y = 0;
if (cursors.up.isDown) {
player.body.acceleration.y = -800;
} else if (cursors.down.isDown) {
player.body.acceleration.y = 800;
} else {
player.setVelocityY(0);
}
if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-330);
}
}
</script>
