「速算王者」简约速算小游戏，比比谁更快（可在线体验）

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

前言

速算王者，也可叫心算王者，大概的玩法就是随机给你一些数字进行加减乘除速算，尽可能花最短时间完成全部作答，并且可以向好友发送战绩进行挑战！灵感来源于微信群天天可见的小游戏战绩截图以及前段时间了解到速算这个概念，恰逢掘金社区的谁是头号玩家游戏投稿大赛活动开始，于是乎就打算花两天时间把这个放松娱乐的小游戏琢磨出来。

体验

最近正好在研究DCloud的UniAPP,就打算把这个小游戏初代版本以微信小程序的方式发布出来。扫描下面的小程序二维码即可体验速算王者小游戏。

思路

既然是用于好友间的放松小游戏，整个游戏的流程就不建议设计的太复杂，而且本身小游戏重点在于社交娱乐，所以游戏的思路大致如下。

玩法模式

速算也叫心算，是指利用数与数之间的特殊关系进行较快的加减乘除运算，用一种思维，一种方法快速准确地掌握任意数加、减、乘、除的速算方法。考虑到娱乐性，暂时只开放了两位数的加法、两位数的减法、两位数的乘法以及三位数的加法四种游戏模式（毕竟除法和三位数的乘法对正常人来说太复杂...）每次游戏的计算数量暂定为10个。
题目数据

为保证游戏的公平性，游戏内用于速算的题目数据都来自于随机生成的数字并且不重复。
游戏规则

选择好模式进入游戏后，即可看到速算界面，你需要快速计算屏幕上给出的题目并且输入正确答案再按 OK 键，如果你的输入答案是正确的则会自动进入下一题，如果计算失败则会自动清空你的错误输入并需要你重新进行计算。如果输入有误可以点击左下角的C键进行清空。游戏右上角会记录当前耗时时长。
好友玩法

在正常进行完速算游戏后，可以看到自己的完成时间，你可以分享给你自己任意的微信好友或者微信群组，在好友点击邀请链接进入游戏后即可看到他所需要挑战的时间，好友速算的题目和你的题目是一样的，并且游戏右上角会出现你需要挑战的目标时间，挑战失败后可以再次重新挑战，直到挑战成功为止。

实现

小游戏主要的页面是速算页面。首先是简单的页面实现。

数字键盘部分

CSS部分就是用的大家熟知的flex布局，也算是实现数字键盘最简单的方式了。


.calc-box {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;

    &-item {
        flex: 1 1 33.33%;
        height: 180rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #585858;
        border: .5px solid #e0e0e0;
        margin: -.5px;
    }
 }
复制代码

最终效果

随机题目

从题库中随机挑选指定数量的题目之后再根据选择的模式实现公式

/* 初始化 */
init() {
    let list = this.type === 'twoAdd' ? listTwoAdd : this.type === 'twoReduce' ? listTwoReduce : this.type ===
            'twoRide' ? listTwoRide : listThreeAdd
    this.questionList = this.getRandomArrayElements(list.default, this.count)
    this.numA = this.questionList[0].a
    this.numB = this.questionList[0].b
    clearInterval(this.timer)
    this.timer = setInterval(this.show, 10)
},
/* 随机从题库挑选指定数量的题目 */
getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
},
复制代码

再给用户一个输入框，将用户输入的结果自动进行答案结算

<!-- 内容部分 -->
<view class="calc-content">
    <view class="calc-content-question">
    <span>{{ numA }}</span>
    <span> {{ type === 'twoAdd' || type === 'threeAdd' ? '+' : type === 'twoReduce' ? '-' : 'x' }} </span>
    <span>{{ numB }}</span>
    </view>
    <view class="calc-content-answer">
        <input type="text" :value="curAnswer" disabled />
    </view>
</view>
复制代码

定时器

右上角需要显示当前答题耗时时长,实际上就是定义一个计时器，每10毫秒进行时间更新。

this.timer = setInterval(this.show, 10)

<!-- 头部 -->
<view class="calc-header">
    <navigator url="../welcome/home" open-type="navigateBack">
            <image src="../../static/close.png" mode="widthFix"></image>
    </navigator>
    <view class="calc-header-right">
        <span style="margin-right: 10px;color: #f16b0b;" v-if="targetTime">{{ targetTime }} / </span>
        <span>{{minStr}}</span>
        <span>:</span>
        <span>{{secStr}}</span>
        <span>:</span>
        <span>{{msStr}}</span>
    </view>
    <view class="progress" :style="'width:' + curProgress + '%'"></view>
</view>
复制代码

show函数用户换算显示时长

/* 耗时显示实现 */
show() {
    var min = this.min;
    var sec = this.second;
    var ms = this.ms;
    ms++;
    if (sec == 60) {
       min++;
       sec = 0;
    }
    if (ms == 100) {
       sec++;
       ms = 0;
    }
    var msStr = ms;
    if (ms < 10) {
       msStr = "0" + ms;
    }
    var secStr = sec;
    if (sec < 10) {
      secStr = "0" + sec;
    }
    var minStr = min;
    if (min < 10) {
      minStr = "0" + min;
    }
    this.minStr = minStr
    this.secStr = secStr
    this.msStr = msStr

    this.min = min
    this.second = sec
    this.ms = ms
},
复制代码

最终效果

发起挑战

用户在游戏结束后可以向好友发起挑战，实际上就是分享给好友功能，只需要在分享的内容里面携带自己挑战的参数即可。


/* 分享给好友 */
onShareAppMessage(res) {
    if (res.from === 'button') {
        let typeStr = this.type === 'twoAdd' ? '两位数加法' : this.type === 'twoReduce' ? '两位数减法' : this.type ===
            'twoRide' ? '两位数乘法' : '三位数加法'
        return {
            title: this.count + '道' + typeStr + '速算我只用了 ' + this.minStr + ':' + this.secStr + ':' + this.msStr +
                    ' 就完成了，你呢？',
            imageUrl: 'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/bg_share.png',
            path: '/pages/welcome/home?list=' + JSON.stringify(this.questionList) + '&time=' + this.minStr + ':' + this.secStr + ':' + this.msStr + '&type=' + this.type
        }
        } else if (res.from === 'menu') {
        return {
            title: '速算王者-你速算有我厉害吗?',
            imageUrl: 'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/bg_share.png',
            path: '/pages/welcome/home',
        }
        }
    },
复制代码

接收挑战

只需要在用户进入小程序时进行参数判断，如果有携带挑战内容则代表开启挑战模式。

onLoad(options) {
    if(options.list){
        this.challengeModal = true
        this.challengeTime = options.time
        this.challengeList = options.list
    }
},
复制代码

会弹出对应的提示信息

并且在挑战过程中可以看到挑战的目标时间

后续

计划后面更新版本添加以下功能：

1.加入自定义模式，加减乘除、单轮题目数量均可自定义设置。

2.加入微信用户体系，向用户授权微信头像、昵称等基础信息，然后根据不同的游戏模式生成对应的微信好友圈排行榜。支持分享到朋友圈来晒出你的速算战绩。

总结

小游戏为的就是放松娱乐。开发难度不大，能够自己一个人完成设计、开发和文章总结其实就很满足了。大佬勿喷，希望后续更新可以吸引更多玩家。

感谢掘金。