Jump to content

How to create states in the same main.js file - Specific case


viohlet
 Share

Recommended Posts

Hi guys,

I've tried everything, but still cannot get my game to have states. I hate to post my whole code but I have no idea what else to do. If anyone has a bit of time, please let me know what you think. A noob in these matters, I still don't get why I have to use 'this'.

Also tried to do this in different files but nothing. I just want a basic 'play' menu, the actual game, and then the 'play again'. Am I doing something wrong in the code that prevents this to have states?

I also tried the game.pause = true, but as it pauses everything and buttons won't work.

'use strict';


let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame', {
  preload: preload,
  create: create,
  update: update,
  render: render,
});


function preload () {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.stage.backgroundColor = '#000';
  game.load.image('ground', './assets/scripts/game/images/ground.jpg');
  game.load.image('star', 'assets/scripts/game/images/star.png');
  game.load.image('sadmicrowave', 'assets/scripts/game/images/sadmicrowave.png');
  game.load.atlasJSONHash(
    'sprites',
    './assets/scripts/game/images/spritesheet-mini.png',
    './assets/scripts/game/images/spritesheet-mini.json'
  );
  game.load.atlasJSONHash(
    'enemies',
    './assets/scripts/game/images/students.png',
    './assets/scripts/game/images/students.json'
  );
}

let sadmicrowave;
let katie;
let students;
let tables;
let cursors;
let score = 0;
let scoreText;
let timerText;
let weapon;
let fireButton;
let table1;
let showgame = document.getElementById('showgame');
let scorediv = document.getElementById('scorediv');
let scorelabel = document.getElementById('label');

function create() {

  let ground = game.add.image(0, 0, 'ground');
  ground.fixedToCamera = true;


  //	Enable p2 physics
	game.physics.startSystem(Phaser.Physics.P2JS);

  game.physics.p2.setImpactEvents(true);

  game.physics.p2.defaultRestitution = 0.8;

  // Collission Groups
  let playerCollisionGroup = game.physics.p2.createCollisionGroup();
  let studentCollisionGroup = game.physics.p2.createCollisionGroup();
  let table1CollisionGroup = game.physics.p2.createCollisionGroup();

  game.physics.p2.updateBoundsCollisionGroup();

  let x = game.world.randomX;
  let y = game.world.randomY;

  //weapon - does not work yet
  weapon = game.add.weapon(30, 'sprites', 'chair.png');

  weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
  weapon.bulletSpeed = 500;
  weapon.fireRate = 600;

  // main character
  katie = game.add.sprite (700, 300, 'sprites','katie.png');

  game.physics.p2.enable(katie);
  katie.body.setCircle(30);
  katie.body.setZeroDamping();
  katie.scale.x *= -1;

  katie.anchor.set(0.5);
	katie.body.fixedRotation = true;
  katie.smoothed = false;

  katie.body.setCollisionGroup(playerCollisionGroup);
  katie.body.collides(studentCollisionGroup, hitStudent);
  katie.body.collides(table1CollisionGroup, hitTable);

  game.camera.follow(katie);

  weapon.trackSprite(katie, 0, 0, true);

  fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

  let students = game.add.group();
  students.enableBody = true;
  students.physicsBodyType = Phaser.Physics.P2JS;
  students.smoothed = false;

  for (let i = 0; i < 23; i++)
  {
    // let student = students.create(190 + 69 * i, -90, 'enemies', i);
    let student = students.create(x, y, 'enemies', i);
    student.body.setRectangle(30,30, 0, 0, 4);

    student.body.setZeroDamping();

    student.body.fixedRotation = true;
    student.body.setCollisionGroup(studentCollisionGroup);
    student.body.collides([ studentCollisionGroup, playerCollisionGroup, table1CollisionGroup ]);
  }

  students.setAll('inputEnabled', true);
  students.setAll('input.useHandCursor', true);

  let tables = game.add.physicsGroup();
  tables.enableBody = true;
  tables.physicsBodyType = Phaser.Physics.P2JS;
  tables.smoothed = false;
   //
  for (let i = 0; i < 100; i++)
  {
    let table1 = tables.create(x, y, 'sprites', 'table.png');
    table1.body.setRectangle(10,10, 0, 0, 0);
    table1.body.setZeroDamping();
    table1.body.setCollisionGroup(table1CollisionGroup);
    table1.body.collides([ studentCollisionGroup, playerCollisionGroup ]);
    }

  let door = game.add.sprite (20, 500, 'sprites', 'door.png');

  cursors = game.input.keyboard.createCursorKeys();

  scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#000' });

  timerText = game.add.text(530, 16, 'Time: ', { fontSize: '32px', fill: '#000' });
  game.time.events.add(Phaser.Timer.SECOND * 30, fadePicture);
}

  function hitStudent(katie, student) {
    // student.health = 2;
    // for each {student.sprite.alpha -= 0.5};
    student.sprite.alpha -= 1;
    score += 10;
    student.destroy();
  }

  function hitTable(katie, table1) {
    // student.health = 2;
    // for each {student.sprite.alpha -= 0.5};
    table1.sprite.alpha -= 0.5;
  }

