java - logic for matching two images in a game -
hi want compare logic matches in image-grid populated on random. right have 2 arrays the images on matching positions in arrays "logic match".
i loop them arraylist shuffle , populate grid implements checkable.
but want able assign kind of constant value drawabls in original arrays when looping them arraylist in end can chose 2 images think match , compare value.
but don't relay know how go this. many tanks.
i created game may you? try this: 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 - + 1) + from); } function shuffle() { var children = $("#boxcard").children(); var child = $("#boxcard div:first-child"); var array_img = new array(); (i = 0; < children.length; i++) { array_img[i] = $("#" + child.attr("id") + " img").attr("src"); child = child.next(); } var child = $("#boxcard div:first-child"); (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! 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! scored!!" + " " + score + " points"); boxes = boxes - 2; if (boxes == 0) { alert("game on total score :" + 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 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 , 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>
Comments
Post a Comment