Jump to content

Trouble with Phaser in Pong like game


Recommended Posts

Hey all, just started programming with Phaser and I'm still trying to get the hang of it. I fiddled around with with the sandbox environment and then decided to switch over to Sublime for easier formatting. I had a few issues with my game in the sandbox that I couldn't figure out and was going to be my main question but now my issue is that when I test my game in Chrome/Safari it doesn't display anything. I built it procedurally so I could verify that things were working and the only thing that ever worked was displaying my score and lives counters. In sandbox I had much more working so I can't figure out what is going on. Any tips or tricks that could help me remedy this would be awesome. I've scoured my code and can't find anything wrong but I know how it goes when staring at the same code for hours on end.

Forgot to add details about the game. It is a Pong like game where the player has a paddle on the left side of the screen that they can move up and down using the arrow keys. They will use this paddle to block dust particles coming from the right side of the screen from getting by.

Here is my .html

	<script type="text/javascript" src="js/phaser.min.js"></script>
	<style type="text/css">
		body { margin: 0;}

<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

	//load images
	game.load.image('paddle', 'images/paddle.png');
	game.load.image('bg', 'images/bg.png');
	game.load.image('dustParticle', 'images/dustParticle.png');

//varibales needed for objects
var cursors;
var paddle;
var iWall;
var dustParticle;
//variables for text
var lives = 5;
var livesText;
var score = 0;
var scoreText;
var introText;
var outroText;

function create() {
	//Display starting lives and score text
	scoreText = game.add.text(680, 550, 'Score: 0', { font: "20px Arial", fill: "#ffffff", align: "left" });
    livesText = game.add.text(32, 550, 'Lives: 5', { font: "20px Arial", fill: "#ffffff", align: "left" });

    //	Enable p2 physics

    //  Make things a bit more bouncey
    game.physics.p2.defaultRestitution = 0.8;

    //  Add a sprite
	paddle = game.add.sprite(100, game.world.centerY, 'paddle', 'images/paddle.png');
	paddle.anchor.setTo(0.5, 0.5);
    //  Enable if for physics. This creates a default rectangular body.

    //  Modify a few body properties
	paddle.body.fixedRotation = true;

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

	//Invisible hitbox for dustParticle to collide with    
    iWall = game.add.sprite(1, 200, 'iWall');
    iWall.name = 'iWall';
    game.physics.enable(iWall, Phaser.Physics.ARCADE);
    iWall.body.setSize(1, 600, 1, -200);
    iWall.body.immovable = true;

    //create dustParticle, give it random velocity and starting location
    dustParticle = game.add.sprite(700, Math.floor(Math.random() * (600)), 'dustParticle');
    dustParticle.name = 'dustParticle';
    game.physics.enable(dustParticle, Phaser.Physics.ARCADE);
    dustParticle.body.velocity.setTo(Math.floor(Math.random() * (300)+50)*-1,Math.floor(Math.random() * (300)+50)*-1);
    dustParticle.body.collideWorldBounds = true;

function update() 
	//set paddle velocity to zero, only moves with player input
    //user controls up/down arrow keys and paddle speed
    if (cursors.up.isDown)
    else if (cursors.down.isDown)
    //collision detection for paddle and iWall
    game.physics.arcade.collide(paddle, dustParticle, dustpaddleCollision, null, this);
    game.physics.arcade.collide(iWall, dustParticle, dustiWallCollision, null, this);

//collision call with paddle
function dustpaddleCollision (obj1, obj2) {

	//destroy dustParticle instance
    //increment score and display new score
    score += 10;
    scoreText.text ='Score: ' + score;

//collision call with iWall
function dustiWallCollision (obj1, obj2) {

	//decrease lives, disply new lives, destroy dustParticle instance
    livesText.text = 'Lives: ' + lives;

    //when lives = 0, gameover otherwise create new instance of dustParticle
    if (lives === 0)
        dustParticle.reset(700, Math.floor(Math.random() * (600)));
        dustParticle.body.velocity.setTo(Math.floor(Math.random() * (300)+50)*-1,Math.floor(Math.random() * (300)+50)*-1);
//gameOver call, displays 'Game over' to user
function gameOver () {
    introText.text = 'Game Over!';
    introText.visible = true;




Link to comment
Share on other sites

  • 11 months later...

have you tried using only one physics engine?

i would assume mixing arcade and p2 either complicates a lot of things and might even cause some problems.

try using arcade first and then switch to p2 if you run into arcades limits (e.g. sprite rotation).


since the paddle uses p2 and the particles use arcade, they do not match.

I guess that is why they do not collide.

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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