Question

这是一个简单的纸牌游戏的代码，其中玩家翻转牌（来自一组10张牌），如果他/她得到一对比赛，那么牌应该消失。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="card.css">
        <script src="card.js"> </script>
    </head>
    <body>
        <table border="0" align="center">
            <tr>
                <td> <img src="card.jpg" id="a" onclick="card11()"> </td>
                <td> <img src="card.jpg" id="b" onclick="card12()"> </td>
                <td> <img src="card.jpg" id="c" onclick="card13()"> </td>
                <td> <img src="card.jpg" id="d" onclick="card14()"> </td>
                <td> <img src="card.jpg" id="e" onclick="card15()"> </td>
            </tr>
            <tr>
                <td> <img src="card.jpg" id="f" onclick="card21()"> </td>
                <td> <img src="card.jpg" id="g" onclick="card22()"> </td>
                <td> <img src="card.jpg" id="h" onclick="card23()"> </td>
                <td> <img src="card.jpg" id="i" onclick="card24()"> </td>
                <td> <img src="card.jpg" id="j" onclick="card25()"> </td>
            </tr>
        </table>
    </body>
</html>

这是javascript部分。我已经包含了这个功能来匹配卡片的来源，并删除它们是否相同。但是，我不知道如何检查是否已点击两张卡片。

function myFunc()
{
     var myArray = new Array();
     var a1=document.getElementById("a").src;
     var b1=document.getElementById("b").src;
     var c1=document.getElementById("c").src;
     var d1=document.getElementById("d").src;
     var e1=document.getElementById("e").src;
     var f1=document.getElementById("f").src;
     var g1=document.getElementById("g").src;
     var h1=document.getElementById("h").src;
     var i1=document.getElementById("i").src;
     var j1=document.getElementById("j").src;

  myArray=[a1,b1,c1,d1,e1,f1,g1,h1,i1,j1];

     for(var i=0; i<myArray.length; i++)
     {
        for (var j = i+5; j < myArray.length; j++)
        {
            if (myArray[i] === myArray[j])
            {
                 myArray[i].style.visibilty="hidden";
                 myArray[j].style.visibilty="hidden";

            }
            else
            {
                setTimeout(function(){ isFlipped=false; myArray[i]="card.jpg";},2000);
                setTimeout(function(){ isFlipped=false; myArray[j]="card.jpg";},2000);
            }
        }
    }
}

Answer 1

您可以执行以下操作：

    <img src="card.jpg" id="a" onclick="cardTest(this)">

这会将对象传递给您的javascript，然后您可以按照以下方式执行操作：

    <script>
      function cardTest(obj) {
        alert(obj.id);
      }
    </script>

Answer 2

<body>
    <table border="0" align="center">
        <tr>
            <td> <img src="card.jpg" id="a" onclick="flip('a')"> </td>
            <td> <img src="card.jpg" id="b" onclick="flip('b')"> </td>
            <td> <img src="card.jpg" id="c" onclick="flip('c')"> </td>
            <td> <img src="card.jpg" id="d" onclick="flip('d')"> </td>
            <td> <img src="card.jpg" id="e" onclick="flip('e')"> </td>
        </tr>
        <tr>
            <td> <img src="card.jpg" id="f" onclick="flip('f')"> </td>
            <td> <img src="card.jpg" id="g" onclick="flip('g')"> </td>
            <td> <img src="card.jpg" id="h" onclick="flip('h')"> </td>
            <td> <img src="card.jpg" id="i" onclick="flip('i')"> </td>
            <td> <img src="card.jpg" id="j" onclick="flip('j')"> </td>
        </tr>
    </table>
</body>

JS：

var flipped1="";
var flipped2="";

function flip(id) {

// Please include into the following lines the code to change the src from card.jpg to the picture from the other side (and back).

    if(flipped1==id) flipped1=""; // flip 1st card back.
    else if(flipped2==id) flipped2=""; // flip 2nd card back. May not be reached depending on //Samepicture code
    else if(flipped1=="") flipped1=id; // flip first card
    else if(flipped2=="") flipped2=id; // flip second card
    else alert("This point should not be reached"); // Could be reached if //Differentpicture code broken


    if(flipped1!="" && flipped2!="") { // Two cards flipped
        if(document.getElementById(flipped1).src==document.getElementById(flipped2).src) {
            // Same picture
        } else {
            // Different picture
        }
    }
}

Answer 3

将alert()添加到您的函数中以检查是否发生了操作

Javascript-识别事件何时发生并采取行动。

3 个答案: