Collision won't work by two of the four things

KnTproject · October 19, 2016

Hello,

I have a problem with collisions, because I added four times collisions, but by two of that it won't work (names "steen" and "steen1"). I don't know why it doesn't work, because I did the same things as the other two. The only difference is that by "steen" and "steen1" I won't refer to a function, which I do by the other two because of kill().

The function of the "steen" and "steen1" is that the car won't drive over the grass. I placed an opacity wall over the background, so that you can't drive from the road.

Does anybody knows a solution/

Code:

var road;
var turtle;
var steen;
var steen1;
var cursors;
var controls = {};
var auto;
var melon;

var playState = {
   preload: function(){
       game.load.image('turtle',    'assets/turtles.png');
       game.load.image('road',    'assets/road.jpg');
       game.load.image('steen',   'assets/steen.jpg');
       game.load.image('steen1',   'assets/steen.jpg');
       game.load.image('auto',    'assets/car.png');
       game.load.image('melon',    'assets/watermelon.png');

   },

create:function(){
game.physics.startSystem(Phaser.Physics.ARCADE);

//Background
road = game.add.tileSprite(0,0,1250,700,'road');
game.physics.arcade.enable(road);

//MuurLinks
steen = game.add.sprite(97,0,'steen');
game.physics.arcade.enable(steen);
steen.body.immovable = true;
steen.width = 92;
steen.height = 700;
steen.alpha = 1;

//MuurRechts
steen1 = game.add.sprite(1078,0,'steen1');
game.physics.arcade.enable(steen1);
steen1.body.immovable = true;
steen1.width = 92;
steen1.height = 700;
steen1.alpha = 1;

//SchildpadKarakter
turtle = game.add.sprite(546,250,'turtle');
game.physics.arcade.enable(turtle);
turtle.width = 162;
turtle.height = 226;
turtle.body.immovable = true;

//VerzamelobjectMeloen
melon = game.add.sprite(830,100,'melon');
game.physics.arcade.enable(melon);
melon.body.immovable = true;
melon.anchor.setTo(0.5);
melon.scale.setTo(0.3);

//VijandAuto
auto = game.add.sprite(440,0,'auto');
game.physics.arcade.enable(auto);
auto.anchor.setTo(0.5);
auto.scale.setTo(0.3);
auto.body.immovable = true;

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

controls = {
right: this.input.keyboard.addKey(Phaser.Keyboard.D),
left: this.input.keyboard.addKey(Phaser.Keyboard.A),

};

},

   update:function(){
    //Achtergrond verandering
       road.tilePosition.y += 3;

       //Besturing turtle
       turtle.body.collideWorldBounds = true;
       turtle.body.velocity.x = 0;

if (controls.left.isDown){
turtle.body.velocity.x = -200;
}

if (controls.right.isDown){
turtle.body.velocity.x = 200;
}

//Collision auto
auto.body.velocity.y = 200;
game.physics.arcade.collide(turtle,auto,this.gameover,null,this);

       //Collision melon
       melon.body.velocity.y = 100;
       game.physics.arcade.collide(turtle,melon,this.collectMelon,null,this);

       //Collision steen
       game.physics.arcade.collide(turtle,steen);
       game.physics.arcade.collide(turtle,steen1);
   },

collectMelon:function(){
melon.kill();

},

gameover:function(){
game.state.start('over');

},

   Finish:function(){
       game.state.start('win');
   }

};

rhennig · October 19, 2016

Try to give them a body, like:

steen.enableBody = true;

KnTproject · October 20, 2016

13 hours ago, rufflezs said:
Try to give them a body, like:
steen.enableBody = true;

Thanks for your response, but I tried that already and it won't work.....

Anybody else?

rhennig · October 20, 2016

try to add gravity, like:

physics.startSystem(Phaser.Physics.ARCADE);
physics.arcade.gravity.y = 0;
    
road = this.add.tileSprite(0,0,1250,700,'road');
physics.arcade.enable(road);
    
steen = this.add.sprite(97,0,'steen');
steen.enableBody=true;
physics.arcade.enable(steen);
steen.body.immovable = true;
steen.width = 92;
steen.height = 700;
steen.alpha = 1;
...

KnTproject · October 21, 2016

13 hours ago, rufflezs said:

try to add gravity, like:


physics.startSystem(Phaser.Physics.ARCADE);
physics.arcade.gravity.y = 0;
    
road = this.add.tileSprite(0,0,1250,700,'road');
physics.arcade.enable(road);
    
