当前位置：首页 > JavaScript

js实现色子

2026-04-05 09:41:11JavaScript

实现色子的基本思路

使用JavaScript创建一个色子（骰子）模拟器，可以通过随机数生成1到6的数字，模拟真实的掷骰子效果。以下是几种实现方式。

方法一：基础随机数生成

使用Math.random()生成随机数，并通过数学运算将其映射到1-6的整数范围：

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}
console.log(rollDice()); // 输出1到6的随机整数

方法二：动画效果模拟

通过HTML和CSS实现视觉化的骰子，并添加动画效果：

<div id="dice">⚀</div>
<button onclick="roll()">掷骰子</button>

<script>
  const diceFaces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
  function roll() {
    const dice = document.getElementById('dice');
    let rolls = 0;
    const interval = setInterval(() => {
      dice.textContent = diceFaces[Math.floor(Math.random() * 6)];
      rolls++;
      if (rolls > 10) {
        clearInterval(interval);
      }
    }, 100);
  }
</script>

方法三：Canvas绘制骰子

使用Canvas动态绘制骰子面，适合需要自定义样式的场景：

<canvas id="diceCanvas" width="100" height="100"></canvas>
<button onclick="drawDice()">掷骰子</button>

<script>
  function drawDice() {
    const canvas = document.getElementById('diceCanvas');
    const ctx = canvas.getContext('2d');
    const value = Math.floor(Math.random() * 6) + 1;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(10, 10, 80, 80);

    // 根据点数绘制圆点
    if (value % 2 === 1) drawDot(ctx, 50, 50); // 中心点
    if (value > 1) { drawDot(ctx, 30, 30); drawDot(ctx, 70, 70); }
    if (value > 3) { drawDot(ctx, 30, 70); drawDot(ctx, 70, 30); }
    if (value === 6) { drawDot(ctx, 30, 50); drawDot(ctx, 70, 50); }
  }

  function drawDot(ctx, x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();
  }
</script>

方法四：三维骰子（WebGL/Three.js）

对于需要3D效果的场景，可以使用Three.js库：

js实现色子

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<div id="3d-dice"></div>
<button onclick="roll3D()">掷3D骰子</button>

<script>
  let renderer, scene, camera, dice;
  init3DDice();

  function init3DDice() {
    // 初始化场景、相机、渲染器等
    // 创建立方体几何体作为骰子
    // 添加材质和纹理
  }

  function roll3D() {
    // 设置随机旋转动画
    dice.rotation.x = Math.random() * Math.PI * 2;
    dice.rotation.y = Math.random() * Math.PI * 2;
  }
</script>