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

My walls are disappearing

bloodbarron115

By bloodbarron115,
in Phaser 2

 Share

Recommended Posts

bloodbarron115 Newbie

bloodbarron115

Posted
Posted

I am currently making my first game in phaser, where a fish bounces around the screen and eats fish that you spawn in yourself. I am having 2 issues. First off when he bounces off the walls the walls move and occasionally disappear and also when you spawn more than one fish only the most recent fish will be eaten.

 

Here's my code:

 

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" />
<title>Fishtank Game</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>
 
<script type="text/javascript">
 
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
 
function preload() {
game.load.image('water', 'assets/water1.png');
game.load.image('fish', 'assets/fish.png');
game.load.image('wall', 'assets/hidden wall.png');
game.load.image('wall2', 'assets/wall flipped.png');
game.load.image('smallfish', 'assets/smallfish.png');
 
var begin = true;
 
var fish;
var wallRight;
var wallLeft;
var smallFish;
 
var createKey;
 
//var fishAngles = ['-100', '100', '-150', '150', '-200', '200', '-250', '250', '-300', '300'];
//var angle = fishAngles[Math.floor(Math.random()*fishAngles.length)];
 
}
 
function create() {
 
smallFish = 'smallfish';
 
createKey = game.input.keyboard.addKey(Phaser.Keyboard. B);
 
game.physics.startSystem(Phaser.Physics.ARCADE);
 
game.physics.arcade.checkCollision.down = true;
 
game.add.sprite(0,0, 'water');
 
wallRight = game.add.sprite(799, 0, 'wall');
 
game.physics.enable(wallRight, Phaser.Physics.ARCADE);
 
wallRight.body.bounce.set(1);
 
wallLeft = game.add.sprite(-80, 0, 'wall');
 
game.physics.enable(wallLeft, Phaser.Physics.ARCADE);
 
wallLeft.body.bounce.set(1);
 
ceiling = game.add.sprite(0, -80, 'wall2');
 
game.physics.enable(ceiling, Phaser.Physics.ARCADE);
 
ceiling.body.bounce.set(1);
 
floor = game.add.sprite(0, 599, 'wall2');
 
game.physics.enable(floor, Phaser.Physics.ARCADE);
 
floor.body.bounce.set(1);
 
fish = game.add.sprite(0, 250, 'fish');
fish.anchor.set(0.5);
fish.checkWorldBounds = true;
 
game.physics.enable(fish, Phaser.Physics.ARCADE);
 
fish.body.collideWorldBounds = true;
fish.body.bounce.set(1);
 
game.input.onDown.add(releasefish, this);
 
createKey.onDown.add(creation, this);
 
}
 
function creation () {
 
smallFish = game.add.sprite(300, 400, 'smallfish');
smallFish.anchor.set(0.5);
smallFish.checkWorldBounds = true;
 
game.physics.enable(smallFish, Phaser.Physics.ARCADE);
 
smallFish.body.collideWorldBounds = true;
smallFish.body.bounce.set(1);
 
smallFish.body.velocity.x = 300;
smallFish.body.velocity.y = 400;
}
 
function releasefish () {
 
if(begin = true){
begin = false;
fish.body.velocity.y = -500 - Math.random();
fish.body.velocity.x = -300 - Math.random();
 
wallLeft.x = -79;
wallRight.x = 799;
ceiling.y = -80;
floor.y = 599;
}
}
 
function update() {
 
game.physics.arcade.collide(fish, wallRight, fishHitRight, null, this);
game.physics.arcade.collide(fish, wallLeft, fishHitLeft, null, this);
game.physics.arcade.collide(fish, ceiling, fishHitCeiling, null, this);
game.physics.arcade.collide(fish, floor, fishHitFloor, null, this);
 
game.physics.arcade.collide(smallFish, wallRight, smallFishHitRight, null, this);
game.physics.arcade.collide(smallFish, wallLeft, smallFishHitLeft, null, this);
//game.physics.arcade.collide(smallFish, ceiling, smallFishHitCeiling, null, this);
//game.physics.arcade.collide(smallFish, floor, smallFishHitFloor, null, this);
 
game.physics.arcade.collide(fish, smallFish, eating, null, this);
}
 
