Jump to content

My walls are disappearing


bloodbarron115
 Share

Recommended Posts

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

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

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

  • Recently Browsing   0 members

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