steen = this.add.sprite(97,0,'steen');
steen.enableBody=true;
physics.arcade.enable(steen);
steen.body.immovable = true;
steen.width = 92;
steen.height = 700;
steen.alpha = 1;
...

Hello! Thanks for your response, but that also won't work....

I don't understand why it won't response to game.physics.arcade.collide(..,..); I did this a few times before, but there it worked.

rhennig · October 21, 2016

http://funs2.com/funs2/games/ex/car_ex/

<html>
<head>
<title>
Car Example
</title>
    <meta charset="utf-8">
    <meta name="landscape" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
    <script type="text/javascript" src="js/phaser6.2.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div align="center">
    <div id="pgame"></div>   
</div>
<div id="wrongWay"></div>
<script>
var game= new Phaser.Game(this.window.innerWidth, this.window.innerHeight, Phaser.AUTO, "pgame",{preload: preload, create: create, update: update});

function preload()
{
    this.load.image('road','as/road.jpg');
    this.load.image('steen','as/steen.jpg');
    this.load.image('steen1','as/steen.jpg');
    this.load.image('auto','as/auto.jpg');
    this.load.image('melon','as/melon.jpg');
    this.load.image('turtle', 'as/turtle.jpg');
}
    
function create()
{
    this.physics.startSystem(Phaser.Physics.ARCADE);
    this.physics.arcade.gravity.y = 0;
    
    this.road = this.add.tileSprite(0,0,1250,700,'road');
    this.physics.arcade.enable(this.road);
    
    this.steen = this.add.sprite(97,0,'steen');
    this.steen.enableBody=true;
    this.physics.arcade.enable(this.steen);
    this.steen.body.immovable = true;
    this.steen.width = 92;
    this.steen.height = 700;
    this.steen.alpha = 1;
    //this.steen.body.allowGravity = false;
    this.steen1 = this.add.sprite(1078,0,'steen1');
    this.steen1.enableBody=true;
    this.physics.arcade.enable(this.steen1);
    this.steen1.body.immovable = true;
    this.steen1.width = 92;
    this.steen1.height = 700;
    this.steen1.alpha = 1;
    
    this.turtle = this.add.sprite(546,400,'turtle');
    this.turtle.enableBody=true;
    this.physics.arcade.enable(this.turtle);
    this.turtle.width = 162;
    this.turtle.height = 226;
    this.turtle.body.allowGravity = false;
    
    this.melon = this.add.sprite(830,100,'melon');
    this.physics.arcade.enable(this.melon);
    this.melon.body.immovable = true;
    this.melon.anchor.setTo(0.5);
    this.melon.scale.setTo(0.3);
    
    this.auto = this.add.sprite(440,0,'auto');
    this.physics.arcade.enable(this.auto);
    this.auto.anchor.setTo(0.5);
    this.auto.scale.setTo(0.3);
    this.auto.body.immovable = true;
    
    this.controls = {
          right: this.input.keyboard.addKey(Phaser.Keyboard.D),
          left: this.input.keyboard.addKey(Phaser.Keyboard.A),
          
        };
}
    
function update()
{
    this.road.tilePosition.y += 3;
    if (this.controls.left.isDown){
      this.turtle.body.velocity.x = -200;  
    }

    if (this.controls.right.isDown){
        this.turtle.body.velocity.x = 200;
    }
    
    this.auto.body.velocity.y = 200;
    this.melon.body.velocity.y = 100;
    
    this.physics.arcade.collide(this.turtle,this.melon,function(){alert("a melon!");this.melon.kill();},null,this);
    this.physics.arcade.collide(this.turtle,this.auto,function(){alert("gameover!");this.state.restart();},null,this);
    this.physics.arcade.collide(this.steen,this.turtle);
    this.physics.arcade.collide(this.steen1,this.turtle);
}
</script>
</body>
</html>

KnTproject · October 22, 2016

13 hours ago, rufflezs said:

http://funs2.com/funs2/games/ex/car_ex/


<html>
<head>
<title>
Car Example
</title>
    <meta charset="utf-8">
    <meta name="landscape" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
    <script type="text/javascript" src="js/phaser6.2.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div align="center">
    <div id="pgame"></div>   
</div>
<div id="wrongWay"></div>
<script>
var game= new Phaser.Game(this.window.innerWidth, this.window.innerHeight, Phaser.AUTO, "pgame",{preload: preload, create: create, update: update});

