紅包也叫壓歲錢，是過農歷春節(jié)時長輩給小孩兒用紅紙包裹的禮金。據(jù)傳明清時期，壓歲錢大多數(shù)是用紅繩串著賜給孩子。民國以后，則演變?yōu)橛眉t紙包裹。中國的紅包傳統(tǒng)民族文化在民間如此，社區(qū)、公司也奉行如儀。除了春節(jié)以外，在其他喜慶場合，例如婚禮、新店開張等亦有送紅包的習俗。

本期迎新春專題用代碼制作一個紅包雨小游戲，效果如下所示?？赐瓯疚南嘈拍阋部梢酝瓿蛇@樣一個小游戲設計。

1 準備工作

使用 Vue 構建工程。流程為

vue init webpack vue-demo

cd vue-demo

cnpm install # npm install

從網(wǎng)絡上下載一些喜慶的圖片作為背景和紅包樣式，這些樣式可以任選，給想整活的同學們充足的自由度。

2 設計HTML+CSS樣式

html樣式很簡單，主要分為兩個部分：紅包雨和搶紅包面板。

<!-- 紅包雨 -->
<div id="wrapper"></div>

<!-- 搶紅包面板 -->
<div id="panel">
?? ?<div id="hb">
? ? ?? ?<span id="text">{{ result }}</span>
? ? ? ? <div id="btn" @click="gameOn">繼續(xù)搶紅包</div>
? ? </div>
</div>

CSS樣式稍微復雜一些，放在下文完整代碼中，需要的自取。其中比較少用的是annimation動畫渲染樣式

animation: dropDowm 3s forwards; /* 旋轉動畫 */
@keyframes dropDowm {
  0% {
    top: 0px;
    transform: translateY(-100%) rotate(0deg);
  }
  100% {
    top: 110%;
    transform: translateY(0%) rotate(360deg);
  }
}

這里講解一下，annimation常見參數(shù)如下：

animation-name：關鍵幀動畫名稱

animation-duration：動畫執(zhí)行時間

animation-timing-function：動畫的執(zhí)行速度函數(shù)

animation-delay：動畫延遲時間

animation-iteration-count：動畫執(zhí)行次數(shù)

animation-direction：動畫執(zhí)行方向，包含alternate(間隔運動)、 reverse(反向運動)、reverse-alternate(反向間隔運動)

animation-fill-mode：規(guī)定當動畫不播放時(當動畫完成時，或當動畫有一個延遲未開始播放時)，要應用到元素的樣式，包含forwards(動畫停止在最后一個關鍵幀的位置)、backwards(動畫第一個關鍵幀立即執(zhí)行)、both(第一個關鍵幀也停止在最后一個關鍵幀)

設計完成后運行結果如下圖所示，分別為背景和面板。

3 設計JavaScript邏輯

程序的邏輯如下所示

上述最關鍵的就是監(jiān)聽用戶搶紅包的行為，并判斷是否搶到了紅包，監(jiān)聽函數(shù)設計如下所示，如果成功搶到紅包，則總金額自動累加。

mouseHandler(e) {
      var event = e || window.event,
        money = event.target.dataset.money;
      if (money) {
        this.result = "恭喜搶到紅包" + money + "元";
        for (var i = 0, len = this.imgList.length; i < len; i++) {
          this.imgList[i].style.animationPlayState = "paused";
        }
        panel.style.display = "block";
        this.totalMoney += Number(money);
      }
    }

