phpstudy集成环境

 首页 > 翻版记忆游戏:清楚全部样式与i值还原的问题？

翻版记忆游戏:清楚全部样式与i值还原的问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>翻版记忆游戏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
h3{
    margin-left: 40px;
}
table{
    margin-left: 20px;
}
    td{
        width:50px;height:50px;background: yellow;text-align: center; 
    }
</style>


<

script>
window.onload=function(){
    var pai=document.getElementsByTagName("td");
    var bushu=document.getElementById("bushu");
    var bu=0;
    var ceshi=document.getElementById("ceshi");
    var fen=document.getElementById("fen");
    bian(0,"找");
    bian(1,"张");
    bian(2,"同");
    bian(3,"两");
    bian(4,"到");
    bian(5,"相");
    bian(6,"牌");
    bian(7,"的");
    bian(8,"两");
    bian(9,"同");
    bian(10,"牌");
    bian(11,"张");
    bian(12,"的");
    bian(13,"找");
    bian(14,"到");
    bian(15,"相");

    var hy=0;
    function bian(j,zi){
          var i=0; //当样式变成最初后，i并没有被清楚，所以，被点击后的会出现问题
    pai[j].onclick=function(){
         i++;bu++;bushu.value=bu;
         if(i%2==1){
        this.style.backgroundColor="green";
        this.innerHTML=zi;
        hy++;
         }
         else{
         this.style.backgroundColor="yellow";
         this.innerHTML=""; 
         hy--;
         }
       fhy(); 
    } 
    }
    ceshi.onclick=function(){
       alert(hy); 
    }

    function fhy(){
        fen.value=hy;
        if(hy%3==0){
        for(var i=0;i<pai.length;i++){
            pai[i].style.backgroundColor="yellow";
            pai[i].innerHTML=""; }  
            }}



    }
</script>
</head>
    <body>
        <h3>找到相同的两张牌</h3>
        <table>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
        </table>
        <form action="">
            <p></p>
            用时：<input type="text" /><br>
            得分：<input type="text" / id="fen"><br>
            步数：<input type="text" id="bushu" value="0"; />
            <button id="ceshi">测试</button>
        </form>
    </body>
</html>

如上面的代码，遇到一个问题：当我点击第三个绿色的元素的时候，全部背景变回最初状态。
但是，另一个函数里的i值并没有还原。
点击过的元素再次点击的话，就会出现问题了，怎样解决？

试了一下，没仔细看你的代码，先清理一下思路：

  1. 点击一张背面的，翻过来。点击一张下面的，无动作，保存到 pair[0]
  2. 点击第2张背面的，翻过来，保存到 pair[1]，然后进行下面的逻辑
    > 1. 如果两张相同(pair[0] === pair[1])，保持状态，重置 pair：pair = []; 检查是否完全翻转
    > 2. 如果两张不同，设置个延时都翻回去 setTimeout(function() { turnBack(pair) }, 1000);，再重置 pair：pair = [];
  3. 如果已经完全翻转，显示胜利

顺便说一下，代码如果放下面，可以不用 onload

貌似楼主的思路有点问题, 那个 fhy 的功能是什么?

为什么要%3==0的时候将所有的变成黄色的?那那些已经找出来相同的,不就也变回去了吗?

https://jsfiddle.net/xqin/Lru04ude/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>翻版记忆游戏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    h3{
        margin-left: 40px;
    }
    table{
        margin-left: 20px;
    }
    td{
        width:50px;height:50px;background: yellow;text-align: center;
    }
</style>




<script>
window.onload = function() {
    var pai = document.getElementsByTagName("td");
    var bushu = document.getElementById("bushu");
    var bu = 0;
    var df = 0;
    var ceshi = document.getElementById("ceshi");
    var fen = document.getElementById("fen");

    var data = '找张同两到相牌的两同牌张的找到相'.split('');

    //给每个单元格绑定 click 事件
    for(var i=data.length; i--;){
        bian(i, data[i]);
    }

    var chk = [], //用来保存当前用户单击的单元格
        isChecking = false;//falg 用于标记当前是否正在检测中

    function bian(j, zi) {

        pai[j].onclick = function() {
            //已经是绿色的,或者是正在检测中时, 单击不响应
            if(this.style.backgroundColor == 'green' || isChecking){
                return;
            }

            //标亮
            this.style.backgroundColor = "green";
            this.innerHTML = zi;

            //加入数组中
            chk.push(this);

            //计步数
            bushu.value = ++bu;

            //单击2个的时候 要去检测 所点的内容是否一致
            isChecking = chk.length === 2;

            if(isChecking){//如果点了两个
                setTimeout(fhy, 300);//延时300毫秒去检测, 如果是直接调用 fhy 的话, 因为速度太快, 你会看不到第二个单元格被变成绿色(当两个值不一样的时候)
            }
        }
    }


    function fhy() {
        df++;//默认先加1分
        //检测 目前已经点亮的两张 是否一样, 如果不一样就将这两个变回来
        if(chk[0].innerHTML !== chk[1].innerHTML){
            df--;//如果不一样, 就减
            for(var j=0; j<2; j++){
                chk[j].style.backgroundColor = "yellow";
                chk[j].innerHTML = '';
            }
        }

        fen.value = df;
        //不管一样还是不一样, 都要清空目前已经选中的这两个
        chk.length = 0;
        //设置检测中的状态为false(即已经检测完成,允许用户单击其他单元格了)
        isChecking = false;
    }
}
</script>


</head>
    <body>
        <h3>找到相同的两张牌</h3>
        <table>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
        </table>
        <form action="">
            <p></p>
            用时：<input type="text" /><br>
            得分：<input type="text" / id="fen"><br>
            步数：<input type="text" id="bushu" value="0"; />
        </form>
    </body>
</html>
【热门文章】
【热门文章】