function preload()
{
    this.load.image('road','as/road.jpg');
    this.load.image('steen','as/steen.jpg');
    this.load.image('steen1','as/steen.jpg');
    this.load.image('auto','as/auto.jpg');
    this.load.image('melon','as/melon.jpg');
    this.load.image('turtle', 'as/turtle.jpg');
}
    
function create()
{
    this.physics.startSystem(Phaser.Physics.ARCADE);
    this.physics.arcade.gravity.y = 0;
    
    this.road = this.add.tileSprite(0,0,1250,700,'road');
    this.physics.arcade.enable(this.road);
    
    this.steen = this.add.sprite(97,0,'steen');
    this.steen.enableBody=true;
    this.physics.arcade.enable(this.steen);
    this.steen.body.immovable = true;
    this.steen.width = 92;
    this.steen.height = 700;
    this.steen.alpha = 1;
    //this.steen.body.allowGravity = false;
    this.steen1 = this.add.sprite(1078,0,'steen1');
    this.steen1.enableBody=true;
    this.physics.arcade.enable(this.steen1);
    this.steen1.body.immovable = true;
    this.steen1.width = 92;
    this.steen1.height = 700;
    this.steen1.alpha = 1;
    
    this.turtle = this.add.sprite(546,400,'turtle');
    this.turtle.enableBody=true;
    this.physics.arcade.enable(this.turtle);
    this.turtle.width = 162;
    this.turtle.height = 226;
    this.turtle.body.allowGravity = false;
    
    this.melon = this.add.sprite(830,100,'melon');
    this.physics.arcade.enable(this.melon);
    this.melon.body.immovable = true;
    this.melon.anchor.setTo(0.5);
    this.melon.scale.setTo(0.3);
    
    this.auto = this.add.sprite(440,0,'auto');
    this.physics.arcade.enable(this.auto);
    this.auto.anchor.setTo(0.5);
    this.auto.scale.setTo(0.3);
    this.auto.body.immovable = true;
    
    this.controls = {
          right: this.input.keyboard.addKey(Phaser.Keyboard.D),
          left: this.input.keyboard.addKey(Phaser.Keyboard.A),
          
        };
}
    
function update()
{
    this.road.tilePosition.y += 3;
    if (this.controls.left.isDown){
      this.turtle.body.velocity.x = -200;  
    }

    if (this.controls.right.isDown){
        this.turtle.body.velocity.x = 200;
    }
    
    this.auto.body.velocity.y = 200;
    this.melon.body.velocity.y = 100;
    
    this.physics.arcade.collide(this.turtle,this.melon,function(){alert("a melon!");this.melon.kill();},null,this);
    this.physics.arcade.collide(this.turtle,this.auto,function(){alert("gameover!");this.state.restart();},null,this);
    this.physics.arcade.collide(this.steen,this.turtle);
    this.physics.arcade.collide(this.steen1,this.turtle);
}
</script>
</body>
</html>

Wow.... thank you very very much! It works! Why did you add 'this' in the whole code? And can I split the sentence below for example in a sentence and a function?

this.physics.arcade.collide(this.turtle,this.melon,function(){alert("a melon!");this.melon.kill();},null,this);

And does anybody has an idea of how to drive cars from y = 0 to y = 1000 at different positions the whole time? I want to make a game where you have to avoid cars, because if you collide with them then it's game over. (Rival Rush, Flappy bird). Do you have good ideas of how to make that?

rhennig · October 22, 2016

You really dont need to use "this." in this example, you can take it off... As the example runs inside the game object, the "this." keyword is used most of the times here to replace the "game." keyword, as you can see in comparisson to your code... As as we dont have more objects here there is no reason to use it, but I don't like to use global vars for some reason...

Yes, you can replace the code:

function(){alert("a melon!");this.melon.kill();}

For a normal function(as you did in your code). This is a anonymous function and I some use it to avoid to write a new function for the test.

For the cars spawn you probably will need randoms (to spawn in different positions) and groups(to make a group of cars and recycle them, if you need multiple cars on the screen). I think this examples can help you to start.

http://phaser.io/examples/v2/misc/random-generators

http://phaser.io/examples/v2/groups/recycling

KnTproject · October 22, 2016

Hello,

I am sorry, but a new question :wacko: .

I just add a code a car appears the whole time on a screen, but know I want to have the cars every time on one of these numbers 150, 300, 450, 600. There may also appear more cars, so two or three at the same time or just one, that doesn't matter.

The other thing is that the collision, which we discussed in earlier comments, they disappear. It won't work anymore?

