Question

正如标题所示，我遇到了物体碰撞问题...... 我目前正在使用JavaScript进行2d Html5画布游戏。我知道如何防止“玩家”对象超出游戏画布的宽度/高度，并且我知道当玩家与物体碰撞时如何做某事（例如加电或敌人或其他什么）但我只是不知道如何制作一个“坚实”的物体，这意味着当玩家击中固体物体时，玩家只会停下来，并且无法穿过固体物体。

这就是我现在所拥有的（并非所有代码都是我认为相关的，对不起，如果它太多/太少了。：

  var canvasPlayer = document.getElementById('canvasPlayer');
var ctxPlayer = canvasPlayer.getContext('2d');
var canvasWalls = document.getElementById('canvasWalls');
var ctxWalls = canvasWalls.getContext('2d');

function checkKeyDown(e) {
        var keyID = (e.keyCode) || e.which;
        if (keyID === 38 || keyID === 87)   { // up arrow OR W key
        if (!player1.isDownKey && !player1.isLeftKey && !player1.isRightKey) {
        player1.isUpKey = true;
        e.preventDefault();
        } }
        if (keyID === 39 || keyID === 68)   { //right arrow OR D key
        if (!player1.isDownKey && !player1.isLeftKey && !player1.isUpKey) {
        player1.isRightKey = true;
        e.preventDefault();
        } }
        if (keyID === 40 || keyID === 83)   {//down arrow OR S key
        if (!player1.isUpKey && !player1.isLeftKey && !player1.isRightKey) {
        player1.isDownKey = true;
        e.preventDefault();
        } }
        if (keyID === 37 || keyID === 65)   {//left arrow OR A key
        if (!player1.isDownKey && !player1.isUpKey && !player1.isRightKey) {
        player1.isLeftKey = true;
        e.preventDefault();
        }
        }
    }

    Walls.prototype.draw = function (){
        ctxWalls.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        this.checkHitPlayer();
        };
    Walls.prototype.checkHitPlayer = function() {
        if (this.drawX > player1.drawX &&
        this.drawX <= player1.drawX + player1.width &&
        this.drawY >= player1.drawY &&
        this.drawY < player1.drawY + player1.height) {
        player1.isUpKey = false;
        player1.isDownKey = false;
        player1.isRightKey = false;
        player1.isLeftKey = false;
            }
    };

这样可行...除了尝试向上或向左移动时，玩家只能移动2-3个像素，因此向左或向上移动需要3个左箭头或向上箭头。玩家也可以直接穿过墙壁，这不是我想要的。任何帮助非常感谢抱歉，如果我包含太多或没有足够的代码。哦，我也忘了提到这个游戏是一个益智游戏，我有它设置，所以一个玩家一次只能移动一个方向，直到撞墙。

Answer 1

如果你只想让你的玩家在到达墙壁时停下来，你可以申请一些数学：

例如：假设您的播放器是10px x 10px矩形，右侧墙的X位置是200.

矩形右侧的X位置计算如下：

var playerRightSide = player.x + player.width;

您可以测试玩家是否已经到达墙壁：

if( playerRightSide >= 200 )

如果用户试图将他们的玩家推到墙外，你可以使用玩家X的位置将玩家保持在墙的左侧。

if( playerRightSide >= 200 ) { player.x = 190; }

190是墙的X位置（200）减去玩家的宽度（10）。

如果您对进行更高级的碰撞测试感兴趣，请进一步阅读。

许多基本游戏碰撞可分为3种类型：

圆与圆碰撞
矩形与矩形碰撞
矩形与圆形碰撞

以下是如何检测这些常见碰撞的说明。

假设你定义一个这样的圆圈：

var circle1={
    x:30,
    y:30,
    r:10
};

假设你定义一个这样的矩形：

var rect1={
    x:20,
    y:100,
    w:20,
    h:20
};

你可以像这样检测Circle vs Circle碰撞......

enter image description here

...使用Circle和Circle碰撞测试代码：

    // return true if the 2 circles are colliding
    // c1 and c2 are circles as defined above

    function CirclesColliding(c1,c2){
        var dx=c2.x-c1.x;
        var dy=c2.y-c1.y;
        var rSum=c1.r+c2.r;
        return(dx*dx+dy*dy<=rSum*rSum);
    }

您可以像这样检测矩形与矩形碰撞......

enter image description here

...使用此Rectangle vs Rectangle碰撞测试代码：

    // return true if the 2 rectangles are colliding
    // r1 and r2 are rectangles as defined above

    function RectsColliding(r1,r2){
        return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
    }

