微信小程序学习之路 做一个捡金币的小游戏：

效果如下：

实际效果预览：

主要代码：

view.js

// pages/templates/react/view.js
var timer1 = undefined
var timer2 = undefined
var mp3s = []
var mp3index = 0
Page({

    data: {
        left: 300,
        count: 0,
        arr: [{}],
        rate: ''
    },

    onl oad: function (options) {},

    onReady: function () {
        for (var i = 0; i < 3; i++) {
            var mp3 = wx.createInnerAudioContext()
            mp3.loop = false;
            mp3.autoplay = false;
            mp3.src = 'mp3/gugu2.mp3';
            mp3s.push(mp3)
        }
    },

    onShow: function () {
        this.runDown()
        this.runUp()
        for (var i = 0; i < 9; i++) {
            this.setData({
                ['arr[' + i + '].up']: false,
                ['arr[' + i + '].t']: new Date().getTime()
            })
        }
    },

    onHide: function () {
        if (timer1) {
            clearTimeout(timer1)
        }
        if (timer2) {
            clearTimeout(timer2)
        }
    },

    onShareAppMessage: function () {
        if (this.data.rate == '') {
            return {
                title: '捡金币了，手速快的来。',
            }
        } else {
            return {
                title: '我捡了' + this.data.count + '个金币，打败了' + this.data.rate + '%的网友！',
            }
        }
    },

    runDown: function () {
        var that = this
        timer1 = setTimeout(function () {
            for (var i = 0; i < 9; i++) {
                var kk = that.data.arr[i]
                var nt = new Date().getTime()
                if (kk.up && nt - kk.t > 700) {
                    that.down(i)
                }
            }
            if (that.data.left - 1 < 0) {
                that.stop()
                return
            }
            that.setData({
                left: that.data.left - 1
            })
            that.runDown()
        }, 100)
    },

    runUp: function () {
        var that = this
        timer2 = setTimeout(function () {
            for (var i = 0; i < 3; i++) {
                var id = that.random1()
                if (!that.data.arr[id].up) {
                    that.up(id)
                }
            }
            that.runUp()
        }, this.random())
    },

    play: function () {
        var mp3 = mp3s[mp3index]
        mp3.stop()
        mp3.play()
        mp3index++
        if (mp3index == mp3s.length) {
            mp3index = 0
        }
    },

    hit: function (e) {
        this.play()
        this.setData({
            count: this.data.count + 1
        })
        this.down(e.currentTarget.dataset.id)
    },

    stop: function () {
        if (timer1) {
            clearTimeout(timer1)
        }
        if (timer2) {
            clearTimeout(timer2)
        }
        for (var i = 0; i < 9; i++) {
            if (this.data.arr[i].up) {
                this.down(i)
            }
        }
        var rate = this.data.count * 100 / 60
        if (rate > 100) rate = 99.99
        rate = Math.floor(rate * 100) / 100
        this.setData({
            rate: rate
        })
    },

    up: function (i) {
        this.setData({
            ['arr[' + i + '].up']: true,
            ['arr[' + i + '].t']: new Date().getTime(),
        })
    },

    down: function (i) {
        this.setData({
            ['arr[' + parseInt(i) + '].up']: false,
        })
    },

    random: function () {
        return (Math.floor(Math.random() * 1000) + 500);
    },
    random1: function () {
        return Math.floor(Math.random() * 9)
    },
    random2: function () {
        return Math.floor(Math.random() * 2) + 1
    },

    more: function () {
        if (timer1) {
            clearTimeout(timer1)
        }
        if (timer2) {
            clearTimeout(timer2)
        }
        this.setData({
            left: 300,
            count: 0,
        })
        this.runUp()
        this.runDown()
        for (var i = 0; i < 9; i++) {
            this.setData({
                ['arr[' + i + '].up']: false,
                ['arr[' + i + '].t']: new Date().getTime()
            })
        }
    },
})

view.wxml

<!--pages/templates/react/view.wxml-->
<view>

    <view class="title" bindtap="play">捡金币挑战</view>
    <text class="title" decode="true">得分：{{count}} &nbsp;&nbsp;&nbsp;&nbsp;剩余：{{left/10}}秒</text>

    <view class="ground">
        <view class="box" wx:for="123456789" wx:for-index="idx">
            <view class='coin' data-id="{{idx}}" hidden="{{!arr[idx].up}}" bindtap="hit">
                <view class='front'>
                    <view class='star'></view>
                    <span class='currency'>$</span>
                    <view class='shapes'>
                        <span class='top'>عظمى</span>
                        <span class='bottom'>عملة</span>
                    </view>
                </view>
            </view>
        </view>
    </view>

</view>

<view class="foot">
    <view class="button1" bindtap="more">重新开始</view>
    <label for="s1" class="button1">发起挑战</label>
    <button open-type="share" id="s1" style="display:none"></button>
</view>

view.wxss

/* pages/templates/react/view.wxss */

.title {
    margin: 20rpx;
    font-size: large;
}

.ground {
    display: grid;
    grid-template-columns: auto auto auto;
    height: 320px;
    padding: 10px;
}

.box {
    margin: 3px;
    padding: 10rpx;
    height: 100px;
    width: 100px;
    color: white;
    border-radius: 10px;
    background-color: black;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin {
    height: 70px;
    width: 70px;
}

.coin .front,
.coin .back {
    height: 70px;
    width: 70px;
    background: #ffbd0b;
    border-radius: 50%;
    border-top: 4px solid #ffd84c;
    border-left: 4px solid #ffd84c;
    border-right: 4px solid #d57e08;
    border-bottom: 4px solid #d57e08;
    transform: rotate(44deg);
}

.coin .front:before,
.coin .back:before {
    content: "";
    border: 0;
    margin: 16px 16px;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #f0a608;
    border-radius: 50%;
    border-bottom: 4px solid #ffd84c;
    border-right: 4px solid #ffd84c;
    border-left: 4px solid #d57e08;
    border-top: 4px solid #d57e08;
    z-index: 2;
}

.coin .front .currency,
.coin .back .currency {
    overflow: hidden;
    position: absolute;
    color: #ffbd0b;
    font-size: 20px;
    font-weight: bold;
    transform: rotate(-44deg);
    line-height: 3;
    width: 100%;
    height: 100%;
    text-align: center;
    text-shadow: 0 3px 0 #cb7407;
    z-index: 3;
    border-radius: 50%;
}

.coin .front .shapes,
.coin .back .shapes {
    transform: rotate(-44deg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.coin .front .shapes div,
.coin .back .shapes div {
    width: 7px;
    height: 2px;
    background: #d57e08;
    border-top: 2px solid #c47207;
    margin: 10px 7px;
}

.coin .front .shapes div:before,
.coin .back .shapes div:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 4px;
    background: #d57e08;
    border-top: 2px solid #c47207;
    margin: -10px 0;
}

.coin .front .shapes div:after,
.coin .back .shapes div:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 4px;
    background: #d57e08;
    border-top: 2px solid #c47207;
    margin: 8px 0;
}

.coin .front .top,
.coin .back .top {
    font-size: 10px;
    color: #d67f08;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
}

.coin .front .bottom,
.coin .back .bottom {
    font-size: 10px;
    color: #d67f08;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

end