如何使用p5.js /p5.play使所有精灵移动到不同的吸引点
如何使用p5.js /p5.play使所有精灵移动到不同的吸引点
提问于 2021-10-07 03:44:04
我正在创造一个游戏，让精灵从画布上掉下来，摧毁画布底部的塔楼。我试图在所有不同的塔楼上使用attractionPoint，所以精灵们正在向塔楼移动。我目前已经得到一个精灵移动到塔楼使用attactionPoint，但其余的精灵继续在一条直线的道路上移动。有什么方法可以让我设置多个吸引点，让精灵向所有的塔移动？
见下面的代码：
function createAsteroids() {
// code to spawn asteroids at random locations
for (let i = 0; i < numAsteroids; i++) {
asteroid = createSprite(random(0, 1000), random(-50, -350), 40, 40);
asteroid.maxSpeed = random(1, 3);
rock.add(asteroid);
asteroidArray.push(asteroid);
}
}
function drawAsteroid() {
// draws asteroids moving down and checking collision
rock.overlap(turret, explode);
for (let i = 0; i < asteroidArray.length; i++) {
if (asteroidArray[i].position.y > height) {
asteroidArray[i].position.y = 0;
asteroidArray[i].position.x = random(0, 800);
}
asteroidArray[i].addSpeed(3, 90);
asteroid.attractionPoint(1, 100, 740);
asteroid.attractionPoint(1, 400, 740);
asteroid.attractionPoint(1, 700, 740);
}
}
function explode(sprite, obstical) {
//code for explosion and collision
sprite.remove();
obstical.remove();
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-07 08:03:15
你离得很近，但有几件事不太正确。在drawAsteroid中，您只在最后创建的小行星上设置attractionPoint，并在绘制方法中对其进行3次调用--我猜是这样--这样它就可以得到每个帧的更新。我们只想要drawAsteroid函数的恢复逻辑，所以让我们将这个方法重命名为updateAsteroid，而不是drawAsteroid，因为我们将在绘制方法中调用drawSprites(rock); (rock是您为小行星创建的组)。
当我们设置attractionPoint时，我们只想这样做一次，那就是我们创建小行星的时候：
function createAsteroids() {
// code to spawn asteroids at random locations
for (let i = 0; i < numAsteroids; i++) {
let asteroid = createSprite(random(0, width), random(-50, -350), 40, 40);
asteroid.maxSpeed = random(1, 3);
rock.add(asteroid);
let tower = floor(random(3)) // i know there's only 3 asteroids, you could do something better here
asteroid.attractionPoint(asteroid.maxSpeed, towers[tower].position.x, towers[tower].position.y);
}
}所以我们只是随机地瞄准一座塔楼。
我已经建立了一个小的例子，它会给你指明正确的方向。
// Find my blog at https://codeheir.com/
// I do a lot of p5.js stuff that might interest you!
let numAsteroids = 10;
let towers;
let rock;
function setup() {
createCanvas(400, 400);
rock = Group();
towers = Group();
createTowers();
createAsteroids();
}
function draw() {
background(220);
drawSprites(rock);
drawSprites(towers);
updateAsteroids();
}
function createAsteroids() {
// code to spawn asteroids at random locations
for (let i = 0; i < numAsteroids; i++) {
let asteroid = createSprite(random(0, width), random(-50, -350), 40, 40);
asteroid.maxSpeed = random(1, 3);
rock.add(asteroid);
let tower = floor(random(3))
asteroid.attractionPoint(asteroid.maxSpeed, towers[tower].position.x, towers[tower].position.y);
}
}
function updateAsteroids() {
// draws asteroids moving down and checking collision
//rock.overlap(turret, explode);
for (let i = 0; i < rock.length; i++) {
if (rock[i].position.y > height) {
rock[i].position.y = 0;
rock[i].position.x = random(0, width);
}
}
}
function createTowers() {
towers.push(createSprite(40, height - 30, 40, 90));
towers.push(createSprite(width/2, height - 30, 40, 90));
towers.push(createSprite(width-40, height - 30, 40, 90));
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
我还创建了一个p5.js素描，以指出正确的方向。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69475183
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号