用代码写和平精英中的扭蛋抽奖机制

好的，以下是一个简单的扭蛋抽奖机制的代码实现：

HTML代码：

<div class="machine">
  <div class="display"></div>
  <button class="btn" onclick="spin()">抽奖</button>
</div>

CSS代码：

.machine {
  width: 400px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  background-color: #f4f4f4;
  border: 5px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.display {
  width: 80%;
  height: 80%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #333;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  line-height: 300px;
}

.btn {
  width: 100px;
  height: 50px;
  margin: 20px auto;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #fff;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.btn:hover {
  background-color: #333;
  color: #fff;
}

JavaScript代码：

const prizes = [
  '腾讯充值卡 100 元',
  '腾讯充值卡 50 元',
  '腾讯充值卡 20 元',
  '50 金币',
  '20 金币',
  '10 金币',
  '5 金币',
  '再来一次',
];
const display = document.querySelector('.display');

function spin() {
  const randomIndex = Math.floor(Math.random() * prizes.length);
  display.innerHTML = prizes[randomIndex];
}

在这个代码中，我们使用了一个数组来存储奖品列表，每次点击抽奖按钮时，我们会生成一个随机数来作为奖品索引，然后在 `display` 元素中显示对应的奖品。