我有以下代码,但它与 paper.io 之类的游戏的预期不符。它填充了新区域,但不正确。玩家应该返回原来的基地,并且基地没有扩张。我能做些什么?
paper.js
的unite
方法也不好,因为它会在底座上留下洞。
paper.setup(document.getElementById('gameCanvas'));
const player = new paper.Path.Circle({
center: paper.view.center,
radius: 5,
fillColor: 'red'
});
let base = new paper.Path.Rectangle({
point: [paper.view.center.x - 50, paper.view.center.y - 50],
size: [100, 100],
fillColor: 'lightblue'
});
let destination = player.position;
let drawing = false;
let playerPath;
paper.view.onMouseMove = function (event) {
destination = event.point;
};
paper.view.onFrame = function (event) {
const vector = destination.subtract(player.position);
if (vector.length > 1) {
vector.length = 1;
player.position = player.position.add(vector);
if (!drawing && !base.contains(player.position)) {
// Start drawing when moving out of the base
drawing = true;
playerPath = new paper.Path({
segments: [player.position],
strokeColor: 'lightblue',
strokeWidth: 2
});
} else if (drawing) {
playerPath.add(player.position);
// Check if the path intersects with the lightblue areas
const intersections = base.getIntersections(playerPath);
if (intersections.length > 0) {
// Complete the path
drawing = false;
playerPath.add(intersections[0].point); // Optional: refine to add intersection point
playerPath.closed = true;
playerPath.fillColor = 'lightblue';
playerPath = null; // Reset the path
}
}
player.bringToFront();
}
};
canvas {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<canvas id="gameCanvas"></canvas>
我希望敌人能解决这个问题