本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

Vue实现红包雨小游戏的代码

JavaScript 来源：互联网 作者：秩名 发布时间：2022-01-26 13:00:40 人浏览
摘要

0 写在前面 红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。据传明清时期，压岁钱大多数是用红绳串着赐给孩子。民国以后，则演变为用红纸包裹。中国的红包传统

0 写在前面

红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。据传明清时期，压岁钱大多数是用红绳串着赐给孩子。民国以后，则演变为用红纸包裹。中国的红包传统民族文化在民间如此，社区、公司也奉行如仪。除了春节以外，在其他喜庆场合，例如婚礼、新店开张等亦有送红包的习俗。

本期迎新春专题用代码制作一个 红包雨小游戏 ，效果如下所示。看完本文相信你也可以完成这样一个小游戏设计。

1 准备工作

使用 Vue 构建工程。流程为

vue init webpack vue-demo

cd vue-demo

cnpm install # npm install

从网络上下载一些喜庆的图片作为背景和红包样式，这些样式可以任选，给想整活的同学们充足的自由度。

2 设计HTML+CSS样式

html样式很简单，主要分为两个部分：红包雨 和 抢红包面板。

1

2

3

4

5

6

7

8

9

10

<!-- 红包雨 -->

<div id="wrapper"></div>

 

<!-- 抢红包面板 -->

<div id="panel">

    <div id="hb">

        <span id="text">{{ result }}</span>

        <div id="btn" @click="gameOn">继续抢红包</div>

    </div>

</div>

CSS样式稍微复杂一些，放在下文完整代码中，需要的自取。其中比较少用的是annimation动画渲染样式

1

2

3

4

5

6

7

8

9

10

11

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 设计JavaScript逻辑

程序的逻辑如下所示

上述最关键的就是监听用户抢红包的行为，并判断是否抢到了红包，监听函数设计如下所示，如果成功抢到红包，则总金额自动累加。

1

2

3

4

5

6

7

8

9

10

11

12

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);

      }

    }

接下来要考虑如何让红包随机掉落，核心代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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 完整代码

1

2

3

4

5

6

7

8

9

10

11

12

13

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<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实现红包雨小游戏的示例代码的详细内容
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/FRIGIDWINTER/article/details/122657908
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计