2016-04-15 69 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功能錯誤 - 井字遊戲

checkWin函數已爲我們預編程,所以錯誤不應該在那裏。

我在閱讀squareclicked函數並更改贏得遊戲的正方形的背景顏色時遇到了困難。這可能是我的getBoard功能編碼錯誤爲好。

任何幫助將是驚人的。

這個任務主要關注Jquery,所以請記住,我必須使用上面列出的兩個函數。對於作業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.

好吧,首先,你需要一個遊戲板。嘗試添加一些CSS,這樣就可以看到網格。

CSS:

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

接下來,你要跟蹤的是點擊&不表本身,每平方。因此,改變這種:

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

進入這個:

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

一般我們使用<div>標籤,而不是<table><tr><td>標籤,因爲CSS喜歡和<table>打,<tr> & <td>標籤。但現在,我們可以使用表...因爲你還在學習編程。

當我按下F12,我看到的console.log此錯誤:

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

所以我們做的是增加「目標檢測」,檢查以確保「贏」對象」不是個t設置爲undefined或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>