我正在尝试创建一个有两个难度的记忆匹配游戏：一个有12个瓷砖，另一个有24个瓷砖。小的工作正常，但大的工作做一些奇怪的东西。单击底部2行中的图块时，顶部两行中的图像由于某种原因出现，但是当您单击前2行时，没有任何反应。控制台中也没有出现任何错误。
我是JavaScript的新手，我真的希望这个能够发挥作用。
这是我的代码：
/* Global Variables */
var picks; //counts how may picks have been made in each turn
picks = 0;
var elect; //counts how may picks have been made in each turn
elect = 0;
var firstchoice; //stores index of first card selected
var secondchoice; //stores index of second card selected
var choosefirst //stores index of first card selected hard
var choosesecond //stores index of second card selected hard
var cntr = 0; //counts matches made
var numAttempts = 0; //counts attempts made
var numOfMatches = 6; //counts number of matches made
var numOfPairs = 12; //counts the number of matches made ofr the hard mode
var backcard ="cardfront.jpg"; //shows back of card when turned over
var faces = []; //array to store card images
var output = document.querySelector("#output");
var score = 0; //calculates the score
var strikeCntr = 1; // counts the number of strikes against the player
faces[0] = 'enterprise.jpg';
faces[1] = 'borgcube.jpg';
faces[2] = 'klingonbp.jpg';
faces[3] = 'romulanwb.jpg';
faces[4] = 'dsnine.jpg';
faces[5] = 'ferengiship.png';
faces[6] = 'enterprise.jpg';
faces[7] = 'borgcube.jpg';
faces[8] = 'klingonbp.jpg';
faces[9] = 'romulanwb.jpg';
faces[10] = 'dsnine.jpg';
faces[11] = 'ferengiship.png';
var cards = [];
cards[0] = 'enterprise.jpg';
cards[1] = 'borgcube.jpg';
cards[2] = 'klingonbp.jpg';
cards[3] = 'romulanwb.jpg';
cards[4] = 'dsnine.jpg';
cards[5] = 'ferengiship.png';
cards[6] = 'cardassian.jpg';
cards[7] = 'defiant.jpg';
cards[8] = 'dominion.jpg';
cards[9] = 'shuttlecraft.jpg';
cards[10] = 'vulcan.jpg';
cards[11] = 'enterprisenx01.jpg';
cards[12] = 'enterprise.jpg';
cards[13] = 'borgcube.jpg';
cards[14] = 'klingonbp.jpg';
cards[15] = 'romulanwb.jpg';
cards[16] = 'dsnine.jpg';
cards[17] = 'ferengiship.png';
cards[18] = 'cardassian.jpg';
cards[19] = 'defiant.jpg';
cards[20] = 'dominion.jpg';
cards[21] = 'shuttlecraft.jpg';
cards[22] = 'vulcan.jpg';
cards[23] = 'enterprisenx01.jpg';
// select the easy mode or hard mode
var easy = document.getElementById('easyGame');
easyGame = function() {
var div = document.getElementById('easy');
if (div.style.display === 'none')
{
div.style.display = 'block';
}
};
var hard = document.getElementById('hardGame');
hardGame = function() {
var div = document.getElementById('hard');
if (div.style.display === 'none')
{
div.style.display = 'block';
}
};
//shuffle the cards
function shuffleArray(array) {
for (var i = faces.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = faces[i];
faces[i] = faces[j];
faces[j] = temp;
}
return array;
}
//shuffle the cards
function arrayShuffle(array) {
for (var i = cards.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = cards[i];
cards[i] = cards[j];
cards[j] = temp;
}
return array;
}
//* Responds to click on a table cell indicating card selected */
function choose(card) {
if (picks==2) { //if 2 picks made, do nothing
return ;
}
if (picks==0) { //if first pick, identify card selected
firstchoice=card;
document.images[card].src = faces[card];
picks = 1; //one pick made
}
else
{ picks = 2; //second pick, identify card selected
secondchoice = card;
document.images[card].src =faces[card];
tid=setInterval("check()",1000); //use timer to pause so user can see selections
}
}
//* Responds to click on a table cell indicating card selected */
function choice(face) {
if (elect==2) { //if 2 picks made, do nothing
return ;
}
if (elect==0) { //if first pick, identify card selected
choosefirst=face;
document.images[face].src = cards[face];
elect = 1; //one pick made
}
else
{ elect = 2; //second pick, identify card selected
choosesecond = face;
document.images[face].src =cards[face];
tid=setInterval("look()",1000); //use timer to pause so user can see selections
}
}
//* Check to see if a match is made */
function check() {
clearInterval(tid); //stop timer
numAttempts++; //add 1 to attempts
document.getElementById("attempts").innerHTML = numAttempts; //display number of attempts
if (faces[secondchoice]===faces[firstchoice])
{ //if a match is selected
score++;
document.getElementById("score").innerHTML = score;
cntr++; //add 1 to matches
if (cntr === numOfMatches) { //if matches made = maximum possible matches, display message
alert("You won.\n It took you " + numAttempts + " attempts.\n Click New Game to play again.");
return false;
}
picks = 0;
return;
}
else { //if no match made, turn cards back over
document.images[firstchoice].src = backcard;
document.images[secondchoice].src = backcard;
document.getElementById("strikes").innerHTML = strikeCntr;
strikeCntr++;
if(strikeCntr===5)
{
alert("Game Over");
return false;
}
picks = 0;
return ;
}
}
/* Check to see if a match is made */
function look() {
clearInterval(tid); //stop timer
numAttempts++; //add 1 to attempts
document.getElementById("attempts").innerHTML = numAttempts; //display number of attempts
if (cards[choosesecond]===cards[choosefirst])
{ //if a match is selected
score++;
document.getElementById("score").innerHTML = score;
cntr++; //add 1 to matches
if (cntr === numOfPairs) { //if matches made = maximum possible matches, display message
alert("You won.\n It took you " + numAttempts + " attempts.\n Click New Game to play again.");
return false;
}
elect = 0;
return;
}
else { //if no match made, turn cards back over
document.images[choosefirst].src = backcard;
document.images[choosesecond].src = backcard;
document.getElementById("strikes").innerHTML = strikeCntr;
strikeCntr++;
if(strikeCntr===5)
{
alert("Game Over");
return false;
}
elect = 0;
return ;
}
}
// make a game timer
var timeLeft = 60;
var timerId = setInterval(countdown, 1000);
function countdown() {
if (timeLeft == 0) {
clearTimeout(timerId);
alert("Game Over");
}
else {
output.innerHTML = timeLeft + ' seconds remaining';
timeLeft--;
}
}
function newGame() // loading new page
{
location.reload(true);
}
此外，我无法获得在游戏的硬模式中出现的尝试次数，罢工次数或分数。
这是我的HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Vulcan Mind Training</title>
<link rel="stylesheet" href="style.css">
<p id="output">Text</p>
<script type="text/javascript"src="MemoryMatchTestNew.js"></script>
</head>
<body>
<!-- Table to hold game board -->
<table id="easy" style="display:none">
<tr>
<!-- javascript:choose() calls the choose() function when cell is
clicked and passes the value in brackets to the function identifying
which cell was clicked -->
<td><a href="javascript:choose(0)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(1)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(2)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(3)"><img src="cardfront.jpg" width=150 height=150></a> </td>
</tr>
<tr>
<td><a href="javascript:choose(4)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(5)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(6)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(7)"><img src="cardfront.jpg" width=150 height=150></a> </td>
</tr><tr>
<td><a href="javascript:choose(8)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(9)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(10)"><img src="cardfront.jpg" width=150 height=150></a> </td>
<td><a href="javascript:choose(11)"><img src="cardfront.jpg" width=150 height=150></a> </td>
</tr>
<tr><td><a href="javascript:shuffleArray()">Shuffle cards</a></td></tr>
<tr>
<td>No. of Attempts</td>
<td id="attempts">0</td>
<td>Score</td>
<td id="score">0</td>
<td>Strikes</td>
<td id="strikes"></td>
</tr>
</table>
<table id="hard" style="display:none">
<tr>
<td><a href="javascript:choice(0)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(1)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(2)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(3)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(4)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(5)"><img src="cardfront.jpg" width=150 height=150></a></td>
</tr>
<tr>
<td><a href="javascript:choice(6)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(7)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(8)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(9)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(10)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(11)"><img src="cardfront.jpg" width=150 height=150></a></td>
</tr>
<tr>
<td><a href="javascript:choice(12)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(13)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(14)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(15)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(16)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(17)"><img src="cardfront.jpg" width=150 height=150></a></td>
</tr>
<tr>
<td><a href="javascript:choice(18)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(19)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(20)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(21)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(22)"><img src="cardfront.jpg" width=150 height=150></a></td>
<td><a href="javascript:choice(23)"><img src="cardfront.jpg" width=150 height=150></a></td>
</tr>
<tr><td><a href="javascript:arrayShuffle()">Shuffle cards</a></td></tr>
<tr>
<td>No. of Attempts</td>
<td id="attempts">0</td>
<td>Score</td>
<td id="score">0</td>
<td>Strikes</td>
<td id="strikes"></td>
</tr>
</table>
<input id="newGame" type="button" value="New Game" onclick="newGame();"/>
<input id="easyGame" type="button" value="Student" onclick="easyGame();"/>
<input id="hardGame" type="button" value="Kolinar Master" onclick="hardGame();"/>
</body>
</html>
是什么导致这种情况发生？ 我将不胜感激。提前谢谢。