中秋博饼规则（纯js css）

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

HTML部分：

<div class="dice-container">
  <div class="dice"></div>
</div>

<button class="roll-button">掷骰子</button>

<div class="result-container">
  <p>您掷出了 <span class="result"></span> 点</p>
  <p class="prize"></p>
</div>

CSS部分：

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

.dice {
  width: 80px;
  height: 80px;
  background-image: url("path/to/dice.png");
  background-position: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  animation: rolling 1s infinite;
}

@keyframes rolling {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position: -80px 0;
  }
  40% {
    background-position: -160px 0;
  }
  60% {
    background-position: -240px 0;
  }
  80% {
    background-position: -320px 0;
  }
  100% {
    background-position: -400px 0;
  }
}

.roll-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 10px;
  background-color: #f00;
  color: #fff;
  cursor: pointer;
}

.result-container {
  text-align: center;
  margin-top: 20px;
}

.result-container p {
  font-size: 20px;
  margin-bottom: 10px;
}

.prize {
  font-weight: bold;
  font-size: 24px;
  color: #f00;
}

JS部分：

const diceContainer = document.querySelector('.dice-container');
const dice = document.querySelector('.dice');
const rollButton = document.querySelector('.roll-button');
const result = document.querySelector('.result');
const prize = document.querySelector('.prize');

const prizes = [
  { points: 1, text: '一秀' },
  { points: 2, text: '二举' },
  { points: 3, text: '三红' },
  { points: 4, text: '四进' },
  { points: 5, text: '五子登科' },
  { points: 6, text: '六杯黑' }
];

function rollDice() {
  const points = Math.floor(Math.random() * 6) + 1;
  dice.classList.add('rolling');
  setTimeout(() => {
    dice.classList.remove('rolling');
    result.innerText = points;
    const prizeText = prizes.find(p => p.points === points)?.text || '';
    prize.innerText = prizeText;
  }, 1000);
}

rollButton.addEventListener('click', rollDice);

这段代码实现了一个简单的中秋博饼游戏，点击“掷骰子”按钮后，会随机生成一个1到6的数字，同时动画显示骰子滚动的效果，并在一段时间后停止并显示点数和对应的奖项。奖项的规则和奖品文字可以在`prizes`数组中自定义。