Question

我正在为一项大学任务game工作。这个想法是你通过画一条线（点击，拖动和释放以绘制一条线）来阻挡它们，从而通过传入的小行星（线）来保护中心圆。撞击线的小行星应该破坏该行的小行星。

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

我有两条线的对象数组＆amp;小行星。这些线条简单地包括start＆amp;结束x＆amp; y，小行星由随机速度组成。随机角度（它们的入射角度） - 旋转上下文，绘制小行星，＆amp;然后重置为下一行。

为了检测碰撞，我使用了getImageData＆amp;检查小行星前面然而很多像素线将在该迭代中进展（基本上，它们的速度）＆amp;如果颜色是红色，它会摧毁小行星 - 我还没有完成破坏线路，当我来到它时会解决这个障碍（尽管建议很受欢迎）。

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();      
            }
        }

问题是，小行星永远不会与线路碰撞。我不能为我的生活看到原因，或者看到另一种简单的做法。任何建议都会非常感谢，提前谢谢。

Answer 1

我认为您的问题是，当您旋转上下文时，先前绘制的项（线）不会旋转，只有旋转后绘制的对象才会旋转。 See this page for more info

您可以在平移和旋转画布之前尝试执行小行星/线交叉测试，并使用余弦和正弦来查找要从中获取图像数据的像素的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和罪之前，确保你的角度是弧度。

Answer 2

我更多地考虑了这个问题，＆amp;意识到这种做事方法肯定不是最好的方法。没有视图应该是可行的 - 模型视图控制器设计模式。解决问题的最佳方法是使用数学！

两条线的交点有简单的数学运算，但这需要在一个范围内交叉两条线。我发现an algorithm使用八个坐标 - 开始x＆amp; y＆amp;结束x＆amp;这两条线中的一条。

我发布了results。谢谢你的帮助。

JavaScript中的画布上的碰撞检测

2 个答案: