Javascript/JQuery 翻牌游戏
Posted
技术标签:
【中文标题】Javascript/JQuery 翻牌游戏【英文标题】：Javascript/JQuery flipping card game 【发布时间】：2015-01-15 03:59:54 【问题描述】：尝试创建一个纸牌游戏，用户访问该页面并点击显示国王或王后的每张纸牌。如果第二张卡与第一张卡不匹配，当用户点击第三张卡时，游戏应该重置。 “卡片”以 div 开头，背景 imgs 是卡片的背面。当页面加载时，脚本随机排序卡片数组并将其分配给每个 div。当用户点击一个 div 时，会添加 CSS 类并出现“卡片面”。
当“moves>2”并且点击第一张卡片时它应该运行时，我的“重置”功能未定义！=点击第二张卡片。我有点撞到了路障。
$(document).ready(function()
//our starting array
var cards = ["king", "king", "queen", "queen"];
//shuffle function from google
function shuffle(o) //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
;
//shuffles the array
var counter = 0;
//runs the reset function on load
reset();
//randomly resets the cards
function reset()
cards = shuffle(cards);
$(".card").each(function()
$(this).addClass(cards[counter]);
counter += 1
);
;
//check if any two cards are tru
function check(card)
if ($(card)[0] == $(card)[1])
return true;
else
return false;
;
var moves = 0;
//runs check when we make a certain amount of moves
$(".card").click(function()
moves +=1
$(this).toggleClass("selected");
if (moves > 2 && check($(".selected")) == false)
reset();
//for each if there is the class king
//if this has class king selected
);
//resets the page when we click "reset game" button
$("button").click(function()
cards = shuffle(cards)
$(".card").removeClass("king queen selected");
counter = 0;
moves = 0;
$(".card").each(function()
$(this).addClass(cards[counter]);
counter += 1
);
);
)
CSS
.main-box
border: 1px solid black;
text-align: center;
margin: 1.5%;
border-radius: 10px
.king.selected
background: url("../images/King.png");
.queen.selected
background: url("../images/Queen.png");
.card
display: inline-block;
width: 71px;
height: 96px;
margin: 1.5%;
text-align: center;
background: url("../images/back-of-card.png");
.button
margin: 1.5%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Matching Cards Game</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1>Matching cards game</h1>
<div class="main-box">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div>
<button class="button reset">Reset game</button>
<input type="checkbox" class ="button checkbox" name="cheat-mode" value="true"> Cheat mode
</div>
</div>
</header>
<footer>
© General Assembly
</footer>
</div><!-- #container -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="javascript/scripts.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：当我运行您的代码时，我没有收到任何“'undefined' is not a function”错误，但我认为您的重置方法应该更像您的按钮单击事件按钮所做的：
function reset()
cards = shuffle(cards)
$(".card").removeClass("king queen selected");
counter = 0;
moves = 0;
$(".card").each(function()
$(this).addClass(cards[counter]);
counter += 1
);
$("button").click(reset);
【讨论】：
【参考方案2】：尝试在函数定义之后将初始调用移至 reset()。
//runs the reset function on load
reset();
//randomly resets the cards
function reset()
cards = shuffle(cards);
$(".card").each(function()
$(this).addClass(cards[counter]);
counter += 1
);
;
到
//randomly resets the cards
function reset()
cards = shuffle(cards);
$(".card").each(function()
$(this).addClass(cards[counter]);
counter += 1
);
;
//runs the reset function on load
reset();
【讨论】：
所有函数声明都将被提升，因此在重置调用之前可用。所以这不是这里的问题。以上是关于Javascript/JQuery 翻牌游戏的主要内容，如果未能解决你的问题，请参考以下文章
HTML5制作扑克翻牌游戏（送《HTML5 网页游戏设计从基础到开发》）