我正在完成项目: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()
来获取1
和8
之间的随机数,并在创建元素时将该数字附加到单词penguin
的末尾。以下将创建用户指定数量的企鹅,每个企鹅的
penguin1
和penguin8
之间的随机类别: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/