在 setInterval 中创建精灵

Question

使用 setInterval 函数，我尝试使用 javascript 在 code.org 每秒创建一次精灵，所以我的代码的第一个版本看起来像

setInterval( function() {
  createSprite(200,200,20,20)
}, 1000)

我的问题是，将 setInterval 放在 Draw 函数中会导致它无法正常工作，并且在一秒后每个刻度都会创建一个精灵，并且当 setInterval 没有放入函数 Draw 它没有像我想要的那样绘制精灵。

我尝试过的一个解决方案是将 Draw 函数放在 setInterval 中，但无法识别并给出错误消息 "Draw is defined, but it is not called in your program".

是否有不同版本的 setInterval 在 Draw 函数内部工作，一种将 Draw 成功放入 setInterval 的方法，一种使即使在外面 Draw 精灵也会出现，或者用不同的方法来解决这个问题？

具体来说，我正在寻找的是每秒创建一次精灵，让它显示在屏幕上，每次生成新精灵时能够为每个精灵选择不同的速度，并且能够放置这个函数在 if 函数中并且仍然按预期工作。

这里显示了一段代码，显示了部分工作的内容：

https://studio.code.org/projects/gamelab/ApXezLpMzV3TfEfHx1CrhFyuteYDSKWe_6Hx0NdJgnc

它的工作原理是它每秒生成一个精灵，但如果我尝试为生成的精灵中的一个分配速度，它只对第一个精灵起作用，如下所示：

https://studio.code.org/projects/gamelab/ApXezLpMzV3TfEfHx1CrhFyuteYDSKWe_6Hx0NdJgnc

我认为可以解决的唯一方法是声明一个 class，然后在 setInterval 函数中创建这个 class 的精灵，但我不知道具体如何这样做。

Answer 1

所以我认为你的问题是精灵只在一秒钟后生成，对吧？

如果是这样，请试试这个：

createSprite(200,200,20,20);
setInterval( function(){ createSprite(200,200,20,20)},1000);

Answer 2

查看评论：

// just a helper function to generate random velocities
function random_in_range(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }

var monster = createSprite(200,200,20,20);
monster.velocityX = 5;

setInterval(function() {
  // as you needed to set velocity for a newly created sprite
  // you need to have this sprite as a variable
  var fireball = createSprite(monster.x,monster.y,4,4);
  // now you can set it's velocity
  fireball.velocityX = random_in_range(1,6);
  // basically that's it.
  // as you don't do anything else with a "fireball"
  // you can just forget about it, and you don't need to save it anywhere
}, 1000);

function draw() {
  background("white");
  createEdgeSprites();
  monster.bounceOff(edges);
  drawSprites();
}

link 与工作代码

看你的原始代码和你的问题，我认为你可能对 JS 有一些基本的误解（如果我判断有误请见谅）。在您的代码的注释中解释它们。我还添加了一些行来说明我的观点：

var spawner = createSprite(200,200,20,20);
var remember_spawner = spawner // ADDED
// After a new sprite created it does't change 'spawner' variable
createSprite(150,200,15,15).velocityY = 3; // ADDED
console.log(remember_spawner === spawner) // ADDED // you see it's the same

// you need to assign the newly created sprite to a variable
// you can think of this as:
// I need give them different names so that they can understand to whom am I taking to
// and if you don't name them they won't listen to you at all
var spawner2 = createSprite(100,200,10,10);  // ADDED
spawner2.velocityY = 1  // ADDED // now you cat change velocity of another sprite
console.log(spawner !== spawner2) // ADDED // and it is another sprite

// var thing_to_be_spawned = createSprite(spawner.x,spawner.y,4,4);
  // You probably don't need this. And you don't use the variable anyway.
  // This sprite created at the same time as the spawner.
  // But if you need it, and you want it to move - change it's velocity (thing_to_be_spawned.velocityX = something) not the velocity of spawner
  // And it would be better if you'll name the function passed to setInterval
  // and call it instead of repeating it. Like so:
  // function fire() { ... } // define the function
  // fire() // call the function
  // setInterval(fire, 1000) // call the function every second

setInterval(function(){
  console.log("This function executed every second") // ADDED
  console.log("Fire!") // ADDED
  createSprite(spawner.x,spawner.y,4,4);
  console.log("Done") // ADDED
},1000);

console.log("Next line executed only once") // ADDED
spawner.velocityX=5;
// The fact that it's placed after setInterval() does mean that
// it will be executed after call to setInterval()
// but it doesn't mean that it will be executed after the function passed to setInterval(). Let's call it fire(), shall we?
// Actually, the fire() function will be called only after all the code in this file
// And setInterval() is also called only once, only the fire() passed to it called every second

function draw() { // Here you don't call draw() you only define it, so that code.org can call it whenever it wants
  // looking at the code draw function we can't tell when or how often it's called
  // it depends on the implementation details of code.org.
  // We can add console.log to find out
  console.log("Draw called") // ADDED
  background("white");
  createEdgeSprites();
  spawner.bounceOff(edges);
  drawSprites();
}
console.log("'fire()' not called yet") // ADDED

控制台日志可以在studio.code.org的调试控制台中看到。单击 调试命令 打开它。用它！我的意思是 console.log()。我也可以说“使用调试命令！”但调试在 studio.code.org 中实施不佳并且可能会产生误导......你绝对应该尝试一下，但你应该相信 console.log().

在 setInterval 中创建精灵

Creating a sprite inside of setInterval

javascript

code.org