WholemealDrop

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

<!DOCTYPE HTML>
<html>
<head>
	<title>dustPong</title>
	<script type="text/javascript" src="js/phaser.min.js"></script>
	<style type="text/css">
		body { margin: 0;}
	</style>
</head>
<body>
<h1>dustPong</h1>

<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
	game.physics.startSystem(Phaser.Physics.P2JS);

    //  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.
	game.physics.p2.enable(paddle);

    //  Modify a few body properties
	paddle.body.setZeroDamping();
	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;
    dustParticle.body.bounce.set(1);
    
}

function update() 
{
	//set paddle velocity to zero, only moves with player input
    paddle.body.setZeroVelocity();
    
    //user controls up/down arrow keys and paddle speed
    if (cursors.up.isDown)
    {
    	paddle.body.moveUp(400);
    }
    else if (cursors.down.isDown)
    {
    	paddle.body.moveDown(400);
    }
    
    //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
    dustParticle.kill();
    
    //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
    lives--;
    livesText.text = 'Lives: ' + lives;
    dustParticle.kill();

    //when lives = 0, gameover otherwise create new instance of dustParticle
    if (lives === 0)
    {
        gameOver();
    }
    else
    {
        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;

}
</script>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Also been having trouble with my paddle not recognizing collision or overlap with the dustParticle but dustParticle does recognize collision with iWall. Can't figure out why the paddle acts as a transparent object.

Share this post


Link to post
Share on other sites

Fixed it by switching to phaser.js rather than phaser.min.js, for whaterver reason min.js has issues listed above. This solved my loading issues but I still can't figure out why my paddle can't collide with dustParticle.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.