0
嗨,我想比较随机填充的图像网格中的逻辑匹配。 现在我有两个数组是匹配阵列上的图像是一个“逻辑匹配”。用于匹配游戏中的两个图像的逻辑
然后我将它们全部放入一个arraylist中,我随机播放,然后填充实现可检查的网格。
但我希望能够在原始数组中循环播放列表中的某个常量值,以便最终我可以选择两个图像,我认为匹配并比较它们的值。
但我不会接力知道如何去做这件事。 很多坦克。
嗨,我想比较随机填充的图像网格中的逻辑匹配。 现在我有两个数组是匹配阵列上的图像是一个“逻辑匹配”。用于匹配游戏中的两个图像的逻辑
然后我将它们全部放入一个arraylist中,我随机播放,然后填充实现可检查的网格。
但我希望能够在原始数组中循环播放列表中的某个常量值,以便最终我可以选择两个图像,我认为匹配并比较它们的值。
但我不会接力知道如何去做这件事。 很多坦克。
我创造了一个可以帮助你的游戏吗?试试这个: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>
听起来很有趣,但你能否详细说明这一点具体的。也许一些图像清晰,你的意思是逻辑匹配? –
测试代码中没有最终图形,所以现在它只是一串皮卡丘图像,在匹配时写入1:P。但最终的ide是一种数学+逻辑游戏,其中有12张卡片可容纳9个弹珠的插槽显示在网格上,目标是匹配2张卡片,这样他们的大理石图案就可以形成完整的一张。并在设定的时间范围内尝试尽可能多的匹配。但我是一个noob在这个,所以它以蜗牛的速度移动哈哈。 –
那么你的问题标题是一个完全错过,你不匹配的实际图像,你正试图做出匹配游戏,这是完全不同的逻辑:) –