0

我正在为我正在 O'Reilly 技术学院上的一门课程寻找游戏的解决方案。

要玩这个游戏，你一次翻开两张牌，如果它们匹配，你就赢了 2 分；如果它们不匹配，您将失去一分。如果图像匹配，则这些卡片保持翻转状态；如果它们不匹配，则将卡片再次正面朝下放置，因此您看不到它们上面的内容。诀窍是记住每张卡片的位置，以便匹配！

游戏结束后，棋盘中的每张图片都将可见，并且您将在提醒中向用户显示点数：

我的游戏非常接近完成，但是如果图像匹配并且如果它们匹配则保持可见，我被困在如何将 2 分添加到分数上。如果我可以实现评分功能，我将拥有它。任何帮助都会很棒。这是 jsfiddle 链接http://jsfiddle.net/jmccommas/7EzBX/1/，代码如下。我感谢大家在这方面的时间。

jQuery代码：

        var lastSelected;
    $(function(){
        addImg();
        start();
        click();
        check();
    });

    function check(el){
        var score = 0;
        if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
                score++;
                alert("Congradulation! You scored!!" + " " + score + " Points");


        }
        lastSelected = $(el).find("img");
        clearAll();

    }

    var score = function(){

    };   

    function start(){
        $("div.row div img").addClass("hidden");
    };

    function click(){
        $("div.row div").each(function(){
            $(this).click(function(){
             if($("img", this).hasClass("hidden")){
                $("img",this).removeClass("hidden");
                $("img",this).addClass("visible");
                 check($(this));

             }else if($("img",this).hasClass("visible")){
                $("img",this).removeClass("visible");
                $("img",this).addClass("hidden");
             }

            });

        });

    };

    // add Random Images
    function addImg (){

        var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];

    var imagesused = [];
    $('.container div:not(.row)').each(function() {
        var rand = Math.floor(Math.random() * images.length);
        $(this).append('<img src="' + images[rand] + '"/>');
        if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
        else imagesused.push(images[rand]);
        console.log(images);

    });
    }
    // Clear the images Button
    var clearAll = function(){
        $(':button').click(function() {
        $('div.row div img').removeClass('visible').addClass('hidden');
        });

    };

HTML：

<!doctype html>
    <html>
    <head>
      <title>jQuery: Manipulating and Traversing Elements Project</title>
      <meta charset="utf-8">
      <style>
        div.container, div.row, form {
          clear: both;
        }
        div.row > div {
          position: relative;
          float: left;
          width: 100px;
          height: 170px;
          padding: 30px;
          margin: 10px;
          border: 1px solid black;
          box-shadow: 3px 3px 5px grey;
          vertical-align: bottom;
        }
        div.row > div > img {
          display: inline-block;
          position: absolute;
          width: 100px;
          bottom: 30px;
        }
        .visible {
          visibility: visible;
        }
        .hidden {
          visibility: hidden;
        }
        .done {
          visibility: visible;
        }
      </style>
      <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <script src="game.js"> </script>
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="row">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="row">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <form>
        <input type="button" value="Play again">
      </form>
    </body>
    </html>
4

0 回答 0