Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Trouble with Phaser in Pong like game

WholemealDrop

By WholemealDrop,
in 2D

 Share

Recommended Posts

WholemealDrop Newbie

WholemealDrop

Posted
Posted

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>

 

Link to comment
Share on other sites
  • 11 months later...
SeelenGeier Newbie

SeelenGeier

Posted
Posted

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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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