"King of Quick Calculation" Simple and quick calculation game, faster than anyone else (available online)

I am participating in the individual competition of the Nuggets Community Game Creativity Contest. For details, please see: Game Creativity Contest

foreword

The King of Quick Calculations , also known as the King of Mental Calculations , the general way to play is to randomly give you some numbers to add, subtract, multiply and divide quickly, take the shortest time possible to complete all the answers, and send your results to your friends to challenge! The inspiration comes from the screenshots of the small game records that can be seen every day in the WeChat group and the concept of quick calculation. Small game figured out.

experience

Recently, I was researching DCloud's UniAPP, and I planned to release the first-generation version of this small game in the form of a WeChat applet. Scan the QR code of the applet below to experience the quick calculation king mini-game.

ideas

Since it is a relaxing mini-game between friends, it is not recommended to design too complicated the whole game process, and the mini-game itself focuses on social entertainment, so the idea of ​​​​the game is roughly as follows.

1. play mode

   Quick arithmetic is also called mental arithmetic, which refers to the use of the special relationship between numbers to perform faster addition, subtraction, multiplication and division operations, using one kind of thinking and one method to quickly and accurately grasp the addition, subtraction, multiplication and division of any number. Taking into account the entertainment, only four game modes of two-digit addition, two-digit subtraction, two-digit multiplication and three-digit addition are available for the time being ( after all , division and three -digit multiplication are for normal people. Too complicated...) The number of calculations per game is tentatively set at 10 .

   

2. topic data

   In order to ensure the fairness of the game, the question data used for quick calculation in the game all come from randomly generated numbers and are not repeated.

3. game rules

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

   

4. 好友玩法

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

   

实现

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

数字键盘部分

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

总结

Mini games are for relaxation and entertainment. The development is not difficult, and it is actually very satisfying to be able to complete the design, development and article summary by myself. Don't spray it, I hope the follow-up update can attract more players.

Thanks Nuggets.