微信答题PK类游戏尝试实现

时间  2020-06-10
标签 微信 答题 游戏 尝试 实现 栏目 游戏 繁體版
原文   原文链接

前言

前阵子头脑王者类的微信答题PK游戏很火，本身也是很痴迷，玩了一阵子以后，想本身尝试来模仿下答题这一部分的实现。服务端打算在下swoole和socket.io之间选择，由于socket.io能够不借助redis直接缓存一些变量，因此选择了socket.io。简单实现了对战这一部分，实现的并不完善，只是一种思路javascript

客户端实现

index.htmlphp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>答题</title>

    <script type="text/javascript" src="vue.js"></script>
    
    <style>
    .player {
        display: flex;
        color: #fff;
        text-align: center;
    }

    .player .item {
        height: 80px;
    }

    .player .item.select {
        border: 4px solid #ff9933;
        box-sizing: border-box;
    }

    .player .item:first-child {
        background-color: #6dcffb;
        flex: 3;
    }

    .player .item:nth-child(2) {
        background-color: #5247a4;
        flex: 1;
        line-height: 80px;
    }

    .player .item:last-child {
        background-color: #d64e8c;
        flex: 3;
    }

    #app {
        background-color: #5a8ced
    }

    .question {
        color: #fff;
        text-align: center;
    }

    .options {
        padding-bottom: 40px
    }

    .options li {
        width: 280px;
        height: 60px;
        background-color: #fff;
        margin-top: 40px;
        display: block;
        border-radius: 50px;
        text-align: center;
        line-height: 60px;
    }

    .options li.correct {
        background-color: #00e2bc;
        color: #fff;
    }

    .options li.wrong {
        background-color: #fe6f5f;
        color: #fff;
    }

    .tips {
        text-align: center;
        color: #fff
    }
</style>
</head>

<body>
    <div id="app">
        <div class="player">
            <div :class="[playerIndex===0?'item select':'item']">
                <p class="name">选手1</p>
                <p class="score">{{score[0]}}</p>
            </div>
            <div class="item">{{remain_time}}</div>
            <div :class="[playerIndex===1?'item select':'item']">
                <p class="name">选手2</p>
                <p class="score">{{score[1]}}</p>
            </div>
        </div>
        <p class="question">{{question}}</p>
        <ul class="options">
            <li v-for="(item, key, index) in options" :class='item.class' @click="sendAnswer(key)">{{item.index}}</li>
        </ul>
        <p class="tips">{{msg}}</p>
    </div>
</body>
</html>
<script>

</script>
<script src="./socket.io.js"></script>
<script>
    var header = new Vue({
        el: "#app",
        data: {
            socket: null, //socket.io对象
            playerIndex: null, //当前选手索引
            question: '', //问题内容
            msg: '', //下方提示语
            options: [], //选项
            canAnswer: true, //是否能够回答
            remainTime: 10, //倒计时剩余时间
            score: [0, 0] //两名选手的分数
        },

        created: function () {
            let that = this;
            this.socket = io.connect('http://localhost:1024');

            //获取选手索引
            this.socket.emit('getPlayerIndex', '')
            this.socket.on('getPlayerIndex', (data) => {
                that.playerIndex = data;
                if (that.playerIndex == 1) {
                    that.socket.emit('getQuestion', that.playerIndex)
                }
            });
            
            //服务端发送问题，更新问题、选项和提示信息
            this.socket.on('sendQueston', (data) => {
                that.canAnswer = true; //拿到问题后，容许回答
                let res = JSON.parse(data);
                that.question = res.content;
                that.options = res.options;
                that.msg = res.msg;
            });

            //服务端发送更新倒计时时间，更新倒计时
            this.socket.on('updateTime', (time) => {
                that.remain_time = time;
            });

            //游戏结束，直接alert
            this.socket.on('gameOver', (text) => {
                alert('游戏结束,' + text);
            });

            //服务端发出获取问题
            this.socket.on('getQuestion', (time) => {
                if (this.playerIndex == 0) {
                    let that = this;
                    //3秒后获取下一题
                    setTimeout(function () {
                        that.socket.emit('getQuestion', this.playerIndex)
                    }, 3000)
                }
            });

            //服务端发送答题结果
            this.socket.on('sendResult', (data) => {
                that.canAnswer = false; //回答后，禁止回答，防止另外一名选手点击
                let res = JSON.parse(data);
                that.msg = res.msg;
                that.options = res.options; 
                that.score = res.score;
            });
        },

        methods: {
            //点击选项后的事件
            sendAnswer(index) {
                if (!this.canAnswer) {
                    return false;
                }
                this.socket.emit('sendAnswer', index, this.playerIndex)
            },
        }
    })
