0

こんにちは、ランダムに入力された画像グリッドでロジックの一致を比較したいと思います。現在、配列内の一致する位置の画像が「論理一致」である2つの配列があります。

次に、それらすべてを配列リストにループしてシャッフルし、チェック可能を実装するグリッドに入力します。

しかし、元の配列のdrawablsをarraylistにループするときに、何らかの定数値を元の配列に割り当てて、最終的に一致すると思われる2つの画像を選択してそれらの値を比較できるようにしたいと考えています。

しかし、私はこれについてどうすればよいかわかりません。多くのタンク。

4

1 に答える 1

0

私はあなたを助けるかもしれないゲームを作成しました? これを試してください：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>
于 2013-10-26T21:35:58.223 に答える