【问题标题】:Constant not staying constant?不变不保持不变?
【发布时间】:2018-05-02 05:34:20
【问题描述】:

我编写了一个代码,目的是在按下鼠标的位置出现一个正方形,尽管鼠标移动,但仍留在该位置,并且在释放鼠标时不会消失。

这是 P5.JS ! https://p5js.org/reference/

相反,方块会跟随鼠标,直到它被释放然后消失!

我相信我的代码会在每次运行 shoot() 函数时不断声明一个新常量并删除旧常量。

var clocker = 0;// NOT YET USED

var player = {
    x:400,
    y:400,
};

function shoot(x1, y1, x2, y2, speed, range, power, playerDirection){

    var bulletAlive = true;
    var bulletDamage = power;
    const startX = x1;
    const startY = y1;
    const destX = x2;
    const destY = y2;
    var bulletX = startX;
    var bulletY = startY;

    if(bulletAlive){
      fill(0,100,200);
      rect(destX-12.5,destY-12.5,25,25);
    };


};

function setup() {
    createCanvas(1000,650);
}

function draw() {

    background(204,204,204);

    if(mouseIsPressed){
      shoot(player.x,player.y,mouseX,mouseY,2,100,0,"right");
    }

}

也许我使用 const 错误。如果是这样我应该如何使用它?我怎样才能使 destX 和 destY 不改变? (不要跟随鼠标或消失)

PS:抱歉杂项信息,这应该建立在简单的子弹物理基础上。

【问题讨论】:

标签: javascript html processing p5.js


【解决方案1】:

听起来范围界定有些混乱,可能有更好的方法来考虑这个问题。

首先让我们看看到底是哪里出了问题,并通过一些细节来解释原因。

  • 就像变量(letvar)一样,常量总是在特定范围内声明。
  • 作用域就像常量和变量的容器。范围是私有的,即它们不能从外部访问。范围可以创建和销毁。
  • 当您直接在函数内声明常量时,作用域就是函数本身(如startX 内的shoot)。 (请注意,如果您在 if 语句或其他块中声明常量,则范围就是块。不过,这里不是这种情况。)
  • 函数作用域在每次调用函数时创建,并在函数执行完成时销毁。
  • 每次调用函数并创建其范围时,所有常量(和变量)都会使用新值重新初始化。
  • 代码中出现的常量在不同的函数调用期间可能具有不同的值。它仅在其生命周期内保持不变,在您的情况下是函数的一次给定执行。

这就是为什么你的常数不能保持不变的原因。您在鼠标按下时反复调用shoot(),因此不断地重新创建常量并分配新值。

有了这些信息,希望您能看到当前方法存在的问题。至于解决方案,让我们想想到底发生了什么。 shoot() 是当用户发出“射击”命令(例如鼠标单击)时应触发的操作。 draw() 函数是一个连续事件触发说“嘿,更新屏幕”。将射击动作放在平局事件中是一种意图不匹配,并且是这种斗争的根源。

相反,让我们介绍bullet 对象的概念。子弹有一个x 和一个y 值。子弹在用户射击时创建,并在创建时被赋予特定的 x 和 y 值。这些都不会发生在 draw 内部,它会发生在另一个事件侦听器中,例如 "click"

draw 的工作是检查是否有活动的子弹,如果有,则在指定的 x 和 y 坐标处绘制它。如果没有子弹,什么也不做。 (当然你可能还需要画其他东西,但这与画子弹无关)。

将对象创建和对象绘制分开可以更轻松地获得所需的控制。

编辑:添加一些代码示例

使用上面的项目符号对象思想,这就是代码的样子,完全按照您的要求执行。内联 cmets 应解释每个步骤。

// 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
            );
        }
    }
}

【讨论】:

  • 好的,现在我知道我的逻辑是怎么回事了。我怎么能做到这一点?在我收到回复之前,我会研究原型
  • 我添加了一些代码示例来更好地说明如何实现这个想法。仅供参考,大多数简单的对象不需要在其原型上设置任何东西,使用原型是 JS 的高级功能。如您所见,我对项目符号使用了普通的对象字面量。
  • 听起来不错。我的游戏概念需要进行大量调整,但它满足了我提出的问题的所有细节。解决了!
  • 祝你好运,玩得开心!
【解决方案2】:

const 声明仅存在于shoot 的范围内。所以一旦shoot函数执行完毕,startX startY destX destY,即const,就会被删除。

可能的修复:

var didShootAlready = false;
var startX, startY, destX, destY;

function shoot(/*params*/){
    if(!didShootAlready){
        didShootAlready = true;
        startX = x1;
        startY = y1;
        destX = x2;
        destY = y2;
    }
    //do the rest
}

【讨论】:

  • 这样可以让我拍多次吗?
  • 是的。我只是举了一个例子来保持这些变量不变。您将在 if 之外执行其他拍摄代码。
  • 还是不明白……那会怎样?如何让我像 id 一样多次调用该函数?确实拍过是真的。
  • 很抱歉直到现在才回复。 didShootAlready 只是检查您是否应该更改那些“const”坐标。在注释为 ("//do the rest") 的地方执行其余的拍摄代码,无论 didShootAlready 是否为真
猜你喜欢
  • 2013-11-06
  • 2015-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-03
  • 2015-02-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多