Jump to content

Need help on my 1st game


Recommended Posts

Hi guys,


I'm trying to create my first practice game using phaser and I need help badly (I only started coding recently). I used http://phaser.io/examples/v2/games/tanks as reference. I have attached the corresponding files in this post.


The game's background:

The game is based on an old arcade game wherein you control a naval ship (using left and right keys to move and spacebar to drop depth charges) and your goal is to destroy all enemy submarines.


My issues:

1. I want the submarines to randomly face left or right at the start. I tried to use game.rnd.between(1,2), but it seems to generate '1' always.

2. The kill/destroy object code isn't optimized. I'm noticing some performance issues mid-game, as if the enemies and depth charges are not killed correctly. I'm not sure if I'm correctly referring to the proper objects (enemies, depth charges) being killed. As proof, I the enemySubmarines.length still shows 10 (original number), even if I already destroyed some subs.

3. The explosion animation (called in destroySub function) moves along the destroyed submarine. I want it to be fixed in the position where the spot the submarine is destroyed.

4. There are times when 2 depth charges collide with a single submarine, and both depth charges are taken out. I need opinion if this logic is already ok, or it would be better if 1:1 ratio is applied.


I would really appreciate any help/inputs. Thank you! :)

Enemy = function (index, game, torpedo) {

var x = game.world.randomX;
var y = (50*index)+140;
var face = game.rnd.between(1,2);

this.game = game;
this.health = enemySubHealth;
this.torpedo = enemyTorpedo;
this.fireRate = 1000;
this.nextFire = 0;
this.alive = true;

this.enemy = game.add.sprite(x, y, 'enemySub');
this.enemy.name = index.toString();
game.physics.enable(this.enemy, Phaser.Physics.ARCADE);
this.enemy.body.immovable = true;
this.enemy.body.collideWorldBounds = true;
this.enemy.body.bounce.x = 1;

if(face = 1){
this.enemy.body.velocity.x = -100+(10*level);
this.enemy.body.velocity.x = 100;

Enemy.prototype.damage = function() {

return false;

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });

//var text;

//player global variables
var score=0;
var scoreStrinf ='';
var lives = 3;
var cursors;
var left;
var right;
var shoot;
var level = 1;

//destroyer global variables
var destroyer;
var destroyerHp = 1;
var destroyerDragX = 50;
var destroyerVelocityX = 50;
var depthChargeCount = 3;

//depthCharge global variables
var depthCharges;
var depthChargeTime = 0;
var depthChargeVelocity = 50;

var enemySubmarines;
var enemySubHealth = 1;
var enemyTorpedo;
var enemyTorpedoCount = 30;
var numberOfEnemies;

function preload() {
game.load.spritesheet('test', 'TestSheet.png', 40, 45, 10);
game.load.image('depthCharge', 'depthCharge.png');
game.load.image('enemySub', 'enemySub.png');
game.load.image('enemyTorpedo', 'enemyTorpedo.png');
game.load.spritesheet('explosion', 'explosion.png', 195, 195, 24);

function create() {

//var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

//  The Text is positioned at 0, 100
//intro = game.add.text(0, 0, "How many players?", style);

//Add background
var background = game.add.tileSprite(0, 0, 800, 600, 'background');
//land.fixedToCamera = true;

//player cursor
cursors = game.input.keyboard.createCursorKeys();
shoot = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

//destroyer initialization
destroyer = game.add.sprite(game.world.centerX, 55, 'test');
destroyer.body.collideWorldBounds = true;
destroyer.body.bounce.x = 0.2;
destroyer.body.drag.x = destroyerDragX;
destroyer.body.immovable = true;

//depthCharge initialization
depthCharges = game.add.group();
depthCharges.enableBody = true;
depthCharges.physicsBodyType = Phaser.Physics.ARCADE;

//enemyTorpedo initialization
enemyTorpedo = game.add.group();
enemyTorpedo.enableBody = true;
enemyTorpedo.physicsBodyType = Phaser.Physics.ARCADE;

//enemy submarines
//enemySubmarines = game.add.group();
//enemySubmarines.enableBody = true;
//enemySubmarines.physicsBodyType = Phaser.Physics.ARCADE;

//  Explosion pool
explosions = game.add.group();

for (var ctr = 0; ctr < 10; ctr++){
var explosionAnimation = explosions.create(0, 0, 'explosion', [0], false);
explosionAnimation.anchor.setTo(0.5, 0.5);

//create enemies
enemySubmarines = [];
numberOfEnemies = level*10;
enemiesAlive = level*10;

for (var ctr = 0; ctr < numberOfEnemies; ctr++){
enemySubmarines.push(new Enemy(ctr, game, enemyTorpedo));

scoreString = 'Score: ';
scoreText = game.add.text(10,10, scoreString + score, {font: '12px Calibri', fill: '#fff'});


function render(){
game.add.text(game.world.width - 100,10, 'Enemies Alive: ' + enemiesAlive, {font: '12px Calibri', fill: '#fff'});

function update(){

enemiesAlive = 0;

for (var i = 0; i < enemySubmarines.length; i++){
if (enemySubmarines[i].alive){
var test = game.physics.arcade.overlap(depthCharges, enemySubmarines[i].enemy, destroySub, null, this);
console.log("update" + test);


if (cursors.left.isDown){
destroyer.body.velocity.x = -destroyerVelocityX;
else if(cursors.right.isDown){
destroyer.body.velocity.x = destroyerVelocityX;

function shootdepthCharge(){
if(game.time.now > depthChargeTime){
depthCharge = depthCharges.getFirstExists(false);
depthCharge.body.velocity.y = depthChargeVelocity;
depthChargeTime = game.time.now + 600;

function destroySub(depthCharge,enemySubmarines){
enemySubmarines.health -= 1;

if (enemySubmarines.health <= 0){
enemySubmarines.alive = false;
console.log("destroyed sub");
var explosionAnimation = explosions.getFirstExists(false);
explosionAnimation.reset(enemySubmarines.x, enemySubmarines.y);
explosionAnimation.play('explosion', 30, false, true);

function resetdepthCharge(depthCharge){



Link to comment
Share on other sites

I don't know offhand what all your problems are, but I do know that you can save yourself a lot of trouble by making your Enemy class extend Phaser.Sprite. It'll allow you to push it directly into Phaser groups, which is a really convenient way of handling your assets. Some of your problems might be related to the fact that you're conflating your Enemy class with a proper Sprite, but that's just a hypothesis.


rnd.between should do what you're asking of it, not sure what the problem is there.

Link to comment
Share on other sites

Thanks for the feedback, Tilde. Apologies, but I'm new in programming, so how do I extend the class?


I tried playing around rnd.between and it works as is. I just don't know how to integrate it to the game. What I really want is for rnd.between to generate a random number, either 1 or 2 [game.rnd.between(1,2) already does the trick]. If 1, then the enemy submarine should start moving to the left. If 2, the enemy submarine should start moving to the right. For some reason, all the submarines move to the left, regardless of the value in "face" variable.

Link to comment
Share on other sites

Hi there :) To extend a Phaser class, for example Phaser.Sprite, you can use prototype method. Roughly like the example below

class_name = function(x, y, key, frame){     Phaser.Sprite.call(game, x, y, key, frame);    game.world.add(this)    this.inputEnabled = true;    this.events.onTouchDown.add(this.onInputDown, this);}; class_name.prototype = Object.create(Phaser.Sprite.prototype);class_name.prototype.constructor = class_name;class_name.prototype.update = function() {};class_name.prototype.onTouchDown = function(item, pointer) {};

And simply use it like

var myClassInstance = new class_name(x, y, "sprite sheet key", "frame key");
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...