基于JavaScript制作一个骰子游戏

制作一个基于JavaScript的骰子游戏可以分为以下步骤：

步骤一：准备工作

需要在HTML文件中创建一个div标签用于显示骰子，以及一个按钮用于触发随机投掷骰子的事件。

<div id="dice"></div>
<button id="roll">Roll the dice</button>

步骤二：编写JavaScript代码

1. 定义骰子的数组

let dice = [
  "⚀", // dice face 1
  "⚁", // dice face 2
  "⚂", // dice face 3
  "⚃", // dice face 4
  "⚄", // dice face 5
  "⚅" // dice face 6
];

2. 定义随机数生成器

function randomIntFromInterval(min,max) {
  return Math.floor(Math.random()*(max-min+1)+min);
}

3. 获取骰子元素并随机生成骰子结果

let diceDOM = document.querySelector("#dice");
let rollBtn = document.querySelector("#roll");

rollBtn.addEventListener("click", function() {
  let randomNum = randomIntFromInterval(0, 5);

  diceDOM.innerHTML = dice[randomNum];
});

步骤三：测试游戏

现在可以在浏览器中打开HTML文件，点击按钮投掷骰子并观察结果。

示例一：

Roll the dice

<script>
  let dice = [
    "&#9856;", // dice face 1
    "&#9857;", // dice face 2
    "&#9858;", // dice face 3
    "&#9859;", // dice face 4
    "&#9860;", // dice face 5
    "&#9861;" // dice face 6
  ];

  function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

  let diceDOM = document.querySelector("#dice");
  let rollBtn = document.querySelector("#roll");

  rollBtn.addEventListener("click", function() {
    let randomNum = randomIntFromInterval(0, 5);

    diceDOM.innerHTML = dice[randomNum];
  });
</script>

示例二：

Roll the dice

<script>
  let dice2 = [
    "&#9856;", // dice face 1
    "&#9857;", // dice face 2
    "&#9858;", // dice face 3
    "&#9859;", // dice face 4
    "&#9860;", // dice face 5
    "&#9861;" // dice face 6
  ];

  function randomIntFromInterval2(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

  let diceDOM2 = document.querySelector("#dice2");
  let rollBtn2 = document.querySelector("#roll2");

  rollBtn2.addEventListener("click", function() {
    let randomNum2 = randomIntFromInterval2(0, 5);

    diceDOM2.innerHTML = dice2[randomNum2];
  });
</script>