听起来范围界定有些混乱,可能有更好的方法来考虑这个问题。
首先让我们看看出了什么问题,并通过一些细节来解释原因。
- 就像变量 (
let
, var
) 一样,常量总是在特定范围内声明。
- 范围就像常量和变量的容器。范围是私有的,即它们不能从外部访问。范围可以被创建和销毁。
- 当您直接在函数内部声明一个常量时,作用域就是函数本身(如
startX
inside shoot
)。(请注意,如果您在if
语句或其他块中声明常量,则范围是块。不过,这里不是这种情况。)
- 每次调用函数时都会创建函数作用域,并在函数完成执行时销毁。
- 每次调用函数并创建其作用域时,所有常量(和变量)都会用新值重新初始化。
- 代码中出现的常量在不同的函数调用期间可能具有不同的值。它仅在其生命周期内保持不变,在您的情况下,它是函数的单个给定执行。
这就是为什么你的常数不能保持不变的原因。您shoot()
在鼠标按下时重复调用,因此常量被重复创建并分配新值。
有了这些信息,希望您能看到当前方法的问题。至于解决方案,让我们想想到底发生了什么。shoot()
是当用户发出“射击”命令时应该触发的动作,例如鼠标点击。该draw()
功能是一个连续事件触发说“嘿,更新屏幕”。将射击动作放在平局事件中是一种意图的不匹配,并且是这种斗争的根源。
相反,让我们介绍bullet
对象的概念。子弹有一个x
和一个y
值。子弹在用户射击时创建,并在创建时被赋予特定的 x 和 y 值。这一切都没有发生在内部draw
,它发生在另一个事件侦听器中,例如"click"
.
的工作draw
是检查是否有活动的子弹,如果有,则在指定的 x 和 y 坐标处绘制它。如果没有子弹,什么也不做。(当然,您可能还需要绘制其他东西,但这与绘制子弹无关)。
将对象创建和对象绘制分开可以更容易地获得您正在寻找的那种控制。
编辑:添加一些代码示例
使用上面的项目符号对象想法,这就是代码看起来完全按照您的要求做的样子。内联注释应解释每个步骤。
// This is where we'll store an active bullet object.
// The `shoot()` function is responsible for setting this.
// `draw()` is responsible for rendering the bullet.
// Initially we'll set the value to `null` to explicitly
// indicate that there is no bullet.
let activeBullet = null;
// The purpose of `shoot()` is to create a bullet
// and make it available to be rendered.
function shoot(x, y) {
// Create the bullet object.
const newBullet = {
x: x,
y: y,
size: 25
};
// Set the active bullet to the new bullet. This will
// cause any previously active bullet to disappear.
activeBullet = newBullet;
}
// P5 functions
// ------------
function setup() {
createCanvas(1000, 650);
}
// Shoot when the player clicks.
function mousePressed() {
shoot(mouseX, mouseY);
}
function draw() {
// Always start with a blank canvas.
clear();
// If there is an active bullet, draw it!
// (`null` is "falsy", objects are "truthy", so the
// `if` statement will only run after the `activeBullet`
// variable is assigned a bullet object.)
if (activeBullet) {
fill(0, 100, 200);
rect(
activeBullet.x - activeBullet.size / 2,
activeBullet.y - activeBullet.size / 2,
activeBullet.size,
activeBullet.size
);
}
}
你还提到你想建立简单的子弹物理。只是为了展示子弹对象的想法如何很好地工作,这是一个演示,您可以在其中单击以射击多个子弹,它们都独立移动,并在与墙壁相撞时被移除。构建游戏涉及更多内容,但希望这是一个鼓舞人心的起点:)
// Store canvas dimensions globally so we have easy access.
const canvasWidth = 1000;
const canvasHeight = 650;
// We'll add a "wall" object so we have something the bullets can
// collide with. This value is the X position of the wall.
const wallX = canvasWidth - 200;
// Instead of a single bullet, using an array can accommodate
// multiple bullets. It's empty to start, which means no bullets.
// We can also use `const` for this, because we won't ever assign
// a new value, we'll only modify the contents of the array.
const activeBullets = [];
function shoot(x, y) {
// Create the bullet object.
const newBullet = {
x: x,
y: y,
size: 25,
speed: 4
};
// Instead of overwriting a single bullet variable, we'll push
// the new bullet onto an array of bullets so multiple can exist.
activeBullets.push(newBullet);
}
// P5 functions
// ------------
function setup() {
createCanvas(canvasWidth, canvasHeight);
}
// Shoot when the player clicks.
function mousePressed() {
shoot(mouseX, mouseY);
}
function draw() {
// Always start with a blank canvas.
clear();
// Draw our "wall".
fill(50);
rect(wallX, 0, 60, canvasHeight);
// Set the fill color once, to use for all bullets. This doesn't
// need to be set for each bullet.
fill(0, 100, 200);
// Loop through the array of bullets and draw each one, while also
// checking for collisions with the wall so we can remove them. By
// looping backwards, we can safely remove bullets from the array
// without changing the index of the next bullet in line.
for (let i=activeBullets.length-1; i>=0; i--) {
// Grab the current bullet we're operating on.
const bullet = activeBullets[i];
// Move the bullet horizontally.
bullet.x += bullet.speed;
// Check if the bullet has visually gone past the wall. This
// means a collision.
if (bullet.x + bullet.size / 2 > wallX) {
// If the bullet has collided, remove it and don't draw it.
activeBullets.splice(i, 1);
} else {
// If the bullet hasn't collided, draw it.
rect(
bullet.x - bullet.size / 2,
bullet.y - bullet.size / 2,
bullet.size,
bullet.size
);
}
}
}