标签：function arr 微信 height 金币 小游戏 var coin border

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

效果如下：

实际效果预览：

主要代码：

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

标签：function,arr,微信,height,金币,小游戏,var,coin,border
来源： https://www.cnblogs.com/luangeng/p/16062159.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。