</script>

大概长这样，后端的审美，比较很差看
image.pnghtml

问题数据的存储方式

我用了redis来保存问题,内容格式以下前端

{
    "id": 9,
    "content": "9.一年几天",//问题内容
    "options": [  //选项
        "1",
        "2",
        "3",
        "365"
    ],
    "answer_index": 3 //答案的索引
}

选用redis的list格式，顺手本身编几个问题，用php写进去，多编几条，多写几回vue

$redis = new \Redis();
$redis->connect('127.0.0.1');
$content = ['id' => 1, 'content' => '1.一天有几小时', 'options' => ['1', '2', '3', '48'], 'answer_index' => 3];
$redis->lPush('questions', json_encode($content));

image.png

服务端实现

answerserver.jsjava

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const redisModule = require('redis');
const redis = redisModule.createClient(6379, '127.0.0.1');

let playerIndex = 0; //选手索引
let options = []; //选项
let answerIndex = 0; //答案索引
let timer = null; //定时器
let remainTime = 10; //剩余时间
let score = [0, 0]; //得分 ['选手1分数','选手2分数']
let questionCount = 0; //问题数
let startGame = false; //是否已经开始游戏
const maxRemainTime = 10; //最大倒计时秒数

server.listen(1024);

io.on('connection', (socket) => {
    //客户端发送 获取问题
    socket.on('getQuestion', (playerIndex) => {
        if (startGame == false) {
            //首次发送 倒计时开始
            timer = setInterval(() => {
                remainTime--;
                if (remainTime <= 0) {
                    socket.emit('getQuestion', remainTime);
                    remainTime = maxRemainTime;
                }
                socket.emit('updateTime', remainTime);
                socket.broadcast.emit('updateTime', remainTime);

            }, 1000);
            startGame = true;
        }
        //初始化倒计时
        remainTime = maxRemainTime;
        questionCount++;
        redis.lpop('questions', function (err, data) {
            let res = JSON.parse(data);
            let new_options = [];
            answerIndex = res.answer_index;
            res.options.forEach(function (v, k) {
                let o = new Object();
                o.index = v;
                o.class = '' //这里的class供前端使用，为空时，选项是白色背景
                new_options.push(o)
            })
            res.options = new_options;
            options = new_options;
            socket.emit('sendQueston', JSON.stringify(res))
            socket.broadcast.emit('sendQueston', JSON.stringify(res))
        })
    });

    //发送答案结果
    socket.on('sendAnswer', (userSelectIndex, playerIndex) => {
        let result = { msg: '' };
        options.forEach(function (v, k) {
            if (answerIndex == k) {
                //正确的选项 背景改为绿色
                options[k].class = 'correct'
            } else if (k == userSelectIndex && userSelectIndex != answerIndex) {
                //正确的选项 背景改为红色
                result.msg = '选手' + (playerIndex + 1) + '答错了';
                options[k].class = 'wrong'
            }
        })
        //答对的选手+10分
        if (userSelectIndex == answerIndex) {
            score[playerIndex] += 10;
            result.msg = '选手' + (playerIndex + 1) + '答对了';
        }
        result.score = score;
        result.options = options;

        socket.emit('sendResult', JSON.stringify(result));
        socket.emit('getQuestion');
        socket.broadcast.emit('getQuestion');
        socket.broadcast.emit('sendResult', JSON.stringify(result));
        if (questionCount >= 5) {
            let winText = '平局'; //结束时的提示信息
            if (score[0] > score[1]) {
                winText = '选手1获胜'
            } else if (score[0] < score[1]) {
                winText = '选手2获胜'
            }
            socket.emit('gameOver', winText);
            socket.broadcast.emit('gameOver', winText);
            clearInterval(timer);
        }
    });

    //获取选手号数
    socket.on('getPlayerIndex', (data) => {
        socket.emit('getPlayerIndex', playerIndex);
        playerIndex++;
        if (playerIndex >= 2) {
            playerIndex = 0;
        }
    });
});

最终效果

GIF.gif

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程