配对游戏

Posted 青眼魔术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了配对游戏相关的知识，希望对你有一定的参考价值。

学习跟着视频做的，勿喷

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        h3{
            text-align: center;
        }
        td{
            background: #FA8072;
            width: 70px;
            height: 70px;
            text-align: center;
        }
        table{
            margin: auto;
            border: palevioletred 3px solid;
        }
        span{
            background: palegreen;
            
        }
        footer{
            text-align: center;
        }
        input{
            border-radius: 7px;
            outline: none;
            background-color: antiquewhite;
        }
    </style>
    <body>
        <header>
            <h3>配对游戏</h3>
        </header>
        <hr style="border: #FA8072 2px solid;"/>
        <br />
        <section>
            <table>
                <script type="text/javascript">
                    var rows=6,cols=6
                    for(var i=0;i<rows;i++){
                        tab=\'<tr>\'
                        for(var j=0;j<cols;j++){
                            var sid=\'img\'+((i*cols)+j)
                            tab+=\'<td id="\'+sid+\'" onclick="game(\'+((i*cols)+j)+\')"></td>\'
                        }
                        tab+=\'</tr>\'
                        document.write(tab)
                    }
                </script>
            </table>
        </section>
        <br>
        <footer>
                用时:<span id="gametime"></span>&nbsp &nbsp &nbsp 
                <input type="button" id="btn" value="开始游戏" onclick="init()"/>
        </footer>
        <script type="text/javascript">
            var dan=cols*rows//表格单元格数量
            var map=[]//存储单元格里的内容
            var user=[]//记录单元格是否可以翻开的状态
            var times=0;//时间
            var newgame;
            var firstIndex=0
            var secondIndex=0
            //点击第一张，第二张
            var ctr=0
            var finished
            function $(x){
                return document.getElementById(x)
            }
            for(var i=0;i<dan/2;i++){
                map[i]=i;
                map[dan/2+i]=i
            }
            function init(){//按钮函数，点按钮事件之后才会触发单元格事件
                for(var i=0;i<dan;i++){
                    $(\'img\'+i).innerHTML=\'\'
                    user[i]=0;//是否显示图片，0显示背面
                }//id赋值
                map.sort(function(){
                        return Math.random()-0.5
                })//数组排序
                times=0//计时器归0
                $(\'gametime\').innerHTML=times+\'秒\';
                newgame=true;//标记新的开局
            }
            function game(x){//开始游戏函数
                if(newgame){
                    start()
                    newgame=false;
                }
                $(\'img\'+x).innerHTML=map[x]
                if(ctr==0){
                    ctr++
                    firstIndex=x//记录第一张图片索引
                }else{
                    if(firstIndex!=x){
                        secondIndex=x//记录第二张图片索引
                        ctr=0;
                        check()
                    }
                }
            }
            function start(){//计时器函数
                times+=1
                $(\'gametime\').innerHTML=times+\'秒\';
                setTimeout(\'start()\',1000)//每一秒后调用自己
            }
            function check(){
                if(map[firstIndex]==map[secondIndex]){
                    finished++;
                    user[firstIndex]=1;
                    user[secondIndex]=1
                    //默认显示了出来
                    ctr=0
                }else if(user[firstIndex]==0){
                    $(\'img\'+firstIndex).innerHTML=\' \';
                    firstIndex=secondIndex;
                    secondIndex=0
                    ctr++//标记点击了一张
                }
            }
        </script>
    </body>
</html>

 

以上是关于配对游戏的主要内容，如果未能解决你的问题，请参考以下文章

LibreOJ #6191. 「美团 CodeM 复赛」配对游戏

从片段调用 Google Play 游戏服务

配对游戏

Windows 10连接到蓝牙经典设备而不进行配对

JavaScript 表格小游戏

「游戏引擎 浅入浅出」4.3 片段着色器