2016-04-15 4 views
-1
<!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クラスの割り当てに取り組んでいます。ゲーム内で勝利を見つけるために、getBoardsquareClicked関数を編集しています。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; 
    } 

}); 
+1

あなたは、HTMLコードを追加することができますか? –

+0

htmlは別ファイルになっているので、javascriptファイルにあるものだけを編集できます。 –

+0

セレクタが問題になるかもしれないので、私はHTMLコードを見たいと思っています:)それは他の人々にも役に立ちます –

答えて

0

I'm having trouble reading the squareclicked function and changing the background colors of the squares that won the game.

[OK]を、すべての最初の、あなたはゲームボードが必要です。グリッドを表示できるように、いくつかのCSSを追加してみてください。

CSS:

td { 
    width: 100px; 
    height: 100px; 
} 

次は、&ないテーブル自体にクリックされたそれぞれの正方形を追跡したいです。この中へ

$('table').on('click', squareClicked); 

:だから、これを変更するCSSが<table><tr> & <td>タグと戦うのが好きので、

$('td').on('click', squareClicked); 

は、一般的に我々は、<div>タグの代わりに、<table>または<tr>または<td>タグを使用します。しかし今のところ、あなたはまだプログラミングについて学んでいるので、テーブルを使うことができます。私はF12を押すと

は、私はにconsole.logでこのエラーを参照してください。

(index):68 Uncaught ReferenceError: win is not defined

それでは、私たちがやっていることは、オブジェクトISN「を「勝つ」ことを確認するためにチェックし、「オブジェクト検出」を、追加することですtを未定義またはnullに設定します。

変更:この長い手のバージョンに

if(win == true) { 

if ((typeof(win) !== 'undefined') && (win === true)) { 

またはこの短い手のバージョン、それは&ないヌル未定義でなければ勝利は唯一の真となりますので、

if (win && (win === true)) { 

このコードには他にどのような問題があるのか​​を見てみましょう....

まず、変数はいずれかを使用してどこかに定義されなければならない「勝利」:

var win = ... something ...;またはlet win = ... something ...;

ですから、それは、この関数の内部で、やっていることになっているものを定義する必要があります。

function squareClicked(e) { 

フォークしばらくの間、それを使用してこのJSfiddle &実験は、あなたが作ることができるものを見るためにそれを行う:https://jsfiddle.net/briankueck/028qpabe/

私はあなたの宿題をしません...それはより良いプログラマになるために必要なあなたの苦労を取り去るでしょう。しかし、私は正しい方向にあなたを指差して、より良いプログラマになることを躊躇しません。

コードで幸運&私はあなたがそれを手にして発見したことを教えてください!私はかなり毎日&がここ数日であなたを助けることができます。

0

私は@Clompを信じて、この宿題をあなたに挑戦してください。 しかし、私はちょうどあなたに役立つコードで何が間違っている可能性があるかを指摘したいと思います。

var className = $(this).attr('class');

This returns undefined since table elements e.g., not all td have a class by the time that getBoard() invoked.

$('winArray').css('background-color','#33CC99');

$('winArray') is not a valid selector there is no $('winArray') in the html codes and i also dont think that winArray is a valid tag.

alert('Player ' + a + ' won!');

object a is not defined.

if(checkWin())

checkWin returns an object, you could use checkWin().win to return a boolean value. or better declare new variable.

a = board[winArray[i][0]]; 
b = board[winArray[i][1]]; 
c = board[winArray[i][2]]; 

create a variable before adding a value on them.

winInfo.play and winInfo.winner

both of them are also undefined. and I don't think you need winInfo.play you can just remove it.

私はあなたのために作成したデモをチェックする前に、最初の事を理解してみてください。このようより良いプログラマになるためにあなたの将来に影響を与える可能性がある:)

$(document).ready(function(){ 
 
\t $('#X').addClass('current-player'); 
 

 
\t function switchPlayer() { 
 
\t \t var player = $('.current-player').attr('id'); 
 
\t \t $('#players div').removeClass('current-player'); 
 
\t \t if(player === 'X') { 
 
\t \t \t $('#O').addClass('current-player'); 
 
\t \t } else { 
 
\t \t \t $('#X').addClass('current-player'); 
 
\t \t } 
 
\t } 
 

 
\t $('table').on('click', squareClicked); 
 
\t 
 
\t function squareClicked(e) { 
 
\t \t var $sqr = $(e.target); 
 
\t \t var player = $('.current-player').attr('id'); 
 
\t \t if(!$sqr.attr('class')) { 
 
\t \t \t $sqr.addClass(player + '-marker'); 
 
\t \t \t switchPlayer(); 
 
\t \t } 
 
    var winInfo = checkWin(); 
 
    if(winInfo.win) { 
 
     alert('Player ' + winInfo.winner + ' won!'); 
 
    } 
 
\t } 
 
\t 
 
\t $('#newGame').on('click',newGame); 
 
\t 
 
\t function newGame() { 
 
\t \t $('td').removeAttr('class'); 
 
\t \t $('#O').removeClass('current-player'); 
 
\t \t $('#X').addClass('current-player'); 
 
\t } 
 
\t 
 
\t // Get an array of markers on each square 
 
\t function getBoard() { 
 
\t \t var board = []; 
 
\t \t // Step 1: Your code here 
 
      $('td').each(function(index, element) { 
 
      \t var className = ''; 
 
       if ($(element).attr('class')){ 
 
       \t className = $(element).attr('class'); 
 
       board.push(className.substring(0,1)); 
 
       } 
 
       else board.push(className); 
 
\t \t \t \t \t }); 
 
\t \t return board; 
 
\t } 
 
\t 
 
\t // This function is provided. You don't need to change it. 
 
\t // Check for winner 
 
\t function checkWin() { 
 
\t \t var board = getBoard(); 
 
    // array of possible win sets 
 
\t \t var winArray = [ 
 
\t \t \t [0,1,2], [3,4,5], [6,7,8], 
 
\t \t \t [0,3,6], [1,4,7], [2,5,8], 
 
\t \t \t [0,4,8], [2,4,6] ]; 
 
     
 
    var winInfo = { 
 
     win: false, 
 
     winner: '' 
 
    }; 
 
    
 
\t \t // 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; 
 
     } 
 
    } 
 
\t \t return winInfo; 
 
\t } 
 
\t 
 
});
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> 
 
\t <div id="players"> 
 
\t \t <div id="X" class="">Player X</div> 
 
\t \t <div id="O" class="">Player O</div> 
 
\t \t <input type="button" class="button" value="New Game" id="newGame"/> 
 
\t </div> 
 
\t <table> 
 
\t \t <tr> 
 
\t \t \t <td id="c0"></td> 
 
\t \t \t <td id="c1"></td> 
 
\t \t \t <td id="c2"></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td id="c3"></td> 
 
\t \t \t <td id="c4"></td> 
 
\t \t \t <td id="c5"></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td id="c6"></td> 
 
\t \t \t <td id="c7"></td> 
 
\t \t \t <td id="c8"></td> 
 
\t \t </tr> 
 
\t </table>