小程序之H5游戏砸金蛋

前文说明

这里用到了vant组件库，具体引用可以查看我的这篇博客，及css3进行砸金蛋动画功能的实现。本文大概4千字，阅读需要5分钟。如需要本文素材，可以留言，看到后将会第一时间回复。

---

一、效果演示

---

二、代码解读

2.1、hitgoldeneggs.wxml

<view class="hitgoldeneggs-container">
  <image mode="widthFix" class="{{flyFlag ? 'flybird flybird-active' : 'flybird'}}" src="../../img/bird.png"></image>
  <view class="egg-home">
    <image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-first stop-move' : 'egg egg-first'}}"
      data-egg="egg1" src="{{eggImg1}}"></image>
    <image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-second stop-move' : 'egg egg-second'}}"
      data-egg="egg2" src="{{eggImg2}}"></image>
    <image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-third stop-move' : 'egg egg-third'}}"
      data-egg="egg3" src="{{eggImg3}}"></image>
    <image mode="widthFix" class="{{ hitFlag ? 'hit hit-active' : 'hit'}}" style="top: {{hitTop}}; left: {{hitLeft}}"
      src="../../img/hit.png"></image>
  </view>
</view>

1、class采用动态监听是否移动
2、金蛋图片采用js变量控制，这样就可以控制金蛋没被砸和被砸图片的控制
3、锤子也采用了js变量控制位置

---

2.2、hitgoldeneggs.js

// pages/hitgoldeneggs/hitgoldeneggs.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    stopMove: false,
    eggImg1: '../../img/egg.png',
    eggImg2: '../../img/egg.png',
    eggImg3: '../../img/egg.png',
    openFlag: true,
    hitTop: '',
    hitLeft: '',
    hitFlag: false,
    flyFlag: false,
  },
  /**
   * 没中奖 飞出小乌鸦
   */
  flyBird() {
    this.setData({
      flyFlag: true
    })
    setTimeout(() => {
      this.setData({
        flyFlag: false
      })
    }, 6500)
  },
  /**
   * 点击金蛋 停止所有金蛋动画 留在最后一帧
   */
  eggHandle(e) {
    const self = this
    let x = e.currentTarget.offsetLeft + 70; // 设置锤子的横坐标
    let y = e.currentTarget.offsetTop - 30; // 设置锤子的纵坐标

    if (this.data.openFlag) {
      this.setData({
        hitTop: y + 'px',
        hitLeft: x + 'px',
        hitFlag: true
      })
      let egg = e.currentTarget.dataset.egg
      setTimeout(() => {
        if (egg == 'egg1') {
          this.setData({
            eggImg1: '../../img/openegg.png'
          })
        } else if (egg == 'egg2') {
          this.setData({
            eggImg2: '../../img/openegg.png'
          })
        } else if (egg == 'egg3') {
          this.setData({
            eggImg3: '../../img/openegg.png'
          })
        }
      }, 500)
    }

    this.setData({
      stopMove: true,
      openFlag: false
    })
    setTimeout(() => {
      wx.showModal({
        title: '未中奖！',
        confirmText: '再来一次',
        // content: res.meta.msg,
        success(res) {
          if (res.confirm) {
            self.setData({
              stopMove: false,
              openFlag: true,
              hitFlag: false,
              eggImg1: '../../img/egg.png',
              eggImg2: '../../img/egg.png',
              eggImg3: '../../img/egg.png',
            })
          } 
        }
      })
      setTimeout(() => {
        self.flyBird();
      }, 500)
    }, 800)

  },
})

1、点击金蛋后，设置锤子的坐标，获取哪个金蛋，并将这个金蛋图片更换成砸开后的金蛋图片。

---

2.3、hitgoldeneggs.wxss

page {
  height: 100%;
}

.hitgoldeneggs-container {
  width: 100%;
  height: 100%;
  background-image: url(https://shouyiba.xyz/img/za-bg.png);
  background-size: 100%;
  position: relative;
}

.egg-home {
  position: absolute;
  top: 30%;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}

.egg {
  width: 118px;
  height: auto;
}

.egg-first {
  position: absolute;
  animation: animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
    animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    scale 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;

}

.egg-second {
  position: absolute;
  animation: animX 2.5s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
    animY 2.5s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  /* animation-delay: 1s; */
}

.egg-third {
  position: absolute;
  animation: animX 3s linear 0s infinite alternate,
    animY 3s linear -1s infinite alternate;
  /* animation-delay: 2s; */
}

@keyframes animX {
  0% {
    left: 0px;
  }

  100% {
    left: 70%;
  }
}

@keyframes animY {
  0% {
    top: 30px;
  }

  100% {
    top: 80px;
  }
}

.stop-move {
  animation-play-state: paused;
}

.hit {
  /* display: none; */
  visibility: hidden;
  position: absolute;
  width: 50px;
  height: auto;
  transition: all 0.3s ease-in;
}

.hit-active {
  /* display: block; */
  visibility: unset;
  transform: rotateZ(-45deg);
}

.active-rules {
  position: absolute;
  top: 65%;
  width: 100%;
}

.active-title {
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

@keyframes awardIconTada {
  0% {
    transform: scale3d(.86, .86, .86);
  }

  50% {
    transform: scale3d(1, 1, 1);
  }

  100% {
    transform: scale3d(.86, .86, .86);
  }
}

.rules-close {
  padding-right: 20px;
  /* padding-top: 20px; */
}

.rules-desc {
  height: 100%;
}

.jt-card {
  width: 100%;
  background-color: #fff;
  padding: 10px 10px 0 10px;
  margin: 10px auto 0;
  /* transform: translateY(-70px); */
  border-radius: 10px;
  /* width: 93%; */
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); */
}

.jt-card-item {
  margin-top: 10px;
  padding: 0 10px;
}

.rules-desc-text,
.rules-desc-text {
  font-size: 15px;
  color: rgb(122, 121, 121);
}

.rules-desc-company {
  font-size: 15px;
  color: red;
}

.hit-egg-num {
  color: yellow;
}

.complaints {
  position: absolute;
  right: 20px;
  bottom: -80px;
  color: #fff;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .3);
  border-radius: 3px;
}

@media only screen and (min-width: 750px) {
  .egg-home {
    top: 60%;
  }

  .active-rules {
    top: 84%;
  }
}

.flybird {
  display: none;
  height: auto;
  width: 100px;
  position: absolute;
  top: 0.8rem;
  right: 0.6rem;
  z-index: 9999;
}
.flybird-active {
  display: block;
  animation: birdFly 6s ease-out forwards;
}

@keyframes birdFly {
  0% {
    right: 0.6rem;
  }

  100% {
    right: 20rem;
  }
}

---

2.4、hitgoldeneggs.json

{
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index",
    "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-empty": "@vant/weapp/empty/index"
  },
  "navigationBarTitleText": "砸金蛋赢大礼"

}