I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

preface

The king of quick calculation, also can be called the king of mental calculation, the approximate gameplay is to randomly give you some numbers to add, subtract, multiply and divide quick calculation, as far as possible to spend the shortest time to complete all the answers, and can be sent to friends record challenge! Inspiration comes from wechat group every day to see the small game record screenshots and some time ago to understand the concept of quick calculation, coincides with the nuggets community who is the number one player game submission contest began, so I plan to spend two days to work out this relaxing entertainment small game.

experience

Recently, I happened to study DCloud’s UniAPP, and I planned to release the initial version of this small game in the way of wechat small program. Scan the following small program two-dimensional code to experience the king of quick calculation small game.

Train of thought

Since it is a small game for friends to relax, the whole process of the game is not recommended to design too complex, and the small game itself focuses on social entertainment, so the idea of the game is generally as follows.

  1. Play mode

    Quick calculation is also called mental calculation, refers to the use of the number and the number of the special relationship between the rapid addition, subtraction, multiplication and division operations, with a thinking, a method to quickly and accurately master the arbitrary number of addition, subtraction, multiplication, division of the quick calculation method. For entertainment purposes, there are only four game modes of addition of two digits, subtraction of two digits, multiplication of two digits and addition of three digits (after all, division and multiplication of three digits are too complicated for normal people…). The number of calculations for each game is tentatively set at 10.

  2. Subject data

    In order to ensure the fairness of the game, the data of the questions used in the game are all randomly generated numbers and are not repeated.

  3. The rules of the game

    After selecting a good mode to enter the game, you will see the quick calculation interface, you need to quickly calculate the question given on the screen and input the correct answer and then press OK, if your input is correct, it will automatically enter the next question, if the calculation fails, it will automatically clear your wrong input and you need to re-calculate. If the input is wrong, you can click the C key in the lower left corner to clear it. The current elapsed time is recorded in the upper right corner of the game.

  4. Friend play

    After simplified game in normal, you can see their completion time, you can share with you any friends WeChat or WeChat group, after the good friend is a link to click on the invitation game can see the challenges of the time he needs and the topic of friends fast and your topic is the same, and there will be the top right corner game you need to challenge the goal of the time, After a challenge fails, you can try again until the challenge succeeds.

implementation

The main page of the small game is the quick calculation page. The first is a simple page implementation.

Numeric keypad section

The CSS section uses the familiar Flex layout, which is the easiest way to implement a numeric keypad.


.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; }}Copy the code

The final result

Random topic

Select a specified number of questions at random from the question bank and then implement the formula according to the selected pattern

/* Initialize */
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)},/* Select a specified number of questions at random from the question bank */
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);
},
Copy the code

Then give the user an input box, the user input results automatically answer settlement

<! -- Content section -->
<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>
Copy the code

The timer

In the upper right corner, you need to display the current time, which is essentially a timer that is updated every 10 milliseconds.

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

<! - the head -- -- >
<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>
Copy the code

The show function converts the display duration

/* Time display implementation */
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
},
Copy the code

The final result

challenge

Users can challenge their friends at the end of the game, which is actually the share to friends function, just need to share their challenge parameters in the content.


/* Share with friends */
onShareAppMessage(res) {
    if (res.from === 'button') {
        let typeStr = this.type === 'twoAdd' ? 'Two-digit addition' : this.type === 'twoReduce' ? 'Two-digit subtraction' : this.type ===
            'twoRide' ? 'Two-digit multiplication' : 'Three-digit addition'
        return {
            title: this.count + 'the' + typeStr + 'Quick calculation I only used' + this.minStr + ':' + this.secStr + ':' + this.msStr +
                    'And you're done, aren't you? '.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: King of speed. - Are you as good at speed as I am? '.imageUrl: 'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/bg_share.png'.path: '/pages/welcome/home',}}},Copy the code

To receive the challenge

It only needs to judge the parameters when the user enters the small program. If there is a challenge content, it means that the challenge mode is opened.

onLoad(options) {
    if(options.list){
        this.challengeModal = true
        this.challengeTime = options.time
        this.challengeList = options.list
    }
},
Copy the code

A corresponding message is displayed

And you can see the target time of the challenge during the challenge

subsequent

The following features are planned for future updates:

1. Add custom mode, addition, subtraction, multiplication and division, and the number of questions in a round can be customized.

2. Join the wechat user system, authorize basic information such as wechat profile picture and nickname to users, and then generate corresponding wechat friend circle leaderboards according to different game modes. You can share your quick calculation results on Moments.

conclusion

The purpose of mini-games is to relax and entertain. It is not difficult to develop, so I am satisfied to complete the design, development and article summary by myself. Don’t spray big guy, hope the subsequent update can attract more players.

Thank you to the Nuggets.