Javascript冲突（非冲突检测）

Question

I'm trying to make a platforming game, and I've been working on the collision for the past 2 weeks. The collision detection is working, but the collision itself (as in, keeping the player out of the tile) is not, no matter what I try. I've tried looking up how to do this, but all I'm finding is how to do the detection part, which I already have done. What do I do after I detect collision? It was written from scratch, and the player is rectangular, and so are the tiles. Here's the basic code:

var Player = function(hue, x, y, xSize, ySize, health) {
    this.hue = hue;
    this.position = new PVector(x, y);
    this.originalPosition = new PVector(x, y);
    //this.previousPosition = new PVector(x, y);
    //this.ppp = new PVector(x, y);
    //this.virtualPosition = new PVector(x, y);
    //this.predictedPosition = new PVector(x, y);
    this.velocity = new PVector(0, 0);
    //this.predictedVelocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
}
/*Player.prototype.testCollision = function(tile) {
    if (this.predictedPosition.y < tile.position.y + tile.size.y && this.predictedPosition.y + this.size.y > tile.size.y && this.predictedPosition.x < tile.position.x + tile.size.x && this.predictedPosition.x + tile.size.x > tile.position.x) {
        return false;
    } else {
        return true;
    }
};*/
Player.prototype.ifColliding = function(tile) {
     if (this.position.x < tile.position.x + tile.size.x && this.position.x + tile.size.x > tile.position.x) {
        /*if (this.position.x + this.size.x > tile.position.x) {
            this.position.set(tile.position.x - this.size.x, this.position.y);
        } else if (this.position.x < tile.position.x + tile.size.x) {
            this.position.set(tile.position.x + tile.size.x, this.position.y);
        }*/
        this.velocity.set(0, this.velocity.y);
        //this.acceleration.set(0, this.acceleration.y);
        /*if (this.ppp.x < tile.position.x + tile.size.x && this.ppp.x + tile.size.x > tile.position.x) {
           if (this.ppp.x + this.size.x > tile.position.x) {
                this.position.set(tile.position.x - this.size.x, this.position.y);
            } else if (this.ppp.x < tile.position.x + tile.size.x) {
                this.position.set(tile.position.x + tile.size.x, this.position.y);
            } 
        } else if (this.previousPosition.x < tile.position.x + tile.size.x && this.previousPosition.x + tile.size.x > tile.position.x) {
            this.position.set(this.ppp.x, this.position.y);
        } else {
            this.position.set(this.previousPosition.x, this.position.y);
        }*/
    }
    if (this.position.y < tile.position.y + tile.size.y && this.position.y + this.size.y > tile.size.y) {
        this.velocity.set(this.velocity.x, 0);
        this.acceleration.set(this.acceleration.x, 0);
        this.yColliding = true;
        /*if (this.position.y + this.size.y > tile.position.y) {
            this.position.set(this.position.x, tile.position.y - this.size.y);
            rect(0, 20, 0, 0);
        } else if (this.position.y < tile.position.y + tile.size.y) {
            this.position.set(this.position.x, tile.position.y + tile.size.y);
            rect(20, 20, 0, 0);
        }*/
    }
}
Player.prototype.update = function(tiles) {
    //this.ppp.set(this.previousPosition.x, this.previousPosition.y);
    //this.previousPosition.set(this.position.x, this.position.y);
    this.velocity.add(this.acceleration);
    /*this.predictedVelocity.set(this.velocity.x, this.velocity.y);
    this.predictedVelocity.add(this.acceleration);
    this.virtualPosition.set(this.position.x, this.position.y);
    this.virtualPosition.add(this.velocity);
    this.predictedPosition.set(this.virtualPosition.x, this.virtualPosition.y);
    this.predictedPosition.add(this.predictedVelocity);
    var collDcted = false;
    for (var i = 0; i < tiles.length; i++) {
        if (this.testCollision(tiles[i], true) === false) {
             collDcted = false;
        }
    }*/
    //if (collDcted) {
    this.position.add(this.velocity);
    //}
}

The commented out code is failed attempts. The non-commented code is the closest I could get it to working.

Answer 1

This is a sample collision I made:

 <!DOCTYPE html> <html> <body> <p id="Health">Health</p> <canvas id="gameCanvas" width="600" height="480" style = "border:1px solid gray"></canvas> <script> // Adding keyboard evt listener document.addEventListener("keydown", keyPressed); document.addEventListener("keyup", keyReleased); //defining canvas var canvas; var canvasContext; //defining Player variables var PLAYER_X = 100; var PLAYER_Y = 100; var PLAYER_WIDTH = 20; var PLAYER_HEIGHT = 20; var PLAYER_HEALTH = 100; //defining keypress codes var KEY_LEFT = 37; var KEY_RIGHT = 39; var KEY_UP = 38; var KEY_DOWN = 40; //variables used to test movement var keyHeld_Up = false; var keyHeld_Down = false; var keyHeld_Left = false; var keyHeld_Right = false; //Keypress? function keyPressed(evt) { if(evt.keyCode == KEY_UP) { keyHeld_Up = true; } if(evt.keyCode == KEY_DOWN) { keyHeld_Down = true; } if(evt.keyCode == KEY_LEFT) { keyHeld_Left = true; } if(evt.keyCode == KEY_RIGHT) { keyHeld_Right = true; } //prevents page from scrolling when arrow keys are pressed evt.preventDefault(); } //Key Released? function keyReleased(evt) { if(evt.keyCode == KEY_UP) { keyHeld_Up = false; } if(evt.keyCode == KEY_DOWN) { keyHeld_Down = false; } if(evt.keyCode == KEY_LEFT) { keyHeld_Left = false; } if(evt.keyCode == KEY_RIGHT) { keyHeld_Right = false; } } //Initialize Canvas and Game Loop window.onload = function() { console.log("Is this thing on?"); canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); var framesPerSecond = 30; setInterval(function() { drawObjects(); movePlayer(); damageTest(); }, 1000/framesPerSecond); } // Drawing function function colorRect(x,y, width,height, color, health) { this.width = width; this.height = height; this.x = x; this.y = y; this.color = color; this.health = health; this.update = function() { this.draw(); } this.draw = function() { canvasContext.beginPath(); canvasContext.rect(this.x, this.y, this.width, this.height); canvasContext.fillStyle = this.color; canvasContext.fill(); canvasContext.closePath(); } }; // Creating Objects var Screen = new colorRect( 0, 0, 600, 480, 'black', 0); var Player = new colorRect( PLAYER_X, PLAYER_Y, PLAYER_WIDTH, PLAYER_HEIGHT, 'red', PLAYER_HEALTH); var Box = new colorRect( 200, 200, 30, 30, 'green', 0); var Spike = new colorRect( 300, 300, 25, 25, 'white', 0); // Drawing Objects function drawObjects() { Screen.update(); Spike.update(); Player.update(); Box.update(); } //Collision Test function collides( a, b ) { return ax < bx + b.width && ax + a.width > bx && ay < by + b.height && ay + a.height > by; } //Movement based on keypress events function movePlayer() { if(collides( Player, Box ) === false) { if(keyHeld_Up) { Player.y -= 2; } if(keyHeld_Down) { Player.y += 2; } if(keyHeld_Left) { Player.x -= 2; } if(keyHeld_Right) { Player.x += 2; } } } //Testing Collision for damage function damageTest() { if(collides( Player, Spike ) === true) { Player.health -= 1; } //Displaying Health in <body> document.getElementById("Health").innerHTML = "Health: " + Player.health; } </script> </body> </html> 

The code I made stops the player in its tracks completely when hitting the box, but you could create individual collision circumstances for when objects collide on each side of another object, and use those to detect collision.

I hope this helped! If you have any questions regarding this code, just ask! (To run code snippet you might want to go full screen and click inside canvas)