JavaScript p5 使图片移动并在随机位置生成

Question

我正在使用 JavaScript 和 p5 库制作游戏。我有一个函数 enemy1_spawn，它接受我需要多少敌人的参数。我的敌人在随机位置生成，我需要它在屏幕上从左向右移动（稍后我将设置其他所需条件）。我的问题是程序一直在重新加载，所以敌人的图片一直在生成，根本不动。

我附上了我的 javaScript 代码。注释中的代码是我为使其工作所做的一些尝试，虽然我尝试了其他方法。

var enemy_position = [];
var positiony = 100;

function preload() {
    backgroundImg = loadImage("http://127.0.0.1:8080/img/extra/map1.png");
    moneyImg = loadImage("http://127.0.0.1:8080/img/extra/dollar.png");
    livesImg = loadImage("http://127.0.0.1:8080/img/extra/lives.png");
    enemy1 = loadImage("http://127.0.0.1:8080/img/enemies/enemy1.png");

}

function setup() {
    createCanvas(1000, 600);
    livesImg.resize(40, 40);


}

function draw() {

    background(60, 238, 161);
    image(backgroundImg,0,0);
    image(moneyImg, 790, 0);
    image(livesImg, 805, 60);
    ShowTowers();
    enemy1_spawn(1);

}

function ShowTowers(){
    let firetowerbase_button;
    var button_size = {
        width: 120,
        height: 40
    }

    textSize(28);
    let textwidth;
    textwidth = textWidth("Towers");

    text("Towers", 800 + textwidth/2, 150);
    firetowerbase_button = createButton('Fire Tower');
    firetowerbase_button.size(button_size.width, button_size.height);
    firetowerbase_button.position(780 + button_size.width/2, 180);
}

function enemy1_spawn(number_of_enemies){
    var position = {
        // x: random(10, 100),
        x: 0,
        y: 100
    }
    // var positionx = 0;

    // for(var i = 0; i<5; i++){
    // image(enemy1, position.x, position.y + i*80);
    // }
        // image(enemy1, position.x, position.y);
    for (var i = 0; i < number_of_enemies; i++) {
        var positionx = random(-100, 0);
        enemy_position.push([positionx, positiony]);
        // console.log(enemy_position[i]);
    }

    // for(var j = 0; j<enemy_position.length; j++){
    //  image(enemy1, enemy_position[j][0], enemy_position[j][1]);
    //  enemy_position[j][0]--;
    // }
    
        for(j = 0; j<enemy_position.length; j++){
            image(enemy1, enemy_position[j][0], enemy_position[j][1]);

    }
}

更新

我试图实现这个 class 但是，它似乎没有用，它给我一个错误，说随机必须在 setup 中定义，但后来我如果我在 setup

中初始化它，我不确定如何在这里使用它

class Enemy1{
    constructor(number_of_enemies){
        this.number_of_enemies = number_of_enemies;
        this.enemy_position = [];
        this.generate_random_x = random(10, 100);

    }
    enemy1_spawn(){
        for(var i=0; i<this.number_of_enemies; i++){
            var positionx = this.generate_random_x;
            var positiony = 100;

            this.enemy_position.push([positionx, positiony]);
            image(enemy1, this.enemy_position[i][0], this.enemy_position[i][1]);
        }

    }

    enemy1_move(){
        for(var i = 0; i < this.enemy_position.length; i++)
        {
            this.enemy_position[i][0] += 2; //Move the enemy to the right
        }
    }
}

我也试过制作单独的函数（和以前一样）并将我的随机数放入 setup，但屏幕上没有任何显示。

function enemy1_spawn(number_of_enemies){
    for(var i=0; i<number_of_enemies; i++){
        var positionx = gen_ran_x;
        var positiony = 100;

        enemy_position.push([positionx, positiony]);
        image(enemy1, enemy_position[i][0], enemy_position[i][1]);
    }

}

function enemy1_move(){
    for(var i = 0; i < enemy_position.length; i++)
    {
            image(enemy1, enemy_position[i][0], enemy_position[i][1]);
            enemy_position[i][0] += 2; //Move the enemy to the right
            // print(enemy_position[i][0], enemy_position[i][1]);
        }
      }

我的设置

var generate_random_x;

function setup() {
    createCanvas(1000, 600);
    livesImg.resize(40, 40);
    enemy1_spawn(1);
    // classenemy1.enemy1_spawn();
    generate_random_x = random(10, 100);

更新 2

这目前有效，但我需要一种方法来随机化我的 positionx

class Enemy1{
    constructor(number_of_enemies){
        this.number_of_enemies = number_of_enemies;
        this.enemy_position = [];

    }
    enemy1_spawn(){
        for(var i=0; i<this.number_of_enemies; i++){
            var positionx = 10;
            var positiony = 100;

            this.enemy_position.push([positionx + i*50, positiony]);
            image(enemy1, this.enemy_position[i][0], this.enemy_position[i][1]);
        }

    }

    enemy1_move(){
        for(var i = 0; i < this.enemy_position.length; i++)
        {
            image(enemy1, this.enemy_position[i][0], this.enemy_position[i][1]);
            this.enemy_position[i][0] += 2; //Move the enemy to the right
        }
    }
}

Answer 1

问题是您在每一帧都生成了一个新的随机位置。要移动敌人，您只需生成一次位置，然后更新它。

为此，您可以创建一个新函数：

function ememy1_move(){
   for(var i = 0; i < enemy_position.length; i++)
   {
      enemy_position[i][0] += 2; //Move the enemy to the right
   }
}

然后，您只需在设置中调用 enemy1_spawn() 一次，并在 draw() 中调用 enemy1_move()。

另请注意，您忘记了 enemy1_spawn() 函数末尾的 var 或 let：

for(j = 0

更新： 正如您自己指出的那样，您可以添加

let randomx = random(-100, 0);

到您的 enemy1_spawn() 函数并设置

positionx = randomx

JavaScript p5 使图片移动并在随机位置生成

JavaScript p5 make picture move that spawns at random location

javascript

p5.js

更新

更新 2