如何將Javascript添加到我的HTML和CSS tic tac toe遊戲中？

-3

這是我的HTML和CSS。我沒有嵌入的Javascript。但是我參考了一個Javascript文件。什麼是最簡單的Javascript只有一個X和'O'出現時，我點擊一個盒子？如何將Javascript添加到我的HTML和CSS tic tac toe遊戲中？

<html> 
    <head> 
     <title>First Tic Tac Toe</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <script type="script.js"></script> 
    </head> 
    <body> 
     <h1>Tic Tac Toe</h1> 

     <div class="wrapper"> 
      <div class="gameboard"> 

       <div class="Row1"> 
        <div id="cell1"></div> 
        <div id="cell2"></div> 
        <div id="cell3"></div> 
       </div> 

       <div class="Row2"> 
        <div id="cell4"></div> 
        <div id="cell5"></div> 
        <div id="cell6"></div> 
       </div> 

       <div class="Row3"> 
        <div id="cell7"></div> 
        <div id="cell8"></div> 
        <div id="cell9"></div> 
       </div> 

      </div> 

      <div class="button"> 

      <button>New Game</button> 
      <button>End Game</button> 

      </div> 
     </div> 

    </body> 
</html>

這是我的CSS

h1 { 
    text-align: center; 
} 


body { 
    background-image: url("http://www.staceybess.com/gfx/bg-chalkboard.jpg"); 
    background-size: cover; 
} 


#chalk { 
    position: absolute; 
    z-index: -1; 
} 


.gameboard { 
    width: 328px; 
    height:318px; 
    z-index: 1; 
    margin-top: 75px; 
} 

.wrapper { 
    width: 330px; 
    margin:0 auto; 

} 

.button { 

    background-color:white; 
    width: 160px; 
    margin:0 auto; 
} 

button { 
    float: left; 
} 

.row1, .row2, .row3 { 
    clear:both; 

} 

#cell1,#cell2,#cell4,#cell5 { 
    border-right: 8px solid white; 
    border-bottom: 8px solid white; 
    border-style: eraser; 
} 

#cell3,#cell6{ 
    border-bottom: 8px solid white; 
} 

#cell7 { 
    border-right: 8px solid white; 
} 

#cell9 { 
    border-left: 8px solid white; 
} 

#cell1 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell2 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell3 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell4 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell5 { 
width:100px; 
    height:100px; 
    float: left; 
} 

#cell6 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell7 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell8 { 
    width:100px; 
    height:100px; 
    float: left; 
} 

#cell9 { 
    width:100px; 
    height:100px; 
    float: left; 
}

來源

2014-01-09 user3176492

您可能要添加Javascript，而不是Java。雖然名稱相似，但它們是完全不同的編程語言。 –

JAVA！= JAAAVAAASSCCRIPPPTPTPTTPTPTPTPTPEH，READ TAG DISCRIPTION – Cilan

我們不會爲您編碼;順便說一下，除非你打算使用** id，否則請將所有班級更改爲同一班級。** – Cilan

首先，不要爲每行使用不同的類，如果沒有必要的。無處不在使用行和單元格。

通過頭部鏈接包含jquery.js。

然後

$(document).ready(function(){ 
    $(".gameboard").find(".cell").click(function(){ 
     console.log("Clicked"); 
    }); 
});

好了，現在它說 '點擊'。

讓我們添加'X'或'O'。

$(document).ready(function(){ 
    var tour = 0; 
    $(".gameboard").find(".cell").click(function(){ 
     if(tour%2==0){ 
      $(this).text("O"); 
     } else { 
      $(this).text("X"); 
     } 
     i++; 
    }); 
});

現在我們不能覆蓋以前的值。

$(document).ready(function(){ 
    var tour = 0; 
    $(".gameboard").find(".cell").click(function(){ 
     if($this.text() != ""){ return; } 
     if(tour%2==0){ 
      $(this).text("O"); 
     } else { 
      $(this).text("X"); 
     } 
     i++; 
    }); 
});

來源

2014-01-09 23:47:43 farvilain

我的女朋友等我看電視節目，請某人繼續：p – farvilain

如何將Javascript添加到我的HTML和CSS tic tac toe遊戲中？

回答

相關問題