当前位置：首页 > JavaScript

js实现骰子

2026-03-02 07:06:36JavaScript

实现骰子的基本思路

使用JavaScript实现骰子功能，核心是通过随机数生成骰子的点数，并结合DOM操作或Canvas绘制骰子图形。以下是两种常见实现方式：

方法1：DOM + CSS实现骰子

通过HTML元素和CSS样式模拟骰子外观，利用JavaScript控制点数变化。

HTML结构

<div id="dice">
  <div class="dot"></div>
  <!-- 其他骰子点数对应的dot元素 -->
</div>
<button id="roll">掷骰子</button>

CSS样式

js实现骰子

#dice {
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  position: relative;
  margin: 20px;
}
.dot {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  display: none;
}

JavaScript逻辑

document.getElementById('roll').addEventListener('click', function() {
  const dice = document.getElementById('dice');
  const dots = dice.querySelectorAll('.dot');
  const roll = Math.floor(Math.random() * 6) + 1;

  // 隐藏所有点数
  dots.forEach(dot => dot.style.display = 'none');

  // 根据随机数显示对应点数
  switch(roll) {
    case 1:
      dots[0].style.display = 'block';
      dots[0].style.top = '40px';
      dots[0].style.left = '40px';
      break;
    // 其他点数布局...
    case 6:
      dots.forEach(dot => dot.style.display = 'block');
      // 设置6个点的位置
      break;
  }
});

方法2：Canvas绘制骰子

使用Canvas动态绘制骰子图形，适合需要更复杂视觉效果的情况。

HTML结构

js实现骰子

<canvas id="diceCanvas" width="200" height="200"></canvas>
<button id="rollCanvas">掷骰子</button>

JavaScript逻辑

const canvas = document.getElementById('diceCanvas');
const ctx = canvas.getContext('2d');

function drawDice(number) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.roundRect(50, 50, 100, 100, 10);
  ctx.fill();
  ctx.stroke();

  ctx.fillStyle = 'black';
  // 根据点数绘制圆点
  if (number === 1 || number === 3 || number === 5) {
    ctx.beginPath();
    ctx.arc(100, 100, 8, 0, Math.PI * 2);
    ctx.fill();
  }
  // 其他点数布局...
}

document.getElementById('rollCanvas').addEventListener('click', function() {
  const roll = Math.floor(Math.random() * 6) + 1;
  drawDice(roll);
});

骰子点数布局参考

骰子点数的标准布局如下（以中心为坐标原点）：

1点：中心
2点：左上和右下
3点：左上、中心、右下
4点：四个角落
5点：四个角落加中心
6点：分两排三个点

动画效果增强

可以为骰子添加旋转动画提升体验：

function animateRoll() {
  let rotations = 0;
  const interval = setInterval(() => {
    rotations++;
    dice.style.transform = `rotate(${rotations * 30}deg)`;
    if (rotations > 10) {
      clearInterval(interval);
      // 显示最终点数
    }
  }, 100);
}