Javascript画布碰撞检测 [英] Javascript canvas collision detection

问题描述

我正在使用需要碰撞检测的画布在 Javascript 中构建游戏，在这种情况下，如果玩家精灵击中一个盒子，则不允许玩家通过盒子.

I'm building a game in Javascript using canvas which requires collision detection, in this case if the player sprite hits a box, the player must not be allowed through the box.

我有一个名为 blockList 的全局数组，用于保存所有绘制到画布上的框.它看起来像这样:

I have a global array called blockList that holds all the boxes being drawn to the canvas. It looks like this:

var blockList = [[50, 400, 100, 100]];

他们像这样被吸引到画布上:

And they're being drawn to the canvas like this:

c.fillRect(blockList[0][0], blockList[0][1], blockList[0][2], blockList[0][3]);

我还有一个播放器对象，它有一个更新方法和一个绘制方法.更新根据键盘输入等设置玩家的位置，主游戏循环使用 draw 将玩家绘制到画布上.玩家是这样绘制的:

I also have a player object, which has an update method and a draw method. Update sets the position of the player based on keyboard input etc, and draw is used by the main game loop to draw the player to the canvas. The player is being drawn like this:

this.draw = function(timestamp) {
        if(this.state == "idle") {
            c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
            if(timestamp - this.lastDraw > this.idleSprite.updateInterval) {
                this.lastDraw = timestamp;
                if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
            }
        } else if(this.state == "running") {
            var height = 0;
            if(this.facing == "left") { height = 37; }
            c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, height, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
            if(timestamp - this.lastDraw > this.runningSprite.updateInterval) {
                this.lastDraw = timestamp;
                if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
            }
        }
    }

现在，播放器的某些属性是player.xpos、player.ypos、player.width、player.height.块存在相同的属性.所以我拥有实现碰撞检测所需的一切，我只是不知道该怎么做.我试过做这样的事情:

Now, the player has certain properties being player.xpos, player.ypos, player.width, player.height. The same properties exist for the blocks. So I have everything I need to impliment collision detection, I just have no idea how to do it. I've tried doing things like:

if(player.x > blockList[0][0] && player.y > blockList[0][1])

但它远非完美或可玩.

有谁知道一个简单的方法或函数可以根据两个对象是否发生碰撞来返回真或假?

Does anyone know of a simple method or function to be able to return true or false based on if two objects are colliding?

推荐答案

我使用以下函数来检测两个矩形之间的碰撞:

I use the following function for collision detection between two rectangles:

rect_collision = function(x1, y1, size1, x2, y2, size2) {
  var bottom1, bottom2, left1, left2, right1, right2, top1, top2;
  left1 = x1 - size1;
  right1 = x1 + size1;
  top1 = y1 - size1;
  bottom1 = y1 + size1;
  left2 = x2 - size2;
  right2 = x2 + size2;
  top2 = y2 - size2;
  bottom2 = y2 + size2;
  return !(left1 > right2 || left2 > right1 || top1 > bottom2 || top2 > bottom1);
};

这确定两个正方形是否以 (x1, y1) 和 (x2, y2) 为中心，边长为 2*size1和 2*size2 分别重叠.更改 left1、right1 等的定义以处理一般矩形而不仅仅是正方形并使用不同的数据格式应该很容易.

This determines whether two squares, centered at (x1, y1) and (x2, y2), with side lengths 2*size1 and 2*size2, respectively, are overlapping. It should be easy enough to alter the definitions of left1, right1, etc. to deal with general rectangles rather than just squares and to use a different data format.

具体来说，left1是第一个正方形的左边，right1是右边，等等.注意，在我的坐标系中，y轴是倒置 (top1 bottom1).

Specifically, left1 is the left side of the the first square, right1 the right side, etc. Note that, in my coordinate system, the y-axis is inverted (top1 < bottom1).

这篇关于Javascript画布碰撞检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！