我正在尝试制作一个简单的专注游戏的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的新手。
问题是您在写入图像时正在创建无效的（X）HTML。请参阅以下代码行：
document.writeln("<img src = 'images/card_back.png' id =" + this.gameId + ' Card_' + i + " onclick='" + this.gameId + ".flip("+i+")'>");
该id属性没有引号，因此输出将是乱码，因为它将包含类似的内容<img ... id=game_1 Card_1 onclick=...>。对于一个人来说，这是完全错误的，因为一个游戏的所有纸牌都具有相同的ID（在HTML中也是无效的，并且也不是您想要的），尤其是在XHTML的情况下，禁止使用未引用的属性。
简单的解决方法是正确报价
document.writeln("<img src = 'images/card_back.png' id ='" + this.gameId + ' Card_' + i + "' onclick='" + this.gameId + ".flip("+i+")'>");
但是，尝试直接写入DOM流是一个坏主意。如果您document.write完全避免使用类似DOM之类的方法，那将是更好的选择，因为通常建议不要使用它们。
例如，您可以执行以下操作：
var img = document.createElement('img');
img.src = 'images/card_back.png';
img.id = this.gameId + ' Card_' + i;
img.onclick = (function(_this, i) {
return function() {
_this.flip(i);
};
})(this, i);
document.body.appendChild(img);
您可以在这个小提琴中看到它可以flip被调用。小提琴现在破坏了页面的格式，这只是快速演示。id顺便说一句，我也建议不要将属性与空格一起使用。
出于好奇：您使用XHTML时是否有任何特定原因？您也可以使用HTML（即HTML5），然后摆脱脚本周围的CDATA块注释。尽管XHTML更加严格（通常这不是一件坏事），但HTML5的普及程度却更高，因此没有理由不使用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句