我正在尝试制作一个简单集中游戏的 OOP 版本。一切看起来都不错，即游戏的每个实例都会显示游戏板和卡片，但卡片不会翻转。
我正在尝试使用 Firefox Web Developer 进行调试，这是我收到的错误消息：
TypeError: game_1.flip 不是函数。
我一生都无法弄清楚翻转功能出了什么问题。我已经阅读了几个 TypeError 问题和回复，但似乎没有一个适用于我的问题。
代码
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>"More Concentration"</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background-color:green;}
p {color: white}
img {border:1px solid black}
#theGame {width: 400px; height: 390px; border: 1px solid white; padding:15px; text-align: center; margin-left: auto; margin-right: auto;}
#wrapper {text-align: center;}
</style>
<script type="text/javascript">
// <![CDATA[
function Card() {
this.value = "";
this.suit = "";
this.name = "";
this.image = ""; //add a spot to store a path to the card image.
}
function Game(gameId) {
this.gameId = gameId;
var firstCard = 'unused'; // A place to remember the first pick...
var touchedCard = 'unused'; // ... and the last touched card
var waiting = false; // This variable will control WHEN we can flip cards.
this.Deck = new Array(52);
this.shuffle = function() {
var r;
var someCard = new Card();
for (i=51;i >= 0;i--){
r = Math.round(Math.random() * i);
someCard = this.Deck[i]; this.Deck[i] = this.Deck[r]; this.Deck[r] = someCard;
}
};
this.initDeck = function() {
var Names = new Array("2","3","4","5","6","7","8","9","10","jack","queen","king","ace");
var suitNames = new Array("spades","diamonds","hearts","clubs");
for (var i=0;i<13;i++){
for (var j=0;j< 4;j++){
this.Deck[i + (j * 13)] = new Card();
this.Deck[i + (j * 13)].suit = suitNames[j];
this.Deck[i + (j * 13)].value = i;
this.Deck[i + (j * 13)].name = Names[i];
//This line builds the path to the card image based on available info.
this.Deck[i + (j * 13)].image = 'images/' + suitNames[j] + '_' + Names[i] + '.png';
}
}
};
this.flip = function(passedCard){
//This function is the core of the interactivity
if (waiting == false){
//check to see if we're "waiting" for any flips to finish
touchedCard = passedCard;
document.images[touchedCard].src = this.Deck[touchedCard].image;
if (firstCard == 'unused'){
//If this is the first cards selected...
firstCard = touchedCard; // ... remember it for later
}else{ //If this is the second card selected ...
waiting = true; //... disallow further flips and ...
if (this.Deck[touchedCard].value == this.Deck[firstCard].value){ // ... compare it to the first.
//If they match, do this.//
setTimeout(this.gameId + ".retireSelection("+ this.firstCard + '_' + this.gameId + ","+touchedCard+")",2000);
} else {
setTimeout(this.gameId + ".resetSelection("+ this.firstCard + '_' + this.gameId + ","+touchedCard+")",2000);
}
firstCard = 'unused';
}
}
};
this.resetSelection = function(carda,cardb){
//Turn the cards facedown after NOT matching
document.images[carda].src = 'images/card_back.png';
document.images[cardb].src = 'images/card_back.png';
waiting = false; // re-allow more flips
};
this.retireSelection = function(carda, cardb){
//Indicate the cards are matched using the "X' card.
document.images[carda].src = 'images/blank.png';
document.images[cardb].src = 'images/blank.png';
//Deactivate the handler so they can't be flipped again after a match.
document.images[carda].onclick = '';
document.images[cardb].onclick = '';
waiting = false; // re-allow more flips
};
this.plop_cards = function(){
//Writes HTML to put cards on the page
this.shuffle();
//document.writeln("<p>" +this.gameId + "</p>");
document.write('<div id="theGame">');
for(var i=0;i<52;i++){
document.writeln("<img src = 'images/card_back.png' id =" + this.gameId + ' Card_' + i + " onclick='" + this.gameId + ".flip("+i+")'>");
}
document.write('</div>');
};
}
// ]]>
</script>
</head>
<body>
<div id="pageTitle">
<h1>"More Concentration" <br /> By Dawn Lassen</h1>
</div>
<div id="wrapper" class="center">
<script type="text/javascript">
// <![CDATA[
var game_1 = new Game('game_1');
var game_2 = new Game('game_2');
var game_3 = new Game('game_3');
var game_4 = new Game('game_4');
var game_5 = new Game('game_5');
game_1.initDeck();
game_2.initDeck();
game_3.initDeck();
game_4.initDeck();
game_5.initDeck();
game_1.plop_cards();
game_2.plop_cards();
game_3.plop_cards();
game_4.plop_cards();
game_5.plop_cards();
// ]]>
</script>
</div>
</body>
</html>
任何帮助，指导，建议表示赞赏。你可能会说，我是这个论坛的新手，也是 JavaScript 的新手。