Vue實現紅包雨小遊戲的示例程式碼
目錄
- 0 寫在前面
- 1 準備工作
- 2 設計HTML+樣式
- 3 設計邏輯
- 4 完整程式碼
0 寫在前面
紅包也叫壓歲錢,是過農曆春節時長輩給小孩兒用紅紙包裹的禮金。據傳明清時期,壓歲錢大多數是用紅繩串著賜給孩子。民國以後,則演變為用紅紙包裹。中國的紅包傳統民族文化在民間如此,社群、公司也奉行如儀。除了春節以外,在其他喜慶場合,例如婚禮、新店開張等亦有送紅包的習俗。
本期迎新春專題用程式碼製作一個 紅包雨小遊戲 ,效果如下所示。看完本文相信你也可以完成這樣一個小遊戲設計。
1 準備工作
使用 構建工程。流程為
vue init webpack vue-demo
cd vue-demo
cnpm install # npm install
從網路上下載一些喜慶的圖片作為背景和紅包樣式,這些樣式可以任選,給想整活的同學們充足的自由度。
2 設計HTML+CSS樣式
html樣式很簡單,主要分為兩個部分:紅包雨 和 搶紅包面板。
<!-- 紅包雨 -->
<div id="wrapper"></div>
<!-- 搶紅包面板 -->
<div id="panel">
<div id="hb">
<spanhttp://www.cppcns.com id="text">{{ result }}</span>
<div id="btn" @click="gameOn">繼續搶紅包</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常見引數如下:
animation-name:關鍵幀動畫名稱
animation-duration:動畫執行時間
animation-timing-function: 動畫的執行速度函式
animation-delay: 動畫延遲時間
animation-iteration-count:動畫執行次數
animation-direction: 動畫執行方向,包含alternate(間隔運動)、 reverse(反向運動)、reverse-alternate(反向間隔運動)
animation-fill-mode:規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式,包含forwards(動畫停止在最後一個關鍵幀的位置)、backwards(動畫第一個關鍵幀立即執行)、both(第一個關鍵幀也停止在最後一個關鍵幀)
設計完成後執行結果如下圖所示,分別為背景和麵板。
3 設計Script邏輯
程式的邏輯如下所示
上述最關鍵的就是監聽使用者搶紅包的行為,並判斷是否搶到了紅包,監聽函式設計如下所示,如果成功搶到紅包,則總金額自動累加。
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; // 設定紅包出現時間 img.style.animationDelay = delay + "s"; if (this.delayTime < delay) { this.delayTime = delay; this.lastImg = img; } //設定每個紅包的金額 img.dataset.money = this.ranNum(0,1000) / 100;
其他函式基本都是服務於這兩個核心功能的,這裡不贅述。
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">繼續搶紅包</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: 建立紅包序列 createDom(num) { // 建立文件碎片 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; // 設定紅包出現時間 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:繼續遊戲 gameOn() { document.getElementById("panel").style.display = "none"; for (let i = 0,len = this.imgList.length; i < len; i++) { this.imgList[i].style.animationPlayState = "running"; } },// 監聽滑鼠事件 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); } },// 監聽動畫事件 annimationHandler(e) { document.getElementById("panel").style.display = "block"; this.result = "恭喜總共搶到了" + this.totalMoney.toFixed(2) + "元"; },// @breif:產生min~max間的隨機數 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;
marginhttp://www.cppcns.com: 0;
}
body {
height: 100%;
width: 100%;
background: url("./assets/background.jpg");
background-size: cover;
overflow: hidden;
}
#wrapper img {
position: absolute;
transform: translateY(-100%); /* 下落動畫 */
animationhttp://www.cppcns.com: 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.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;
www.cppcns.comjustify-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實現紅包雨小遊戲的示例程式碼的詳細內容,更多關於Vue紅包雨遊戲的資料請關注我們其它相關文章!