趣味圣诞抽奖：用60行代码畅享欢乐抽抽乐H5小游戏

2023-10-28 00:08:09

圣诞欢乐，从抽奖开始

圣诞节即将到来，在这个欢乐的节日里，少不了让人兴奋的抽奖活动。想要亲手打造一个趣味十足的圣诞抽奖小游戏吗？只需不到60行代码，就能实现一个高性能的H5抽奖游戏，让你和朋友们一起享受圣诞节的欢乐时光。

抽奖小游戏的实现

1. HTML结构搭建

首先，我们需要搭建游戏的HTML结构。创建一个名为index.html的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="container">
    <div id="grid"></div>
    <button id="spin">抽奖</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS样式美化

接下来，我们需要为游戏添加一些样式。创建一个名为style.css的文件，并添加以下代码：

#container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid black;
}

#grid {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

#spin {
  width: 100px;
  height: 50px;
  margin: 20px auto;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

3. JavaScript逻辑实现

现在，我们来编写游戏的JavaScript逻辑。创建一个名为script.js的文件，并添加以下代码：

// 定义奖品数组
const prizes = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "六等奖", "七等奖", "八等奖", "九等奖"];

// 定义九宫格元素数组
const grid = document.getElementById("grid");
const cells = grid.getElementsByTagName("div");

// 定义抽奖按钮
const spinButton = document.getElementById("spin");

// 定义当前奖品索引
let currentPrizeIndex = 0;

// 添加点击事件监听器
spinButton.addEventListener("click", () => {
  // 禁用按钮
  spinButton.disabled = true;

  // 随机生成奖品索引
  currentPrizeIndex = Math.floor(Math.random() * prizes.length);

  // 循环九宫格元素
  for (let i = 0; i < cells.length; i++) {
    // 添加高亮样式
    cells[i].classList.add("highlight");

    // 延迟移除高亮样式
    setTimeout(() => {
      cells[i].classList.remove("highlight");
    }, 100);
  }

  // 延迟显示中奖结果
  setTimeout(() => {
    alert(`恭喜你，获得${prizes[currentPrizeIndex]}！`);

    // 启用按钮
    spinButton.disabled = false;
  }, 1000);
});