Shulou(Shulou.com)06/01 Report--

This article shows you the Vue implementation of red packets rain Mini Game sample code is what, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article hope you can get something.

0 is written in front.

Red envelopes, also known as lucky money, are gifts of money wrapped in red paper by elders during the Lunar New year. It is said that during the Ming and Qing dynasties, most of the lucky money was given to children with red strings. After the Republic of China, it evolved to be wrapped in red paper. China's traditional national culture of red envelopes is like this in the folk, and it is also pursued by communities and companies. In addition to the Spring Festival, there is also the custom of giving red envelopes on other festive occasions, such as weddings and the opening of new stores.

This Spring Festival special project uses the code to make a red packet rain Mini Game, the effect is as follows. After reading this article, I believe you can also complete such a Mini Game design.

1 preparation work

Use Vue to build the project. The process is

Vue init webpack vue-demo

Cd vue-demo

Cnpm install # npm install

Download some festive pictures from the Internet as backgrounds and red packet styles, which can be chosen to give students plenty of freedom if they want to do a good job.

2 Design HTML+CSS style

Html style is very simple, mainly divided into two parts: red packet rain and grab red packet panel.

{{result}} continue to grab red packets

The CSS style is a little more complex and is put in the complete code below, as needed. Among them, annimation animation rendering style is rarely used.

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

As explained here, the common parameters of annimation are as follows:

Animation-name: Keyframe animation nam

Animation-duration: animation execution time

Animation-timing-function: the execution speed function of animation

Animation-delay: animation delay time

Animation-iteration-count: number of times animation is executed

Animation-direction: animation execution direction, including alternate (spaced motion), reverse (inverse motion), reverse-alternate (reverse spaced motion)

Animation-fill-mode: specifies the style to be applied to the element when the animation is not played (when the animation is complete, or when the animation has a delay that does not start), including forwards (the animation stops at the position of the last Keyframe), backwards (the first Keyframe of the animation is executed immediately), both (the first Keyframe also stops at the last Keyframe)

After the completion of the design, the running results are shown in the following figure, which are the background and the panel respectively.

3 Design JavaScript logic

The logic of the program is as follows

The most important thing mentioned above is to monitor users' behavior of grabbing red packets and determine whether they have grabbed red packets. The listening function is designed as follows. If the red packets are successfully snatched, the total amount will be automatically accumulated.

MouseHandler (e) {var event = e | | window.event, money = event.target.dataset.money; if (money) {this.result = "Congratulations on getting the red packet" + money + "Yuan"; for (var I = 0, len = this.imgList.length; I < len; ipackets +) {this.imgList [I] .style.animationPlayState = "paused";} panel.style.display = "block" This.totalMoney + = Number (money);}}

Next, we need to consider how to make the red packets fall randomly. The core code is as follows:

For (var I = 0; I < num; iTunes +) {let img = new Image (); img.src = this.imgUrl; / / randomly set the distribution of red packets img.style.left = this.ranNum (0, window.innerWidth) + "px"; let delay = this.ranNum (0100) / 10; / / set the occurrence time of red packets img.style.animationDelay = delay + "s" If (this.delayTime < delay) {this.delayTime = delay; this.lastImg = img;} / / set the amount of each red packet img.dataset.money = this.ranNum (0, 1000) / 100

Other functions basically serve these two core functions, which are not discussed here.

4 complete code {{result}} continue to grab red packets export default {name: "App", data () {return {totalMoney: 0, / / all the total amount of red packets snatched: delayTime: 0, / / delay lastImg: null, / / the last dropped picture imgList: null / / Red packet random sequence result: "", / / Game result imgUrl: require (". / assets/hongbao.jpg"),} }, methods: {/ / @ breif: start the game start () {let dom = this.createDom (20); this.imgList = document.getElementsByTagName ("img"); document.getElementById ("wrapper") .appendChild (dom);}, / / @ breif: create red packet sequence createDom (num) {/ / create document fragments let frag = document.createDocumentFragment () For (var I = 0; I < num; iTunes +) {let img = new Image (); img.src = this.imgUrl; / / randomly set the distribution of red packets img.style.left = this.ranNum (0, window.innerWidth) + "px"; let delay = this.ranNum (0100) / 10; / / set the occurrence time of red packets img.style.animationDelay = delay + "s" If (this.delayTime < delay) {this.delayTime = delay; this.lastImg = img;} / / set the amount of each red packet img.dataset.money = this.ranNum (0, 1000) / 100; frag.appendChild (img);} return frag }, / / @ breif: continue the game gameOn () {document.getElementById ("panel"). Style.display = "none"; for (let I = 0, len = this.imgList.length; I < len; iTunes +) {this.imgList.style.animationPlayState = "running" }, / / listen to the mouse event mouseHandler (e) {var event = e | | window.event, money = event.target.dataset.money; if (money) {this.result = "Congratulations on getting the red packet" + money + "Yuan"; for (var I = 0, len = this.imgList.length; I < len; ipackets +) {this.imgList.style.animationPlayState = "paused" } panel.style.display = "block"; this.totalMoney + = Number (money);}}, / / monitor animation event annimationHandler (e) {document.getElementById ("panel"). Style.display = "block"; this.result = "Congratulations on winning a total of" + this.totalMoney.toFixed (2) + "Yuan" }, / / @ breif: generate random numbers ranNum (min, max) {return Math.ceil (Math.random () * (max-min) + min) between min~max;},}, mounted () {this.start (); window.addEventListener ("mousedown", this.mouseHandler); this.lastImg.addEventListener ("webkitAnimationEnd", this.annimationHandler);},}; * {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; / * fall animation * / animation: dropDowm 3s forwards; / * rotation animation * /} @ 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;} what is the sample code for Vue to implement Red packet Rain Mini Game? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.