function fishHitRight() {
 
var diff = 0;
 
fish.scale.x = -1;
wallLeft.x = -80;
ceiling.y = -80;
floor.y = 599;
 
    if (fish.y < wallRight.y) {
        diff = wallRight.y - fish.y;
        fish.body.velocity.y = (-2 * diff + Math.random());
    }
else if (fish.y > wallRight.y) {
        diff = fish.y - wallRight.y;
        fish.body.velocity.y = (2 * diff - Math.random());
    }
else {
        fish.body.velocity.y = 2 + Math.random() * 12;
    }
}
 
function fishHitLeft() {
 
var diff = 0;
 
fish.scale.x = 1;
wallRight.x = 799;
ceiling.y = -80;
floor.y = 599;
 
if (fish.y < wallLeft.y) {
        diff = wallLeft.y - fish.y;
        fish.body.velocity.y = (2 * diff - Math.random());
    }
else if (fish.y > wallLeft.y) {
        diff = fish.y - wallLeft.y;
        fish.body.velocity.y = (-2 * diff + Math.random());
    }
else {
        fish.body.velocity.y = 2 + Math.random() * 12;
    }
 
}
 
function fishHitCeiling() {
 
var diff = 0;
 
wallLeft.x = -80;
wallRight.x = 799;
floor.y = 599;
 
    if (fish.x < ceiling.x) {
        diff = ceiling.x - fish.x;
        fish.body.velocity.x = (-2 * diff + Math.random());
    }
else if (fish.x > ceiling.x) {
        diff = fish.x - ceiling.x;
        fish.body.velocity.x = (2 * diff - Math.random());
    }
else {
        fish.body.velocity.x = 2 + Math.random() * 12;
    }
}
 
function fishHitFloor() {
 
var diff = 0;
 
wallLeft.x = -80;
wallRight.x = 799;
ceiling.y = -80;
 
    if (fish.x < floor.x) {
        diff = floor.x - fish.x;
        fish.body.velocity.x = (-2 * diff + Math.random());
    }
else if (fish.x > floor.x) {
        diff = fish.x - floor.x;
        fish.body.velocity.x = (2 * diff - Math.random());
    }
else {
        fish.body.velocity.x = 2 + Math.random() * 12;
    }
}
 
function smallFishHitRight() {
 
smallFish.scale.x = -1;
wallLeft.x = -80;
}
 
function smallFishHitLeft() {
 
smallFish.scale.x = 1;
wallRight.x = 799;
 
}
 
function eating(fish, smallfish) {
 
smallFish.kill();
}
 
</script>
 
</body>
</html>
Link to comment
Share on other sites
InsaneHero Newbie

InsaneHero

Posted
Posted

There are a number of possible problems I noticed after a very quick look at your code:

 

For wallRight you seem to be checking the 'y' location instead of the 'x'.

 

You are doing some collision response code which looks like you're trying to set the fish new velocity to be based on how far it overlaps the wall it has contacted.  The Phaser physics system will deal with penetration and bounce, so you shouldn't need any of that code... and with the x vs y mix-up it is possibly the source of your problems.

 

The walls are right at the very edges of the screen (only 1 pixel sticking out), if your world is the same size as the screen and you have enabled world bounds then the fish is probably hitting the world bounds instead of the walls because it will move more than 1 pixel per frame.  I see that you set bounce to 1 for the walls, but that won't affect the world - so if your fish doesn't hit the walls it might not bounce properly.

 

immovable is definitely what you need for the walls, any other problems are something else so leave that turned on while you try fixing these other two problems and anything else you can find.

 

A small code style suggestion - if you have a number of 'things' which are all pretty much the same as each other and you need to collide against them, use a Group to bring them together.  It's not essential but it'll make your code easier to read with just one check for collision against 'wall group' instead of all those separate checks.

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

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