// GAME OVER
function gameover () {
  game.destroy();
  console.log('game destroyed');
}

function fadePicture() {
  game.add.tween(katie).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
  game.add.tween(scoreText).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
  }

function update() {

  katie.body.setZeroVelocity();

  if (cursors.left.isDown)
    {
      katie.body.moveLeft(350);
    }
  else if (cursors.right.isDown)
    {
      katie.body.moveRight(350);
    }
  if (cursors.up.isDown)
    {
      katie.body.moveUp(350);
    }
  else if (cursors.down.isDown)
    {
      katie.body.moveDown(350);
    }
  if (fireButton.isDown)
    {
    weapon.fire();
    }
}


function render() {
  scoreText.text = 'Score: ' + score;
  timerText.text = 'Time Left: ' + game.time.events.duration;
  if (
    game.time.events.duration === 0
  ) {
    gameover();
  }
}

 

Link to comment
Share on other sites

Here's a link to a post I made recently about "this": 

 

As to the rest: your code is not using states, exactly. You've got one state there, in the object you passed when you made the Phaser.Game object with the preload, create, update, and render properties.

Chances are there are errors being displayed in the development console of your browser. Try and open it and see what they are and paste them here. Search around and find it, it's worth it to see when developing any JS application, including a game.

I would remove everything out of the "render" method, including the "if" statement that isn't valid JS. And come back with what error the browser has that is preventing the game from working.

Link to comment
Share on other sites

Hi @viohlet, states are tricky at first. Here's a skeleton. Within the state callbacks (preload, create, update), this represents the current state, but you don't have to use it — you can keep using the game reference.

let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame');

let menuState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

let gameState = {
  preload: function () {},
  
  create: function () {},
  
  update: function () {}
};

let gameOverState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

game.state.add('menu', menuState);
game.state.add('game', gameState);
game.state.add('gameOver', gameOverState);

game.state.start('menu');

 

Link to comment
Share on other sites

  • 10 months later...
On 22.12.2016 at 10:47 PM, samme said:

Hi @viohlet, states are tricky at first. Here's a skeleton. Within the state callbacks (preload, create, update), `this` represents the current state, but you don't have to use it — you can keep using the `game` reference.


let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame');

let menuState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

let gameState = {
  preload: function () {},
  
  create: function () {},
  
  update: function () {}
};

let gameOverState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

game.state.add('menu', menuState);
game.state.add('game', gameState);
game.state.add('gameOver', gameOverState);

game.state.start('menu');

 

 

Hi thanks for the answer but  i cant use that  let gameOverState = { preload: function () {}, create: function () { // … onInputDown.add -> // game.state.start('game'); } }; 
structure in my typescript file.It says constructor method... needed for it.I am trying to create states in 1 file.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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