我正在为我正在 O'Reilly 技术学院上的一门课程寻找游戏的解决方案。
要玩这个游戏，你一次翻开两张牌，如果它们匹配，你就赢了 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>