<!doctype html>
<!-- Assignment 11 : jQuery I -->
<html>
<head>
<title>Tic Tac Toe</title>
<meta name="viewport" content="width=600"/>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<div id="players">
<div id="X" class="">Player X</div>
<div id="O" class="">Player O</div>
<input type="button" class="button" value="New Game" id="newGame"/>
</div>
<table>
<tr>
<td id="c0"></td>
<td id="c1"></td>
<td id="c2"></td>
</tr>
<tr>
<td id="c3"></td>
<td id="c4"></td>
<td id="c5"></td>
</tr>
<tr>
<td id="c6"></td>
<td id="c7"></td>
<td id="c8"></td>
</tr>
</table>
<script src="jquery-1.11.2.min.js"></script>
<script src="main.js"></script>
</body>
</html>
我正在为我的Javascript / Jquery Class工作。我们正在编辑getBoard和squareClicked功能，以便在游戏中找到胜利。
checkWin函数已为我们预编程，因此错误不应存在。
我无法阅读squareclicked功能并更改赢得游戏的方块的背景颜色。也可能是我的getBoard函数编码错误。
任何帮助都会很棒。
此作业侧重于Jquery，因此请记住，我必须将其用于上面列出的两个函数。
/ * WEB 230 分配11的起始文件（实验19解决方案） {梅根卡扎} * /
$(document).ready(function(){
$('#X').addClass('current-player');
function switchPlayer() {
var player = $('.current-player').attr('id');
$('#players div').removeClass('current-player');
if(player === 'X') {
$('#O').addClass('current-player');
} else {
$('#X').addClass('current-player');
}
}
$('table').on('click', squareClicked);
function squareClicked(e) {
var $sqr = $(e.target);
var player = $('.current-player').attr('id');
if(!$sqr.attr('class')) {
$sqr.addClass(player + '-marker');
switchPlayer();
}
checkWin();
if(win == true) {
$('winArray').css('background-color','#33CC99');
alert('Player ' + winner + ' won!');
}
}
$('#newGame').on('click',newGame);
function newGame() {
$('td').removeAttr('class');
$('#O').removeClass('current-player');
$('#X').addClass('current-player');
}
// Get an array of markers on each square
function getBoard() {
var board = [];
// Step 1: Your code here
$('td').each(function() {
var className = $(this).attr('class');
if (className == null) {
}
else {
board[this] = className.substring(0,1);
//alert(className.substring(0,1));
}
});
return board;
}
// This function is provided. You don't need to change it.
// Check for winner
function checkWin() {
var board = getBoard();
// array of possible win sets
var winArray = [
[0,1,2], [3,4,5], [6,7,8],
[0,3,6], [1,4,7], [2,5,8],
[0,4,8], [2,4,6] ];
var winInfo = {win: false};
// loop through the possible win sets
for(var i=0; i<winArray.length; i++) {
// get the marks at the three win locations
a = board[winArray[i][0]];
b = board[winArray[i][1]];
c = board[winArray[i][2]];
// see if the same marker is at each location
if(a && a === b && b === c) {
winInfo.win = true;
winInfo.play = winArray[i];
winInfo.winner = a;
return winInfo;
}
}
return winInfo;
}
});
答案 0 :(得分：0)
我无法阅读squareclicked功能并更改赢得比赛的方块的背景颜色。
好的，首先，你需要一个游戏板。尝试添加一些CSS，以便您可以看到网格。
CSS：
td {
width: 100px;
height: 100px;
}
接下来，您要跟踪点击的每个方格＆amp;不是表本身。所以改变这个：
$('table').on('click', squareClicked);
进入这个：
$('td').on('click', squareClicked);
通常我们使用<div>代码而不是<table>或<tr>或<td>代码，因为CSS喜欢与<table>，<tr>对抗＆安培; <td>个标签。但是现在，我们可以使用表格......因为你还在学习编程。
当我按F12时，我在console.log中看到了这个错误：
（index）：68未捕获的ReferenceError：未定义win
所以我们做的是添加＆＃34;对象检测＆＃34;，它会检查以确保＆＃34; win＆＃34;对象未设置为undefined或null。
变化：
if(win == true) {
对于这个长版本：
if ((typeof(win) !== 'undefined') && (win === true)) {
或者这个简短的版本，因为只有在没有未定义的情况下，胜利才会成立。不是空的：
if (win && (win === true)) {
好的，让我们看看此代码中存在的其他问题......
首先，变量＆＃34; win＆＃34;必须使用以下任一方法在某处定义：
var win = ... something ...;或let win = ... something ...;
所以你必须在这个函数中定义它应该做的事情：
function squareClicked(e) {
分叉这个JSfiddle＆amp;尝试一段时间，看看你能做些什么：https://jsfiddle.net/briankueck/028qpabe/
我不会为你做功课......因为这会带走你的斗争，这是成为更好的程序员所必需的。但是，我不介意指出你正确的方向，成为一个更好的程序员。
祝好运代码＆amp;让我知道你从摆弄它发现了什么！我每天都在这里。几天后可以帮到你。
答案 1 :(得分：0)
我相信@Clomp，把这个功课作为挑战。 但无论如何，我只是想指出可能对你有帮助的代码可能有什么问题。
var className = $(this).attr('class');
这会返回undefined，因为表元素，例如，并非所有td在调用getBoard（）时都有一个类。
$('winArray').css('background-color','#33CC99');
$（＆＃39; winArray＆＃39;）不是有效的选择器，html代码中没有$（＆＃39; winArray＆＃39;）我也不认为 winArray 是一个有效的标签。
alert('Player ' + a + ' won!');
对象a未定义。
if(checkWin())
checkWin返回一个对象，你可以使用checkWin（）。win来返回一个布尔值。或者更好地宣布新变量。
a = board[winArray[i][0]];
b = board[winArray[i][1]];
c = board[winArray[i][2]];
在为它们添加值之前创建变量。
winInfo.play and winInfo.winner
它们都是未定义的。我不认为你需要winInfo.play你可以删除它。
在检查我为您创建的演示之前，请先尝试先了解一下。因为这可能会影响你的未来成为一个更好的程序员:)）
$(document).ready(function(){
$('#X').addClass('current-player');
function switchPlayer() {
var player = $('.current-player').attr('id');
$('#players div').removeClass('current-player');
if(player === 'X') {
$('#O').addClass('current-player');
} else {
$('#X').addClass('current-player');
}
}
$('table').on('click', squareClicked);
function squareClicked(e) {
var $sqr = $(e.target);
var player = $('.current-player').attr('id');
if(!$sqr.attr('class')) {
$sqr.addClass(player + '-marker');
switchPlayer();
}
var winInfo = checkWin();
if(winInfo.win) {
alert('Player ' + winInfo.winner + ' won!');
}
}
$('#newGame').on('click',newGame);
function newGame() {
$('td').removeAttr('class');
$('#O').removeClass('current-player');
$('#X').addClass('current-player');
}
// Get an array of markers on each square
function getBoard() {
var board = [];
// Step 1: Your code here
$('td').each(function(index, element) {
var className = '';
if ($(element).attr('class')){
className = $(element).attr('class');
board.push(className.substring(0,1));
}
else board.push(className);
});
return board;
}
// This function is provided. You don't need to change it.
// Check for winner
function checkWin() {
var board = getBoard();
// array of possible win sets
var winArray = [
[0,1,2], [3,4,5], [6,7,8],
[0,3,6], [1,4,7], [2,5,8],
[0,4,8], [2,4,6] ];
var winInfo = {
win: false,
winner: ''
};
// loop through the possible win sets
var a, b, c;
for(var i=0; i<winArray.length; i++) {
// get the marks at the three win locations
a = board[winArray[i][0]];
b = board[winArray[i][1]];
c = board[winArray[i][2]];
// see if the same marker is at each location
if((a && a === b) && b === c) {
winInfo.win = true;
winInfo.winner = a;
return winInfo;
}
}
return winInfo;
}
});td {
width: 50px;
height: 50px;
border: 1px solid;
}
.X-marker {
background-color: blue;
}
.O-marker {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tic-Tac-Toe</h1>
<div id="players">
<div id="X" class="">Player X</div>
<div id="O" class="">Player O</div>
<input type="button" class="button" value="New Game" id="newGame"/>
</div>
<table>
<tr>
<td id="c0"></td>
<td id="c1"></td>
<td id="c2"></td>
</tr>
<tr>
<td id="c3"></td>
<td id="c4"></td>
<td id="c5"></td>
</tr>
<tr>
<td id="c6"></td>
<td id="c7"></td>
<td id="c8"></td>
</tr>
</table>