2D Processing.js游戏中的碰撞

Question

I have this Javascript code that uses the ProcessingJS library

 // Game var player = { x: 50, y: 100, width: 30, height: 30, speed: 10.5, score: 0 }; var food = { x: 200, y: 200, width: 30, height: 30, speed: 10.5 }; var up = 38; var down = 40; var left = 37; var right = 39; draw = function() { background(155, 154, 156); fill(0, 255, 85); rect(player.x,player.y,player.width,player.height); fill(245, 3, 3); rect(food.x,food.y,food.width,food.height); text('Score: ' + player.score,50,50); }; var collided = function(){ if (player.x < food.x + food.width && player.x + player.width > food.x && player.y < food.y + food.height && player.height + player.y > food.y) { return true; } else { return false; } }; keyPressed = function(){ switch(keyCode){ case up: player.y -= player.speed; break; case down: player.y += player.speed; break; case right: player.x += player.speed; break; case left: player.x -= player.speed; break; default: break; } if(collided()){ while(collided()){ if(/* condition */){ // Do What? }; } } }; 

I named an object "food" for some reason, so don't take that in mind. I'm trying to make it so that when the player collides with the "food" object, it will act as if the "food" object is a solid object and won't be able to pass through it (like you're trying to walk through a wall.)

I tried subtracting 1 from the player's X position until collision stops. I moved the player to collide with the side of the "food" object, and it worked. But when I collided at the top or bottom of the object, it moves the player to the edge of the object. I have no idea how to fix this, so help would be appreciated.

Answer 1

1) Instead of trying to guess where the player should go back to, I would start off by storing the player-position at the start of each keyPressed

keyPressed = function(){
    var oldX = player.x;
    var oldY = player.y;
    //do the other stuff

Now, if there is a collision, you can just set him back to the old location with player.x = oldX etc. Of course, this has the possibility of setting him back too far.

2) Instead, you can use something a bit closer to your approach. You know which direction the player is coming from because of the keyPressed and you know how far you need to move him back because you have the coordinates of 'food'. We can skip the "while(collided)if(condition)" and put another switch directly into the "if(collided)"

if(collided()){
    switch(keyCode){
        case up:
            player.y = food.y + food.height;
            break;
        case down:
            player.y = food.y - player.height;
            break;
        //etc.

3) Finally, it might be that you coded the continuous checking in because you want to add more obstacles and figured this the easiest way to make sure the player doesn't collide with anything. If that's the case, I would suggest you look up a bit more about how classes and objects work (if you want to code everything yourself) or look for a collision-library (if you want it to be more efficient). This hardcoded approach seems likely to give you headaches later on if you want to expand the scope of the game or add functionality.