中秋博饼规则（纯js css）

好的，以下是一个简单的中秋博饼规则的实现，使用纯JS和CSS。

HTML部分：

<div class="dice-container">
  <div class="dice"></div>
  <button class="btn-roll">Roll</button>
</div>
<div class="result-container">
  <h2 class="result-title">Result</h2>
  <p class="result"></p>
</div>

CSS部分：

.dice-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.dice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('dice.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: background-position 0.3s ease-out;
}

.btn-roll {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 24px;
}

.result-container {
  text-align: center;
}

.result-title {
  font-size: 36px;
  font-weight: bold;
}

.result {
  font-size: 24px;
  font-weight: bold;
}

JavaScript部分：

// 获取元素
const dice = document.querySelector('.dice');
const rollBtn = document.querySelector('.btn-roll');
const result = document.querySelector('.result');

// 骰子图片的位置
const dicePos = [
  '0 0', // 1点
  '-100px 0', // 2点
  '-200px 0', // 3点
  '-300px 0', // 4点
  '-400px 0', // 5点
  '-500px 0' // 6点
];

// 掷骰子函数
function rollDice() {
  // 生成随机数，控制骰子图片位置
  const randomNum = Math.floor(Math.random() * 6);
  const pos = dicePos[randomNum];
  
  // 换图
  dice.style.backgroundPosition = pos;
  
  // 显示结果
  result.textContent = `You got ${randomNum + 1} point(s)`;
}

// 点击Roll按钮，触发掷骰子事件
rollBtn.addEventListener('click', rollDice);

在这个实现中，我们定义了一个骰子容器，包含一个骰子图片和一个Roll按钮。当点击Roll按钮时，会触发`rollDice`函数，该函数会生成一个随机数，控制骰子图片位置，然后换图。最后，会在结果容器中显示掷出的点数。

注意事项：

1. 骰子图片需要自己准备，可以在CSS中引用。
2. 在实际应用中，需要根据博饼规则，定义不同点数的奖品，以及对应的概率和数量。这里只是一个简单的展示。