JavaScript 表格小游戏

小鱼儿 2023-10-06 22:23 20阅读 0赞

#### 阅读目录 ####

*  JavaScript 实现表格配对小游戏
 *   *  源码
 *  JavaScript 实现动态显示表格数据
 *   *  源码
     *  源码解析

## JavaScript 实现表格配对小游戏 ##

实例描述：  
当用户点击两个相同的图案或字符后配对成功，全部配对成功后游戏获胜。

案例 008 采用了大家常见的小游戏来帮助大家提高应用JS解决实际问题的能力，需要说明的是该案例在很大程度上做了简化，大家课下练习的时候可以发挥自己的想象力进一步来完善该游戏。

### 源码 ###

![在这里插入图片描述][a4c3322035c947ce999c2d4c04f9dd65.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>演示文档-配对游戏</title>
    <style type="text/css">
    table{
          
        margin:15px auto 15px;
        background: rgba(60,180,100,0.3);
        color: blue;
        width: 500px;
        height: 500px;
    }
    hr{
          
            width: 600px;
            height: 5px;
            background: orange;
    }
    h2{
          text-align: center;}
    td{
          
        text-align: center;
        background: rgba(160,80,10,0.1);
        width: 100px;
        height: 100px;
    }
    footer{
          
        margin:0px auto;
            text-align: center;
            background: rgba(0,100,100,0.2);
            padding: 10px;
            width: 500px;
    }
    </style>
    </head>
    <body>
    
    <h2>配对游戏<hr></h2>
    
    <table>
        <script>
            var cols=5,rows=4;
            for(var i=0;i<rows;i++){
          
                str="<tr>";
                for(var j=0;j<cols;j++){
          
                    var sid="img"+((cols*i)+j)
                    str+='<td  id="'+sid+'" οnclick="showimg('+((cols*i)+j)+')"'+'>'
                    str+='</td>'
                }
                str+="</tr>";
                document.write(str)
            }
        </script>
    </table>
    
    <footer>
        用时：<span id="gameTime"></span>&nbsp&nbsp&nbsp
        <input type="button" value="开始游戏" onclick="init()">
    </footer>
    
    <script type="text/javascript">
    var length=cols*rows //表格单元格数目
    var map=[] //存储单元格里的内容
    var user=[] //存储每个单元格是否可以翻开的状态
    var times=0;
    var newsatrt;
    var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
    var ctr=0;
    var finished;
    function $(x){
          
            return document.getElementById(x)
    }
    for(var i=0;i<length/2;i++){
          
        map[i]=i;
        map[length/2+i]=i
    }
    // alert(map)
    function init(){
          
        for (var i=0;i<length;i++){
          
            $("img"+i).innerHTML=''
            user[i]=0;//是否显示图片，0为显示背面
        }
        // alert(map)
        map.sort(function(){
          return Math.random()-0.5})
        // alert(map)
        times=0; //计时器变量清零
        $("gameTime").innerHTML=times+'秒'
        newsatrt=true; //标记为新开局
    }
    
    function showimg(x){
          
        if (newsatrt) {
          
            start()
            newsatrt=false;
        }
    
        $("img"+x).innerHTML=map[x]
        // alert(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++ //标记已经点击了一张
        }
        if (finished==length/2) {
          
            clearTimeout(startTime);
            if(confirm("恭喜你！再来一局？")==true){
          
                init()
            }
        }
    }
    
    </script>
    
    </body>
    </html>

## JavaScript 实现动态显示表格数据 ##

实例描述：根据用户的选择表格中显示不同的数据  
![在这里插入图片描述][9f686ea926174a3f895547d574c6f1f1.gif_pic_center]

### 源码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>演示文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    
    <h3>动态显示表格数据</h3>
    
    <table style="width: 300px;height: 300px;border: 3px solid green;text-align: center;">
        <script>
            for(var i=0;i<5;i++){
          
                str_tab='<tr>'
                for(var j=0;j<5;j++){
          
                    str_tab+='<td id='+"td"+(i*5+j+1)+' style="background: orange;">'+'</td>'
                }
                str_tab+='</tr>'
                document.write(str_tab)
            }
        </script>
    </table>
    
    <input type="button" value="奇数" onclick="td_num('odd')">
    <input type="button" value="偶数" onclick="td_num('even')">
    <input type="button" value="全部" onclick="td_num('all')">
    
    <script type="text/javascript">
    var arr=new Array();
    // var arr=[]等效上句
    
    function $(x){
          
        return document.getElementById(x);
    }
    
    for(var i=0;i<25;i++){
          
        arr[i]=i+1;
    }
    
    // alert(arr)
    function write(){
          
        for(var i=0;i<25;i++){
          
        	$("td"+(i+1)).innerHTML=arr[i]
        }
    }
    
    function td_num(x){
          
        switch (x){
          
            case 'odd':
                for(var i=0;i<25;i++){
          
                    if(i%2==0){
          
                        arr[i]=i+1;
                    }else{
          arr[i]=""}
                }
                break;
            case 'even':
    	        for(var i=0;i<25;i++){
          
    	            if(i%2==1){
          
    	                arr[i]=i+1;
    	            }else{
          arr[i]=""}
    	        }
                break;
            case 'all':
    	        for(var i=0;i<25;i++){
          
    	            arr[i]=i+1;
    	        }
            break;
        }
        write()
    }
    </script>
    </body>
    </html>

### 源码解析 ###

1、动态指定表格中每个单元格的 `id`，然后通过 `id` 可以获取每个单元格，然后对里面的innerHTML 进行赋值。

2、弄了一个数组，先把要赋值给单元格的 innerHTML 的数据存到数组里面，然后从数组里面批量赋值给单元格的 innerHTML。

3、写了一个便于通过 `id` 获取元素 `element` 的函数。

html 标签可以通过各种属性值来传参么？

解答：可以，html 标签可以通过各种属性（例如 id，value 等）来传参，或者是区别不同元素，因为属性可以动态添加啊。

html 如何动态指定元素的 id 属性（除了常规方法）？

解答：通过父亲的 innerHTML属性，标签的那个语句加个 `id` 属性倒是很容易的。 `str_tab+='<td id='+"td"+(i*5+j+1)+' >'+'</td>'`

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]  
 js 中创建数组的两种方法 ？

解答：Array() 对象和 \[\]。`var arr=new Array(); var arr=[]` 等效上句。

js自定义的通过 `id` 获取 `element` 的函数怎么写？

解答：`function $(x){ return document.getElementById(x); }` 。

html 中的标签中的事件（比如点击事件）调用的函数如何传参？

解答：直接将参数写进函数即可，比如整形和字符串，字符串加引号，单双引号都行。`onclick="td_num('odd')"。function td_num(x){}`

[a4c3322035c947ce999c2d4c04f9dd65.gif_pic_center]: https://img-blog.csdnimg.cn/a4c3322035c947ce999c2d4c04f9dd65.gif#pic_center
[9f686ea926174a3f895547d574c6f1f1.gif_pic_center]: https://img-blog.csdnimg.cn/9f686ea926174a3f895547d574c6f1f1.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1a24606594064c10945015e65736c5d1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16