对于我的任务，我要求创建一个使用JavaScript的游戏。这是游戏的前提： 在比赛开始时，有十个筹码。玩家需要在11个方格之间分配筹码。每个方块被指定为2到12的数字。一旦玩家放置了所有筹码，他将多次掷两个骰子。记录骰子的总和并从相应的正方形（如果有的话）中移除芯片。移除所有10个筹码所需的掷骰数量标志着游戏的结束。 所以我刚开始分配，但是我无法保持正常情况下卷数的工作记录。当我尝试不同的事情时，它的一部分被注释掉了。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
</style>
</head>
<body>
<script type "text/javascript">
function rollDice(){
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You rolled " + diceTotal;
}
var count = 0;
function displayTotal() {
count = parseInt(count) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Number of Rolls: " + count;
};
/**function displayTotal(val) {
var count = document.getElementById('count').value;
var new_count = parseInt(count, 10) + val;
if (new_count < 0) {new_count = 0;}
document.getElementById('count').value = new_count;
return new_count;
} *//
</script>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<button id = "roll" onclick="rollDice()">Roll Dice</button>
<div id ="showCount"></div>
<input type = "button" id = "roll" value = "Roll Dice" onclick = rollDice();/>
<h2 id="status" style="clear:left;"></h2>
</body>
</html>
此外，我应该看到的任何暗示性信息或链接，以帮助制作芯片部分（从每次总计出现在芯片上时减去）将非常有帮助。我不知道该怎么做。另外，如何在点击时向芯片盒添加一个，这也是一个谜。我想我可以在JS中使用一些有关计数的建议。
提前感谢所有帮助！
答案 0 :(得分：2)
我几乎完成了这个骰子游戏，它完成了OP要求的所有内容。我只留下了一件小事：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
height: 100vh;
width: 100vw;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #222;
color: #EFE;
font-variant: small-caps;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shell {
position: relative;
padding: 1.5em .75em;
margin: 0 auto;
height: 100%;
width: 100%;
}
.content {
postion: absolute;
font-variant: small-caps;
}
header {
width: 100%;
height: 40px;
position: relative;
margin-bottom: 1.5em;
}
h1 {
color: hsla(45, 100%, 60%, 1);
font-weight: 700;
line-height: 1;
letter-spacing: .5px;
font-size: 3rem;
margin: 0 0 2em 0;
}
.die1,
.die2 {
width: 48px;
height: 48px;
background-color: hsla(0, 100%, 50%, .6);
border-radius: 7px;
display: inline-table;
margin: 2em;
padding-left: 4px;
}
.pip div {
width: 8px;
height: 8px;
background-color: hsla(60, 100%, 80%, 1);
border-radius: 60px;
padding: 1px;
text-align: center;
}
.row {
width: 24px;
height: 8px;
}
.blank div {
width: 8px;
height: 8px;
padding: 1px;
text-align: center;
}
#tossed,
#reset {
height: 32px;
width: 64px;
color: hsla(180, 100%, 30%, 1);
border: 1px inset hsla(228, 100%, 50%, 1);
border-radius: 7px;
text-align: center;
font-size: 1.2rem;
font-variant: small-caps;
display: inline-table;
pointer-events: auto;
cursor: pointer;
}
#reset {
display: none;
}
#set {
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
#field {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
.subFieldset {
pointer-events: none;
}
legend {
color: hsla(45, 100%, 60%, 1);
font-size: 1.5rem;
margin: 0 4em 0 0;
pointer-events: none;
}
#set input {
width: 48px;
height: 32px;
background-color: hsla(0, 0%, 80%, 1);
color: hsla(240, 100%, 40%, 1);
font-family: 'Source Code Pro';
font-size: 1rem;
border: 1px inset hsla(192, 100%, 50%, 1);
border-radius: 7px;
margin: 3px;
padding: 3px;
cursor: pointer;
pointer-events: auto;
display: table-cell;
}
label {
margin: 0 10px 0 0;
font-variant: normal;
display: inline-table;
color: hsla(60, 100%, 80%, 1);
pointer-events: none;
}
output {
color: hsla(240, 100%, 50%, 1);
font-family: 'Source Code Pro';
pointer-events: none;
}
#slotDisplay {
display: table-row;
float: left;
clear: both;
margin: 1em auto;
background-color: hsla(0, 0%, 20%, 1);
border: 1px inset hsla(45, 100%, 60%, 1);
border-radius: 7px;
color: hsla(48, 100%, 50%, 1);
width: 100%;
max-width: 760px;
min-width: 320px;
line-height: 1;
padding: 5px;
font-size: 1.5rem;
pointer-events: none;
}
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<section class="box">
<fieldset id="field">
<input id="reset" type="reset" value="Reset">
<label for="scored thrown">Score:
<output id="scored" name="scored" for="ui" form="ui">00</output>
/ Rolls:
<output id="thrown" name="thrown" for="ui" form="ui">00</output>
</label>
<button id="tossed" enabled="false">Roll</button>
</fieldset>
<table class="die1">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
<table class="die2">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
</section>
<form id="ui">
<fieldset id="set">
<legend>Distribute Chips in any Combination</legend>
<label>Chips Remaining:
<output id="wallet" name="wallet" for="ui" form="ui">10</output>
</label>
<br/>
<section class="subFieldset">
<label>
<input type="button" id="b-2" class="feed" value="02" form="ui">
</label>
<label>
<input type="button" id="b-3" class="feed" value="03" form="ui">
</label>
<label>
<input type="button" id="b-4" class="feed" value="04" form="ui">
</label>
<label>
<input type="button" id="b-5" class="feed" value="05" form="ui">
</label>
<label>
<input type="button" id="b-6" class="feed" value="06" form="ui">
</label>
<label>
<input type="button" id="b-7 " class="feed" value="07" form="ui">
</label>
<label>
<input type="button" id="b-8" class="feed" value="08" form="ui">
</label>
<label>
<input type="button" id="b-9" class="feed" value="09" form="ui">
</label>
<label>
<input type="button" id="b-10" class="feed" value="10" form="ui">
</label>
<label>
<input type="button" id="b-11" class="feed" value="11" form="ui">
</label>
<label>
<input type="button" id="b-12" class="feed" value="12" form="ui">
</label>
</section>
<textarea id="slotDisplay" readonly cols="30" rows="1" form="ui"></textarea>
</fieldset>
</form>
</main>
</section>
<script>
/*/////////////][ GLOBAL ][//////////////*/
var slots = [];
var chip = 10;
var roll = 0;
var set = document.getElementById("set");
/*/////////////][ PHASE I ][//////////////*/
set.addEventListener("click", execFeed, false);
function execFeed(event) {
if (event.target !== event.currentTarget) {
var tgt = event.target.id;
console.log('trueTarget: ' + tgt);
var feed = document.getElementById(tgt);
console.log('feed: ' + feed);
var val = feed.value;
console.log('val: ' + val);
var idx = parseInt(splitPop(tgt, '-'), 10) - 2;
console.log('idx: ' + idx);
chip = feedSlot(val, slots);
if (chip === 0) {
set.removeEventListener('click', execFeed, false);
tos.setAttribute('enabled', true);
var str0 = 'Roll the Dice to Match Each Number';
var col0 = 'lime';
msg(str0, col0);
}
}
event.stopPropagation();
}
function feedSlot(val, Arr) {
var wallet = document.getElementById('wallet');
var view = document.getElementById('slotDisplay');
Arr.push(val);
console.log('Arr: ' + Arr);
view.value = Arr;
chip--;
wallet.value = chip;
return chip;
}
var tos = document.getElementById('tossed');
/*/////////////][ PHASE II ][//////////////*/
tos.addEventListener('click', matchRoll, false);
function execRoll() {
var thrown = document.getElementById('thrown');
var scored = document.getElementById('scored');
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
var rd1 = rollDice(pip1);
var rd2 = rollDice(pip2);
var points = rd1 + rd2;
scored.value = leadZero(points, 2);
roll++;
thrown.value = leadZero(roll, 2);
return points;
}
function matchRoll() {
var val = execRoll();
var tgt = leadZero(val, 2);
console.log('execRoll: ' + tgt);
var arr = slots;
console.log('slots: ' + slots);
var mR = arr.indexOf(tgt);
if (mR === -1) {
var str1 = 'No Match, Roll Again';
var col1 = 'orange';
msg(str1, col1);
} else if (mR > -1 && chip < 9) {
++chip;
var toGo = 10 - chip;
var str2 = tgt + ' Matched, ' + toGo + ' More Matches Left';
var col2 = 'blue';
arr.splice(mR, 1);
msg(str2, col2);
} else {
++chip;
var exit = document.getElementById('reset');
var str3 = 'Completed in ' + roll + ' Rolls';
var col3 = 'yellow';
arr.splice(mR, 1);
msg(str3, col3);
exit.style.display = "block";
tos.style.display = "none";
}
wallet.value = chip;
return false;
}
function rollDice(arr) {
var ran6 = Math.floor(Math.random() * 6) + 1;
blank(arr);
switch (ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
var pts = ran6;
return pts;
}
/*/////////////][ UTILITIES ][//////////////*/
function msg(str, col) {
var title = document.querySelector('legend');
title.style.color = col;
title.innerHTML = str;
}
function selArr(sel, ele) {
if (!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
function blank(arr) {
for (var i = 0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
function leadZero(num, len) {
var str = num.toString();
var zeros = len - str.length;
for (var i = 1; i <= zeros; i++) {
str = "0" + str;
}
return str;
}
function splitPop(str, delim) {
var strX = str.split(delim).pop();
return strX;
}
</script>
</body>
</html>
<小时/>
我做了这个骰子游戏的有趣部分，它取决于你，先生完成其余部分。 JS有注释，祝你好运。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html, body { box-sizing: border-box; font: 400 16px/1.5 'Source Code Pro'; height: 100vh; width: 100vw; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
body { background-color: #222; color: #EFE; font-variant: small-caps; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.shell { position: relative; padding: 1.5em .75em; margin: 0 auto; height: 100%; width: 100%; }
.content { postion: absolute; font-variant: normal; }
.die1, .die2 { width: 48px; height: 48px; background-color: hsla(0,100%,50%,.6); border-radius: 7px; display: inline-table; margin: 2em; padding-left: 4px; }
.pip div { width: 8px; height: 8px; background-color: hsla(60,100%,80%,1); border-radius: 60px; padding: 1px; text-align: center; }
.row { width: 24px; height: 8px; }
.blank div { width: 8px; height: 8px; padding: 1px; text-align: center; }
#toss { height: 32px; width: 64px; border: 1px inset hsla(0,0%,50%,1); border-radius: 6px; text-align: center; font-size: 1.2rem; font-variant: small-caps; display: inline-table; }
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<table class="die1">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
<button id="toss">Roll</button>
<table class="die2">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
</main>
</section>
<script>
// Reference to Dice (2 tables in DOM)
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
// Reference to Pips (2 arrays of table-cells in Dice) derived from selArr(sel, ele)☆
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
// Reference to the Toss (1 button triggers the random "roll" of the Dice)
var toss = document.getElementById('toss');
/*
** When the Toss button is clicked, execute function roll(arr)★ twice;
** once for the array of table cells (Pips) in table.die1 (Die One);
** then the other one in table.die2 (Die Two)
*/
toss.addEventListener('click', function(event) {
roll(pip1);
roll(pip2);
return false;
}, false);
/* ★
** Take the array of td (Pips) and add the .blank class to each of them ✪;
** generate a random number 1 thru 6 and determine the layout of the tds (pips)
*/
function roll(arr) {
blank(arr);
var ran6 = Math.floor(Math.random() * 6) + 1;
switch(ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
}
/* ☆
** selArr(sel, ele) (selectorArray) this utility takes a collection of selectors
** and converts them into a real array
*/
function selArr(sel, ele) {
if(!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
/* ✪
** blank(arr) takes an array of td (Pips) and adds the .blank class to each one of them
*/
function blank(arr) {
for(var i=0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
</script>
</body>
</html>