<!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クラスの割り当てに取り組んでいます。ゲーム内で勝利を見つけるために、getBoard
とsquareClicked
関数を編集しています。Jquery関数のエラー - Tic Tac Toe
checkWin
関数が事前にプログラムされていたので、エラーは存在してはいけません。
squareclicked
の機能を読んで、ゲームに勝った四角形の背景色を変更するのに問題があります。私のgetBoard
関数も間違ってコーディングされている可能性があります。
何か助けが素晴らしいだろう。
この課題はJqueryに焦点を当てているので、上記の2つの機能にはこの機能を使用する必要があります。
/* 割り当て11用のファイル(ラボ19ソリューション)を起動するWEB 230 {ミーガンカザ} */
$(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;
}
});
あなたは、HTMLコードを追加することができますか? –
htmlは別ファイルになっているので、javascriptファイルにあるものだけを編集できます。 –
セレクタが問題になるかもしれないので、私はHTMLコードを見たいと思っています:)それは他の人々にも役に立ちます –