中秋博饼js

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

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点
];

// 定义奖品
const prizes = [
  { name: '一等奖', prob: 1/2000, count: 1 },
  { name: '二等奖', prob: 1/200, count: 5 },
  { name: '三等奖', prob: 1/20, count: 50 },
  { name: '参与奖', prob: 1, count: 500 }
];

// 掷骰子函数
function rollDice() {
  // 生成随机数，控制骰子图片位置
  const randomNum = Math.floor(Math.random() * 6);
  const pos = dicePos[randomNum];
  
  // 换图
  dice.style.backgroundPosition = pos;
  
  // 检查是否中奖
  const prize = checkPrize(randomNum);
  
  // 显示结果
  if (prize) {
    result.textContent = `Congratulations! You got ${prize.name}`;
  } else {
    result.textContent = 'Sorry, no prize this time';
  }
}

// 检查是否中奖函数
function checkPrize(num) {
  let totalProb = 0;
  
  // 计算总概率
  for (let i = 0; i < prizes.length; i++) {
    totalProb += prizes[i].prob;
  }
  
  // 生成随机数
  const randomProb = Math.random() * totalProb;
  
  // 判断是否中奖
  let probSum = 0;
  for (let i = 0; i < prizes.length; i++) {
    probSum += prizes[i].prob;
    if (randomProb < probSum) {
      if (prizes[i].count > 0) {
        prizes[i].count--;
        return prizes[i];
      } else {
        return null;
      }
    }
  }
}

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

在这个实现中，除了之前的骰子和Roll按钮，我们还定义了一个奖品数组`prizes`，包含奖品的名称、概率和数量。在掷骰子时，会先生成一个随机数，控制骰子图片位置，然后判断是否中奖，如果中奖，会从奖品数组中找到一个可用的奖品，数量减1，并在结果容器中显示奖品名称。如果没有中奖，只显示提示信息。

注意事项：

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