我刚刚完成了关于 javascript 的 codeacademy 课程，所以请原谅我完全缺乏知识。
我正在尝试使用 javascript 和 html 创建经典的酒吧游戏 1-4-24（也称为午夜过后或午夜之后）。（这是一个视频，为那些不知道它是什么的人展示了这款游戏。
到目前为止，我已经创建了一个掷骰子并将它们存储在数组中的函数。在此代码的先前版本中，我能够将这些结果以图像形式附加到页面正文中。但是，当用户再次掷骰子时，我需要能够删除这些结果。
我决定使用 div 来分隔掷骰子、用户保留的骰子和用于掷骰子的菜单。
我的问题是：我需要在这个新的 div 中显示掷骰结果。我非常非常不成功——主要是因为即使在阅读了 W3schools 和其他网站上的多篇文章之后，我也不完全理解 appendChild() 的工作原理。
所以这是我的代码 - 具体看 addImageRolled 函数 - 我不一定希望它“修复”，我想知道如何修复它。这对我来说是一个学习项目。
<!doctype html>
<html>
<head>
<title>Put your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script>
// variables
var diceLeft = 6;
// arrays
var rolls = [];
var kept = [];
// functions
// rolls dice
function rollDice() {
for (var i = 0; i < diceLeft; i++) {
rolls[i] = 1 + Math.floor(Math.random() * 6);
};
displayRoll();
};
// creates images for displayRoll function
function addImageRolled(id, src, width, height, hspace) {
var img = document.createElement("img");
img.id = id;
img.src = src;
img.width = width;
img.height = height;
img.hspace = hspace;
img.onmouseup= keepDie();
document.getElementById("Rolled").appendChild(img);
};
// displays images based on rolls
displayRoll() {
switch(roll[0]) {
case 1: addImageRolled(1, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(1, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(1, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(1, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(1, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(1, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[1]) {
case 1: addImageRolled(2, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(2, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(2, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(2, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(2, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(2, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[2]) {
case 1: addImageRolled(3, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(3, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(3, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(3, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(3, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(3, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[3]) {
case 1: addImageRolled(4, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(4, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(4, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(4, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(4, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(4, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[4]) {
case 1: addImageRolled(5, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(5, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(5, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(5, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(5, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(5, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[5]) {
case 1: addImageRolled(6, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(6, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(6, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(6, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(6, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(6, "dice-6.png", 100, 100, 5);
break;
};
};
</script>
<div class="content">
<div class="Menu">
<div class="content">
<p>How to play: Click "Roll!" button to roll the dice. Click on any die to keep it.</p>
<input type = "button" value = "Roll!" onClick = rollDice()>
</div>
</div>
<div id="Rolled" class="Rolled">
<div class="content">
</div>
</div>
<div class="Kept">
<div class="content">
</div>
</div>
</div>