如何在“子弹”到达mouseX和mouseY后移除它？[P5.Play]
我正在用P5.Play做一个游戏，在这里我有3个方尖牙；一个在左边，一个在右边，一个在中间。我已经做到了，如果我的鼠标位置在画布的特定区域内，最近的方尖碑将向我的鼠标位置射击。然而，我正在努力寻找一种方法，使雪碧一旦达到x和y点，当我点击鼠标时，它会爆炸。我不会发布我的完整代码，因为它是为一个任务，但这里是一个片段。
function mousePressed() {
if (mouseX < width / 3) {
bullet = createSprite(obelisks[0].position.x, obelisks[0].position.y - 60, 20, 20)
} else if (mouseX > width / 3 && mouseX < width - width / 3) {
bullet = createSprite(obelisks[1].position.x, obelisks[1].position.y - 60, 20, 20)
} else {
bullet = createSprite(obelisks[2].position.x, obelisks[2].position.y - 60, 20, 20)
}
// if bullet position is less than the distance between firing point and cursor position, then remove bullet??
bullet.addImage(bulletSprite);
bullet.attractionPoint(10, mouseX, mouseY);
bullet.rotateToDirection = true;
}回答 1
Stack Overflow用户
发布于 2021-10-07 07:25:09
首先，谢谢你介绍我玩p5！
这里有几件事要考虑，但你们很亲密。在阅读文件中，sprite对象上有一个名为overlapPoint(pointX, pointY)的函数，它：
检查给定的点是否在精灵对撞机内。
这将返回一个布尔值。我们可以利用这个来确定我们的子弹是否到达了目的地。
首先，让我们定义对象上的destinationX和destinationY属性：
function mousePressed() {
...
bullet = createSprite(width/2, height, 10, 10);
let destinationX = mouseX;
let destinationY = mouseY;
bullet.attractionPoint(10, destinationX, destinationY);
bullet.destinationX = destinationX;
bullet.destinationY = destinationY;
}现在，我们可以使用这些属性来确定是否到达了重叠点：
function draw() {
background(220);
drawSprite(obelisk);
if (bullet) {
drawSprite(bullet);
if (bullet.overlapPoint(bullet.destinationX, bullet.destinationY)) {
bullet.remove();
}
}
}下面是一个实用的、简化的示例：
let obelisk;
let bullet;
function setup() {
createCanvas(400, 400);
obelisk = createSprite(width/2, height, 50, 200);
}
function draw() {
background(220);
drawSprite(obelisk);
if (bullet) {
drawSprite(bullet);
if (bullet.overlapPoint(bullet.destinationX, bullet.destinationY)) {
bullet.remove();
}
}
}
function mousePressed() {
bullet = createSprite(width/2, height, 10, 10);
let destinationX = mouseX;
let destinationY = mouseY;
bullet.attractionPoint(10, destinationX, destinationY);
bullet.destinationX = destinationX;
bullet.destinationY = destinationY;
}<!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草图的链接，以进一步帮助您。
希望这能为你指明正确的方向。我还建议您创建一个子弹数组，例如：let bullets = []并在拍摄时添加到这个数组中，这样可以防止在快速连续射击时删除子弹。或者，您甚至可以查看p5.play的分组对象。
https://stackoverflow.com/questions/69475727
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号