Question

我正在寻找一个解决方案，我正在为O'Reilly School of Technology的一个班级建立一个游戏。

要玩这个游戏，你一次翻两张牌，如果匹配，你赢得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>

Jquery图像匹配游戏

0 个答案: