html5画布对象碰撞和物理答案

【问题标题】：html5 canvas object collisions and physicshtml5画布对象碰撞和物理
【发布时间】：2012-07-05 12:02:30
【问题描述】：

我正在开发一个简单的 html5 平台游戏，构建以前的游戏，但遇到碰撞和物理问题。下面是关于地板及其如何处理碰撞的代码示例。完整的代码在这里。 http://www.ambitiongames.co.uk/dev/game.php 游戏在这里http://www.ambitiongames.co.uk/dev/

我遇到的问题是碰撞是基于事件抓取，有时玩家会留在地板上而不是在地板上。

此外，由于跳跃和下降的工作方式没有重力，这意味着玩家可以简单地跳上更高的壁架，然后走到空中。

设置永久重力状态的好方法是什么？

什么是与地板或其他物体交互/碰撞的好方法？

        that.draw = function(){  
            try {  
                ctx.drawImage(that.image, that.x, that.y, that.width, that.height);  
                } catch (e) {  
                }  
        } 
        return that;  
    };

    var nrOffloors = 40,   
        floors = [],  
        floorWidth = 20,  
        floorHeight = 40;  
        var generatefloor = function(){  

            for (var i = 0; i < 10; i++) {  
                floors[i] = new Floor(i * 20,280);   
            } 
            for (var i = 10; i < 12; i++) {  
                floors[i] = new Floor(i * 20,260);   
            } 
        }();

    var checkCollisionfloor = function(){  
        floors.forEach(function(e, ind){  
            if (   
                (player.X < e.x + floorWidth) &&   
                (player.X + player.width > e.x) &&   
                (player.Y + player.height > e.y) &&   
                (player.Y + player.height < e.y + floorHeight)  

                ) {  
                    e.onCollide();  
                } 
        });     
    }

【问题讨论】：

我无法加载游戏，这是一个相当宽泛的问题，但是在设计这样的游戏时，使用传统的面向对象的方法会让您受益匪浅。这样每个对象（玩家和/或其他任何东西）都可以跟踪自己的速度和加速度，并且重力的计算应该非常简单。您实际上只是将由于重力引起的恒定负加速度添加到现有加速度的对象中，并且您可以跟踪玩家的 Y 位置以确保它们不会低于 0（地面）
...要模拟撞击地面，您可以反转他们的速度，这将导致玩家反弹一点，最终重力将他们压住。
我明白你在说什么而不是 var Floor = function(x, y){ insert stuff here 它应该是 var StartButton = new Object(); 并相应地添加变量？

标签： javascript html html5-canvas game-physics collision

【解决方案1】：

您可以尝试像Box2D.js 这样的库。它处理从碰撞检测到重力的所有事情。

查看它的演示。

【讨论】：

这真的很酷，谢谢 :) 在玩了我所需要的之后。