我正在完成项目:https://googlecreativelab.github.io/coder-projects/projects/pop_up_penguins/,它允许用户单击页面中的8只企鹅。但是,我试图用javascript而不是html填充页面,以便玩家可以轻松调整游戏中的企鹅数量。

我当时正在考虑首先从一些用户选择的数字构建一个数组。

penguinarray[count];


然后使用for循环根据数组的大小重复放置每个企鹅。

for(var i = 0; i < penguinarray.length; i++) {
    document.createElement("penguin1");
}


但是我不确定我如何仍可以从8种可用的企鹅中随机化所有不同类型的企鹅和雪堆,或在给定企鹅数量的情况下更改页面。

最佳答案

您可以允许用户使用prompt()方法指定应该有多少只企鹅:

var penguinCount = prompt("How many penguins should there be?");


为了随机化企鹅的类型,您可以调用Math.random()来获取18之间的随机数,并在创建元素时将该数字附加到单词penguin的末尾。

以下将创建用户指定数量的企鹅,每个企鹅的penguin1penguin8之间的随机类别:

for(var i = 0; i < penguinCount.length; i++) {
  document.createElement("penguin" + Math.ceil(Math.random() * 8));
}


雪堆也可以做同样的事情。只是利用第二个变量:)

但是,假设企鹅之间的唯一区别是它们的图像,那就是使用.penguin的单个类,而在为该企鹅创建元素时将背景图像随机化,这可以通过属性:

for(var i = 0; i < penguinCount.length; i++) {
  var penguin = document.createElement("penguin");
  penguin.style.backgroundImage = "url('penguin'" + Math.ceil(Math.random() * 8) + "'.png')";
}


进行后者将意味着您只需要为所有企鹅制作一个类,就可以大大减少CSS的数量:)

希望这可以帮助!

关于javascript - 使用javascript填充页面html div元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47625944/

10-12 00:16
查看更多