0

我正在为大学作业制作游戏。这个想法是你通过画一条线（单击、拖动和释放来画一条线）来保护中心圈免受传入的小行星（线）的影响，从而阻止它们。撞击一条线的小行星应该摧毁这条线的小行星。

我目前遇到的问题是没有检测到碰撞。

我有一系列线和小行星的物体。线条由简单的开始和结束 x 和 y 组成，小行星由随机速度和随机角度（它们的入射角）组成 - 旋转上下文，绘制小行星，然后为下一行重置。

为了检测碰撞，我使用 getImageData 并在小行星前面进行检查，但是在该迭代中这条线会前进多少像素（基本上是它们的速度），如果颜色是红色，它将摧毁小行星 - 我还没有来得及破坏这条线，当我遇到它时会解决这个障碍（不过欢迎提出建议）。

function asteroids_draw() {
            for (var i = 0; i < asteroids.length; i++) {
                //  Drawing setup
                context.save();
                context.translate(width / 2, height / 2);
                context.rotate(asteroids[i].angle);             

                //  Detecting close asteroids
                if ((asteroids[i].distance - asteroids[i].speed) < planet.size) {
                    asteroids.splice(i, 1);
                    game_life_lost();
                    context.restore();      
                    return;

                } else if ((asteroids[i].distance - asteroids[i].speed) < 150){
                    asteroids[i].colour = '#FF0000';
                }

                //  Scanning ahead for lines                    
                for (var j = 0; j < asteroids[i].speed; j++) {
                    if (context.getImageData(asteroids[i].distance - j, 0, 1, 1).data[0] == 255) {                          
                        asteroids.splice(i, 1);
                        context.restore();      
                        return;
                    }
                }                   

                //  Drawing asteroid
                context.beginPath();
                context.moveTo(asteroids[i].distance -= asteroids[i].speed, 0);
                context.lineTo(trig, 0);
                context.strokeStyle = asteroids[i].colour; 
                context.stroke();               
                context.closePath();

                context.restore();      
            }
        }

问题是，小行星从不与线条相撞，我一生都无法理解为什么，或者看到另一种简单的方法。任何建议将不胜感激，在此先感谢。

4

2 回答 2

1

我认为您的问题是，当您旋转上下文时，先前绘制的项目（线）不会旋转，只有在旋转后绘制的对象才会旋转。请参阅此页面了解更多信息。

您可以在平移和旋转画布之前尝试执行小行星/线相交测试，并使用余弦和正弦来查找要从中获取图像数据的像素的 x 和 y 坐标。

var pixelLocation = 
    [Math.cos(asteroids[i].angle) * j, Math.sin(asteroids[i].angle) * j];
if (context.getImageData(pixelLocation[0], pixelLocation[1], 1, 1).data[0] == 255) {

在传递给 cos 和 sin 之前，请确保您的角度以弧度为单位。

于 2013-04-02T13:12:40.720 回答
0

我对这个问题进行了更多思考，并意识到这种做事方法绝对不是最好的方法。它应该在没有视图的情况下可行 - 一个模型视图控制器设计模式。解决它的最好方法是使用数学！

两条线的交点有简单的数学运算，但这需要一个范围内的两条线的交点。我找到了一种算法，它使用八个坐标进一步简化了这一点——两条线的开始 x 和 y 和结束 x 和 y。

我已经发布了结果。谢谢您的帮助。

于 2013-04-08T21:31:52.083 回答