Does anybody knows a solution for the collision problem and the cars problem? Sorry if my questions are annoying :unsure:

var road;
var turtle;
var steen;
var steen1;
var cursors;
var controls = {};
var auto;
var melon;
var rect;
var car;

var playState = {
   preload: function(){
       this.load.image('turtle',    'assets/turtles.png');
       this.load.image('road',    'assets/road.png');
       this.load.image('steen',   'assets/steen.jpg');
       this.load.image('steen1',   'assets/steen.jpg');
       this.load.image('auto',    'assets/car.png');
this.load.image('car', 'assets/car.png');
       this.load.image('melon',    'assets/watermelon.png');

   },

create:function(){
this.physics.startSystem(Phaser.Physics.ARCADE);
this.physics.arcade.gravity.y = 0;

this.road = this.add.tileSprite(0,0,1250,700,'road');
this.physics.arcade.enable(this.road);

this.steen = this.add.sprite(25,0,'steen');
this.steen.enableBody = true;
this.physics.arcade.enable(this.steen);
this.steen.body.immovable = true;
this.steen.width = 92;
this.steen.height = 700;
this.steen.alpha = 0;

this.steen1 = this.add.sprite(889,0,'steen1');
this.steen1.enableBody = true;
this.physics.arcade.enable(this.steen1);
this.steen1.body.immovable = true;
this.steen1.width = 92;
this.steen1.height = 700;
this.steen1.alpha = 0;

this.turtle = this.add.sprite(440,450,'turtle');
this.turtle.enableBody = true;
this.physics.arcade.enable(this.turtle);
this.turtle.anchor.setTo(0.5);
this.turtle.scale.setTo(0.2);
this.turtle.body.allowGravity = false;
this.turtle.body.immovable = true;

this.melon = this.add.sprite(830,100,'melon');
this.physics.arcade.enable(this.melon);
this.melon.body.immovable = true;
this.melon.anchor.setTo(0.5);
this.melon.scale.setTo(0.2);

//this.auto = this.add.sprite(200,0,'auto');
// this.physics.arcade.enable(this.auto);
//this.auto.anchor.setTo(0.5);
// this.auto.scale.setTo(0.3);
// this.auto.body.immovable = true;

this.controls = {
right: this.input.keyboard.addKey(Phaser.Keyboard.D),
left: this.input.keyboard.addKey(Phaser.Keyboard.A),
};

this.cars = game.add.group();
this.timer = game.time.events.loop(4000, this.addRowOfPipes, this);

},

update:function(){
this.road.tilePosition.y += 3;
this.turtle.body.collideWorldBounds = true;
this.turtle.body.velocity.x = 0;

if (this.controls.left.isDown){
this.turtle.body.velocity.x = -300;
}

if (this.controls.right.isDown){
this.turtle.body.velocity.x = 300;
}

this.physics.arcade.collide(this.turtle,this.cars,this.gameover,null,this);
// this.auto.body.velocity.y = 200;

this.physics.arcade.collide(this.turtle,this.melon,function(){this.melon.kill();},null,this);
this.melon.body.velocity.y = 100;

this.physics.arcade.collide(this.turtle, this.steen);
this.physics.arcade.collide(this.turtle, this.steen1);

},

addOnePipe: function(x, y) {
var car = game.add.sprite(130, -250, 'car');

this.cars.add(car);

car.scale.setTo(0.3);
game.physics.arcade.enable(car);
car.body.velocity.y = 200;
car.checkWorldBounds = true;
car.outOfBoundsKill = true;
car.body.immovable = true;
},

addRowOfPipes: function() {
// Randomly pick a number between 1 and 5
// This will be the hole position
var hole = Math.floor(Math.random() * 5) + 1;

// Add the 6 pipes
// With one big hole at position 'hole' and 'hole + 1'
for (var i = 0; i < 4; i++)
if (i != hole && i != hole + 1)
this.addOnePipe(i, 10000);
},

collectMelon:function(){
melon.kill();

},

gameover:function(){
game.state.start('over');

},

   Finish:function(){
       game.state.start('win');
   }

};

Sign In

Collision won't work by two of the four things

Recommended Posts

KnTproject

Link to comment

Share on other sites

rhennig

Link to comment

Share on other sites

KnTproject

Link to comment

Share on other sites

rhennig

Link to comment

Share on other sites

KnTproject

Link to comment

Share on other sites

rhennig

Link to comment

Share on other sites

KnTproject

Link to comment

Share on other sites

rhennig

Link to comment

Share on other sites

KnTproject

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity