PaperJS随机点

时间:2016-01-25 23:24:38

标签: javascript paperjs

我有这个代码。我想要的代码是让球移动,当球越过灰点(洞)时,它会回到起点。我通过为灰洞创建一个随机位置来做到这一点。我只需要找到一种方法来定义这些孔的位置,即使它们是随机的。

var startPoint = new Path.Circle(new Point(40, 40), 40);
startPoint.fillColor = "green";

//finishPoint 
var finishPoint = new Path.Circle(new Point(1300, 600), 40);
finishPoint.fillColor = "red";

var ball = new Path.Circle(new Point(40, 40), 20);
ball.fillColor = "black";

//holes 
var path = new Path(new Point(20, 20), new Point(20, 23));
path.style = {
    strokeColor: 'grey',
    strokeWidth: 70,
    strokeCap: 'round'
};

var holes = new Symbol(path);

for (var i = 0; i < 10; i++) {
    var placement = view.size * Point.random();
    var placed = holes.place(placement);
}





var vector = new Point(0, 0);

function onFrame(event) {

    ball.position += vector / 100;
}
var moves = new Point(100, 1);

function onKeyDown(event) {
    if (event.key === "s") {
        vector.y += 10;
    }
    if (event.key === "d") {
        vector.x += 10;
    }
    if (event.key === "a") {
        vector.x -= 10;
    }
    if (event.key === "w") {
        vector.y -= 10;
    }

    var ballPlace = ball.position;
    if (ballPlace.isClose(finishPoint.position, 40) == true) {

        var text = new PointText(view.center);
        text.content = 'Congratulations';
        text.style = {
            fontFamily: 'Courier New',
            fontWeight: 'bold',
            fontSize: 100,
            fillColor: 'gold',
            justification: 'center'
        };
        ball.remove();
    }
if(ballPlace.isClose(placement.position, 40) == true) {
    ball = new Point(40, 40);
}
};

我希望球越过Point(40,40),当它越过一个灰洞(var hole)但是我无法让它工作。知道如何解决这个问题吗?

2 个答案:

答案 0 :(得分:1)

你想测试球在球洞上的位置,看看球是否会回到起始位置。我能想到的最简单的方法是创建一组洞,然后测试球对阵该组的位置。在下面的代码中,球的位置是通过onMouseMove函数模拟的,并且球被刷成红色以指示球何时返回到起始位置。

var holes = [];
var hole;

for (var i = 0; i < 10; i++) {
    hole = new Path.Circle(view.size * Point.random(), 10);
    hole.fillColor = 'grey';
    holes.push(hole);
}

holes = new Group(holes);

onMouseMove = function(e) {
    if (holes.hitTest(e.point)) {
        holes.fillColor = 'red';
    } else {
        holes.fillColor = 'grey';
    }

以下是一项实施:sketch。将onMouseMove替换为onFrame应该是直截了当的,按照目前的方式移动球,然后测试它是否落入洞中。

为了测试球是否在一个洞上,你可以删除onMouseMove功能并将其替换为:

onFrame = function(e) {
    ball.position += vector / 100;
    if (holes.hitTest(ball.position)) {
        // move the ball wherever you want to move it, position text,
        // etc. you might have to loop through the array to find which
        // hole was hit.
    }
}

答案 1 :(得分:0)

@Luke Park正确使用数组。

通过确保与所有其他现有点的距离来试验每个新点。下面的示例(未缩放为view.size)。

p = Point.random();
while ( isTooClose(p, points) ) {
    p = Point.random();
}

这有可能无限循环,但如果你稀疏地填充这个区域,应该没有问题。

isTooClose测试数组p中的每个点,其中distance = sqrt(dx dx + dy dy)。如果你有很多点,你可以通过测试原始dx和dy值是否小于测试半径来避免sqrt()进行优化。

您还可以在每个帧上使用类似的功能来测试碰撞。