您可以像这样检测矩形与圆形碰撞......

enter image description here

...使用此Rectangle vs Circle碰撞测试代码：

    // return true if the rectangle and circle are colliding
    // rect and circle are a rectangle and a circle as defined above

    function RectCircleColliding(rect,circle){
        var dx=Math.abs(circle.x-(rect.x+rect.w/2));
        var dy=Math.abs(circle.y-(rect.y+rect.y/2));

        if( dx > circle.r+rect.w2 ){ return(false); }
        if( dy > circle.r+rect.h2 ){ return(false); }

        if( dx <= rect.w ){ return(true); }
        if( dy <= rect.h ){ return(true); }

        var dx=dx-rect.w;
        var dy=dy-rect.h
        return(dx*dx+dy*dy<=circle.r*circle.r);
    }

例如，您可以使用这些碰撞测试来响应接触加电立方体的玩家：

    // create a circular player object
    // that's located at [30,30] and has a radius of 10px

    var player={x:30,y:30,r:10};


    // create a rectangular power-up at position [200,30]

    var powerup={x:200, y:30, w:20, h:20};


    // Let's say the user keys the player to coordinate [200,35] 
    // (touching the power-up)

    player.x = 220;
    player.y = 35;


    // you can test if the circular player is touching the rectangular power-up

    if( RectCircleColliding(powerup,player)  ) {

        // the player has collided with the power-up, give bonus power!

        player.power += 100;

    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/u6t48/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

        ctx.fillStyle="lightgray";
        ctx.strokeStyle="skyblue";

        // top collision circle vs circle
        var circle1={x:30,y:30,r:10};
        var circle2={x:70,y:40,r:10};
        var circle3={x:100,y:30,r:10};
        var direction1=1;

        // middle collision rect vs rect
        var rect1={x:20,y:100,w:20,h:20};
        var rect2={x:50,y:110,w:20,h:20};
        var rect3={x:90,y:100,w:20,h:20};
        var direction2=1;

        // bottom collision rect vs circle
        var circle4={x:30,y:200,r:10};
        var rect4={x:50,y:205,w:20,h:20};
        var circle5={x:100,y:200,r:10};
        var direction3=1;


        function drawAll(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            drawCircle(circle1);
            drawCircle(circle2);
            drawCircle(circle3);
            drawCircle(circle4);
            drawCircle(circle5);
            drawRect(rect1);
            drawRect(rect2);
            drawRect(rect3);
            drawRect(rect4);
        }

        function drawCircle(c){
            ctx.beginPath();
            ctx.arc(c.x,c.y,c.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        function drawRect(r){
            ctx.beginPath();
            ctx.rect(r.x,r.y,r.w,r.h);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        // return true if the 2 circles are colliding
        function CirclesColliding(c1,c2){
            var dx=c2.x-c1.x;
            var dy=c2.y-c1.y;
            var rSum=c1.r+c2.r;
            return(dx*dx+dy*dy<=rSum*rSum);
        }

        // return true if the 2 rectangles are colliding
        function RectsColliding(r1,r2){
            return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
        }

        // return true if the rectangle and circle are colliding
        function RectCircleColliding(rect,circle){
            var dx=Math.abs(circle.x-(rect.x+rect.w/2));
            var dy=Math.abs(circle.y-(rect.y+rect.h/2));

            if( dx > circle.r+rect.w/2 ){ return(false); }
            if( dy > circle.r+rect.h/2 ){ return(false); }

            if( dx <= rect.w ){ return(true); }
            if( dy <= rect.h ){ return(true); }

            var dx=dx-rect.w;
            var dy=dy-rect.h
            return(dx*dx+dy*dy<=circle.r*circle.r);
        }

        var fps = 15;
        function animate() {
            setTimeout(function() {
                requestAnimFrame(animate);

                // circle vs circle
                circle2.x = circle2.x+direction1;
                if( CirclesColliding(circle2,circle1) || CirclesColliding(circle2,circle3)  ){ 
                    direction1=-direction1; 
                }

                // rect vs rect
                rect2.x = rect2.x+direction2;
                if( RectsColliding(rect2,rect1) || RectsColliding(rect2,rect3) ){
                    direction2=-direction2;
                }

                // rect vs circle
                rect4.x = rect4.x+direction3;
                if( RectCircleColliding(rect4,circle4) || RectCircleColliding(rect4,circle5) ){
                    direction3=-direction3;
                }

                drawAll();

            }, 1000 / fps);
        }

        animate();

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

2d html5画布碰撞，howto

1 个答案: