我正在完成项目：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只可用的雪丘，或者允许在给定不同数量的企鹅的情况下改变页面。
答案 0 :(得分：1)
您可以允许用户使用 prompt() 方法指定应该有多少只企鹅：
var penguinCount = prompt("How many penguins should there be?");
为了使企鹅的类型随机化，您可以调用 Math.random() 来抓取1和{之间的随机数{1}}，并在创建元素时将该数字附加到单词8的末尾。
以下内容将创建与用户指定的企鹅一样多的企鹅，每个企鹅都有penguin和penguin1之间的随机类：
penguin8同样可以为雪丘做同样的事情;只需使用第二个变量：）
然而，假设企鹅之间的唯一区别在于他们的图像，那就是使用单个类for(var i = 0; i < penguinCount.length; i++) {
document.createElement("penguin" + Math.ceil(Math.random() * 8));
}
，而是在创建元素时随机化背景图像对于所谓的企鹅，可以使用 style 属性来完成：
.penguin执行后者意味着您只需要为所有企鹅创建一个类，从而大大减少了CSS：）
希望这有帮助！
答案 1 :(得分：0)
https://jsfiddle.net/sudarpochong/f1n0190a/1/
由于您删除了其他帖子，我将在此处发布答案，因为问题无论如何都是类似的：）
您应该实际处理下拉列表更改事件和/或使用另一个按钮来创建这些企鹅。
$("#create-penguin").on("click", function() {
$(".penguin-list").empty();
// create penguin
var numberSelected = $("#penguinsSelected").val();
for(var i = 0; i < numberSelected; i++) {
var penguinNo = Math.ceil(Math.random() * 8);
var penguin = $("<div>").addClass("penguin" + penguinNo).html("penguin" + penguinNo);
$(".penguin-list").append(penguin);
}
});
var maxPenguin = 64;
//This code will run after page loads
$(function() {
// dropdown 2-64 possible elements
for (var i = 2; i < maxPenguin; i++) {
$("#penguinsSelected").append('<option value="' + i + '">' + i + '</option>');
}
});
$(".yeti").mousedown(function() {
alert("Yaaaarrrr!");
// yetiClicked();
});
$("#create-penguin").on("click", function() {
$(".penguin-list").empty();
// create penguin
var numberSelected = $("#penguinsSelected").val();
for(var i = 0; i < numberSelected; i++) {
var penguinNo = Math.ceil(Math.random() * 8);
var penguin = $("<div>").addClass("penguin" + penguinNo).html("penguin" + penguinNo);
$(".penguin-list").append(penguin);
}
});/*This style gives the body element in our HTML a cool blue background color*/
body {
background-color: #ccf5f5;
}
/*This styles the div in the HTML that contains and centers our penguin game*/
#gameholder {
width: 600px;
margin-left: auto;
margin-right: auto;
}
/*This styles the title div in or HTML*/
#title {
width: 600px;
height: 150px;
/*This property embeds an image into the background of our div*/
background-image: url('media/penguin_title.png');
}
/*This pseudo class is applied when the mouse hovers over the 1st penguin div*/
.penguin1:hover {
background-image: url('media/mound_1_hover.png');
/*This property changes our cursor to a pointer indicating an interactive element*/
cursor: pointer;
}
/*This pseudo class is applied when our 1st penguin div is clicked by the mouse button*/
.penguin1:active {
background-image: url('media/penguin_1.png');
}
/*This is the style for our 1st penguin div*/
.penguin1 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_1.png');
}
/*These are the styles for our 2nd penguin div.*/
.penguin2:hover {
background-image: url('media/mound_2_hover.png');
cursor: pointer;
}
.penguin2:active {
background-image: url('media/penguin_2.png');
}
.penguin2 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_2.png');
}
/*These are the styles for our 3rd penguin div.*/
.penguin3:hover {
background-image: url('media/mound_3_hover.png');
cursor: pointer;
}
.penguin3:active {
background-image: url('media/penguin_3.png');
}
.penguin3 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_3.png');
}
/*These are the styles for our 4th penguin div.*/
.penguin4:hover {
background-image: url('media/mound_4_hover.png');
cursor: pointer;
}
.penguin4:active {
background-image: url('media/penguin_4.png');
}
.penguin4 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_4.png');
}
/*These are the styles for our 5th penguin div.*/
.penguin5:hover {
background-image: url('media/mound_5_hover.png');
cursor: pointer;
}
.penguin5:active {
background-image: url('media/penguin_5.png');
}
.penguin5 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_5.png');
}
/*These are the styles for our 6th penguin div.*/
.penguin6:hover {
background-image: url('media/mound_6_hover.png');
cursor: pointer;
}
.penguin6:active {
background-image: url('media/penguin_6.png');
}
.penguin6 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_6.png');
}
/*These are the styles for our 7th penguin div.*/
.penguin7:hover {
background-image: url('mound_7_hover.png');
cursor: pointer;
}
.penguin7:active {
background-image: url('media/penguin_7.png');
}
.penguin7 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_7.png');
}
/*These are the styles for our 8th penguin div.*/
.penguin8:hover {
background-image: url('media/mound_8_hover.png');
cursor: pointer;
}
.penguin8:active {
background-image: url('media/penguin_8.png');
}
.penguin8 {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_8.png');
}
/*These are the styles for our yeti div.*/
.yeti:hover {
background-image: url('media/mound_9_hover.png');
cursor: pointer;
}
.yeti:active {
background-image: url('media/yeti.png');
}
.yeti {
width: 200px;
height: 200px;
float: left;
background-image: url('media/mound_9.png');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Number of Penguins</span>
<select id="penguinsSelected" name="Number of Penguins"></select>
<button id="create-penguin">Create</button>
<!--This is the frame for our game. It holds and centers all our other elements-->
<div id="gameholder">
<!--This holds the title image-->
<div id="title"></div>
<!--This holds our penguins and yeti-->
<div class="penguin">PENGUIN</div>
<div class="yeti">YETI</div>
<div class="penguin-list">
</div>
</div>