接下來要考慮如何讓紅包隨機掉落，核心代碼如下：

 for (var i = 0; i < num; i++) {
        let img = new Image();
        img.src = this.imgUrl;
        // 隨機設置紅包分布
        img.style.left = this.ranNum(0, window.innerWidth) + "px";
        let delay = this.ranNum(0, 100) / 10;
        // 設置紅包出現(xiàn)時間
        img.style.animationDelay = delay + "s";
        if (this.delayTime < delay) {
          this.delayTime = delay;
          this.lastImg = img;
        }
        //設置每個紅包的金額
        img.dataset.money = this.ranNum(0, 1000) / 100;

其他函數(shù)基本都是服務于這兩個核心功能的，這里不贅述。

4 完整代碼

<template>
  <div id="app">
    <!-- 紅包雨 -->
    <div id="wrapper"></div>
    <!-- 搶紅包面板 -->
    <div id="panel">
      <div id="hb">
        <span id="text">{{ result }}</span>
        <div id="btn" @click="gameOn">繼續(xù)搶紅包</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
? name: "App",
? data() {
? ? return {
? ? ? totalMoney: 0, // 所有搶到紅包的總金額
? ? ? delayTime: 0, // 延時
? ? ? lastImg: null, // 最后一張掉落的圖片
? ? ? imgList: null, // 紅包隨機序列
? ? ? result: "", // 游戲結果
? ? ? imgUrl: require("./assets/hongbao.jpg"),
? ? };
? },
? methods: {
? ? // @breif:開始游戲
? ? start() {
? ? ? let dom = this.createDom(20);
? ? ? this.imgList = document.getElementsByTagName("img");
? ? ? document.getElementById("wrapper").appendChild(dom);
? ? },
? ? // @breif: 創(chuàng)建紅包序列
? ? createDom(num) {
? ? ? // 創(chuàng)建文檔碎片
? ? ? let frag = document.createDocumentFragment();
? ? ? for (var i = 0; i < num; i++) {
? ? ? ? let img = new Image();
? ? ? ? img.src = this.imgUrl;
? ? ? ? // 隨機設置紅包分布
? ? ? ? img.style.left = this.ranNum(0, window.innerWidth) + "px";
? ? ? ? let delay = this.ranNum(0, 100) / 10;
? ? ? ? // 設置紅包出現(xiàn)時間
? ? ? ? img.style.animationDelay = delay + "s";
? ? ? ? if (this.delayTime < delay) {
? ? ? ? ? this.delayTime = delay;
? ? ? ? ? this.lastImg = img;
? ? ? ? }
? ? ? ? //設置每個紅包的金額
? ? ? ? img.dataset.money = this.ranNum(0, 1000) / 100;
? ? ? ? frag.appendChild(img);
? ? ? }
? ? ? return frag;
? ? },
? ? // @breif:繼續(xù)游戲
? ? gameOn() {
? ? ? document.getElementById("panel").style.display = "none";
? ? ? for (let i = 0, len = this.imgList.length; i < len; i++) {
? ? ? ? this.imgList[i].style.animationPlayState = "running";
? ? ? }
? ? },
? ? // 監(jiān)聽鼠標事件
? ? mouseHandler(e) {
? ? ? var event = e || window.event,
? ? ? ? money = event.target.dataset.money;
? ? ? if (money) {
? ? ? ? this.result = "恭喜搶到紅包" + money + "元";
? ? ? ? for (var i = 0, len = this.imgList.length; i < len; i++) {
? ? ? ? ? this.imgList[i].style.animationPlayState = "paused";
? ? ? ? }
? ? ? ? panel.style.display = "block";
? ? ? ? this.totalMoney += Number(money);
? ? ? }
? ? },
? ? // 監(jiān)聽動畫事件
? ? annimationHandler(e) {
? ? ? document.getElementById("panel").style.display = "block";
? ? ? this.result = "恭喜總共搶到了" + this.totalMoney.toFixed(2) + "元";
? ? },? ? // @breif:產生min~max間的隨機數(shù)
? ? ranNum(min, max) {
? ? ? return Math.ceil(Math.random() * (max - min) + min);
? ? },
? },
? mounted() {
? ? this.start();
? ? window.addEventListener("mousedown", this.mouseHandler);
? ? this.lastImg.addEventListener("webkitAnimationEnd", this.annimationHandler);
? },
};
</script>

<style>
* {
? padding: 0;
? margin: 0;
}

body {
? height: 100%;
? width: 100%;
? background: url("./assets/background.jpg");
? background-size: cover;
? overflow: hidden;
}

#wrapper img {
? position: absolute;
? transform: translateY(-100%); /* 下落動畫 */
? animation: dropDowm 3s forwards; /* 旋轉動畫 */
}
@keyframes dropDowm {
? 0% {
? ? top: 0px;
? ? transform: translateY(-100%) rotate(0deg);
? }
? 100% {
? ? top: 110%;
? ? transform: translateY(0%) rotate(360deg);
? }
}

#panel {
? display: none;
}

#panel::before {
? content: "";
? position: fixed;
? top: 0;
? left: 0;
? right: 0;
? bottom: 0;
? background-color: rgba(0, 0, 0, 0.5);
}

#hb {
? width: 350px;
? height: 450px;
? border-radius: 20px;
? background-color: #e7223e;
? color: #fad755;
? position: fixed;
? left: 50%;
? top: 50%;
? margin-top: -225px;
? margin-left: -175px;
? font-size: 30px;
? font-weight: 900;
? display: flex;
? flex-direction: column;
? justify-content: center;
? align-items: center;
}
#btn {
? background-color: #fad755;
? color: #e7223e;
? font-size: 18px;
? margin-top: 10px;
? padding: 10px;
? border: none;
? outline: none;
? cursor: pointer;
}
</style>

以上就是Vue實現(xiàn)紅包雨小游戲的示例代碼的詳細內容，更多關于Vue紅包雨游戲的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: