用於匹配遊戲中的兩個圖像的邏輯

Question

嗨，我想比較隨機填充的圖像網格中的邏輯匹配。 現在我有兩個數組是匹配陣列上的圖像是一個「邏輯匹配」。

然後我將它們全部放入一個arraylist中，我隨機播放，然後填充實現可檢查的網格。

但我希望能夠在原始數組中循環播放列表中的某個常量值，以便最終我可以選擇兩個圖像，我認爲匹配並比較它們的值。

但我不會接力知道如何去做這件事。 很多坦克。

Answer 1

我創造了一個可以幫助你的遊戲嗎？試試這個：http://jsfiddle.net/jmccommas/AhPfV/

jquery code 
var lastSelected; 
var score = 0; 
var boxopened = ""; 
var imgopened = ""; 
var num = 0; 
var moves = 0; 
$(function() { 
    $("div.row div img").addClass('hidden'); 
    addImg(); 
    click(); 
    check(); 
    shuffle(); 


}); 

function randomFromTo(from, to) { 
    return Math.floor(Math.random() * (to - from + 1) + from); 
} 

function shuffle() { 
    var children = $("#boxcard").children(); 
    var child = $("#boxcard div:first-child"); 

    var array_img = new Array(); 

    for (i = 0; i < children.length; i++) { 
     array_img[i] = $("#" + child.attr("id") + " img").attr("src"); 
     child = child.next(); 
    } 

    var child = $("#boxcard div:first-child"); 

    for (z = 0; z < children.length; z++) { 
     randIndex = randomFromTo(0, array_img.length - 1); 

     // set new image 
     $("#" + child.attr("id") + " img").attr("src", array_img[randIndex]); 
     array_img.splice(randIndex, 1); 

     child = child.next(); 
    } 
} 


function check(el) { 

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

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

} 


function click() { 

    var boxes = $(".row img").size(); 
    $(".row div").click(function() { 
     moves++; 
     $(".totalmoves").html(moves); 
     $(".cover").css({ 
      "z-index": "9999" 
     }); 
     $(this).children("img").animate({ 
      "opacity": "1" 
     }, function() { 
      num++; 
      var id1 = $("img.selected").attr("src"); 
      var id2 = $(this).attr("src"); 
      $(this).addClass("selected"); 

      if (num == 2) { 
       num = 0; 
       if (id1 == id2) { 
        $(".selected").removeClass("selected"); 
        score = score + 2; 
        alert("Congradulation! You scored!!" + " " + score + " Points"); 
        boxes = boxes - 2; 
        if (boxes == 0) { 
         alert("Game Over Your Total Score is :" + score + " Points"); 
        } 

        $(".yourscore").html(score); 
       } else { 
        speed = 100; 
        $(".selected").animate({ 
         "opacity": "0" 
        }, 400, function() { 
         $(".selected").removeClass("selected"); 
         if (score > 1) { 
          score = score - 0.5; 
          $(".yourscore").html(score); 
         } 
        }); 
       } 
      } else { 
       speed = 100; 
      } 

      $(this).animate({ 
       "padding": "0.1" 
      }, speed, function() { 
       $(".cover").css({ 
        "z-index": "-9999" 
       }); 
      }); 
     }); 

    }); 


}; 

// add Random Images 
function addImg() { 

    var images = ["http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/cheese.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/eggs.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_blender.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/tea.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_collander.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/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() { 
     score = 0; 
     $(".yourscore").html(score); 
     moves = 0; 
     $(".totalmoves").html(moves); 
     $(".selected").removeClass("selected"); 
     $(".row img").animate({ 
      "opacity": "0" 
     }, function() { 
      $(".row img").remove(); 
      addImg(); 

     }); 




    }); 

}; 

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; 
} 

.cover{ 
    height:100%; 
    width:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:-9999; 
} 

.row img{ 
    opacity:0; 
} 

.scoreboard{ 
    float: left; 
    margin: 10px; 
    font-family: sans-serif; 
    margin-left: 50px; 
    background: cornflowerblue; 
    color: #fff; 
    padding: 5px 31px 5px 10px; 
    border-radius:5px; 
} 
.scoreboard span{ 

} 

form{ 
    float:left; 
} 

.playagain{ 
    float: left; 
    margin: 10px; 
    font-family: sans-serif; 
    margin-left: 50px; 
    background: cornflowerblue; 
    color: #fff; 
    padding: 7px 10px 7px 10px; 
    border-radius: 5px; 
    border: none; 
} 
</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>