1
我是在Javascript上製作一個Tic-Tac-Toe遊戲，板子上的'X'和'O'有一點點偏移，並且沒有以縱軸爲中心。我試圖用padding-top或padding-bottom修復它，但似乎它們什麼都不做。我要離開整個代碼。填充不能正常工作
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
\t <!-- INITIALIZE -->
\t \t <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t \t <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
\t \t <link rel="stylesheet" href="stylesheet.css">
\t \t <script src="script.js"></script>
\t \t <!--CONTENT-->
\t \t <title>TicTacToe</title>
</head>
<body>
\t <div class="container text-center">
\t \t <div id="title">
\t \t \t TIC-TAC-TOE
\t \t </div>
\t \t <div id="textContainer">
\t \t </div>
\t </div>
\t
</body>
</html>$(document).ready(function() {
\t chooseSide();
});
var playerSelect, aiSelect = "";
var turn;
var gameOn;
var xWins;
var counter = 0;
var drawGame = false;
var gridArray = [];
function chooseSide(){
\t $('#textContainer').html('<p> Choose side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');
\t $('.chooseButton').click(function(){
\t \t playerSelect = $(this).html();
\t \t if(playerSelect == "X"){
\t \t \t aiSelect = "O";
\t \t } else { aiSelect = "X"; }
\t \t iniGame();
\t });
}
function iniGame(){
\t $('#textContainer').fadeOut("fast", function(){
\t \t $('#textContainer').remove();
\t });
\t $('body').hide().append('<div id="gridContainer"></div>').fadeIn("slow");
\t $('body').hide().append('<div id="winnerContainer"> <div id="replay" class="text-center fa fa-refresh fa-3x"></div> </div>').fadeIn("slow");
\t
\t gameOn = true;
\t turn = "player";
\t resetGrid();
}
function resetGrid(){
\t $('.gridElement').remove();
\t for(var i = 0; i < 9; i++){
\t \t $('#gridContainer').append('<div class="gridElement" id="gridNumber'+i+'"></div>');
\t \t gridArray.push('e');
\t }
\t console.log(gridArray);
\t /*var gridElementSize = $('#gridContainer').width()/3;
\t $('.gridElement').css({'width': gridElementSize, 'height': gridElementSize});*/
\t $('.gridElement').click(function(e){
\t \t handlePlayerClick(e);
\t });
}
function handlePlayerClick(e){
\t if(gameOn == false){
\t \t if(xWins == true && drawGame == false){
\t \t \t console.log("X Wins");
\t \t } else if(xWins == false && drawGame == false){
\t \t \t console.log("O Wins");
\t \t } else if(xWins == false && drawGame == true){
\t \t \t console.log("Its a draw");
\t \t }
\t \t return;
\t } else {
\t \t if(turn == "player"){
\t \t \t square = $(e.target);
\t \t \t if(square.html() == ""){
\t \t \t \t square.html(playerSelect);
\t \t \t \t turn = "enemy";
\t \t \t \t console.log('Player has made a move');
\t \t \t \t checkForWin();
\t \t \t \t if(gameOn == true){
\t \t \t \t \t makeEnemyMove(); \t
\t \t \t \t }
\t \t \t } else { console.log("Square taken"); }
\t \t } else {
\t \t \t if(gameOn == true){
\t \t \t \t makeEnemyMove(); \t
\t \t \t }
\t \t \t console.log("Enemy's turn");
\t \t }
\t }
}
function makeEnemyMove(){
\t var chooseNumber = Math.floor(Math.random()*9);
\t var chooseBox = $('#gridNumber'+chooseNumber);
\t if(chooseBox.html() == ''){
\t \t chooseBox.html(aiSelect);
\t \t checkForWin();
\t \t turn ="player";
\t } else {
\t \t makeEnemyMove();
\t }
}
function checkForWin(){
\t for(var i = 0; i < 9; i++){
\t \t var squareVal = $('#gridNumber' + i).html();
\t \t if(squareVal !== ''){
\t \t \t counter ++;
\t \t }
\t \t gridArray[i] = squareVal;
\t }
\t console.log(counter);
\t
\t //--- X Checks for winning ----
\t if((gridArray[0] == 'X' && gridArray[1] == 'X' && gridArray[2] == 'X') ||
\t \t (gridArray[3] == 'X' && gridArray[4] == 'X' && gridArray[5] == 'X') ||
\t \t (gridArray[6] == 'X' && gridArray[7] == 'X' && gridArray[8] == 'X') ||
\t \t (gridArray[0] == 'X' && gridArray[3] == 'X' && gridArray[6] == 'X') ||
\t \t (gridArray[1] == 'X' && gridArray[4] == 'X' && gridArray[7] == 'X') ||
\t \t (gridArray[2] == 'X' && gridArray[5] == 'X' && gridArray[8] == 'X') ||
\t \t (gridArray[0] == 'X' && gridArray[4] == 'X' && gridArray[8] == 'X') ||
\t \t (gridArray[2] == 'X' && gridArray[4] == 'X' && gridArray[6] == 'X'))
\t {
\t \t gameOn = false;
\t \t xWins = true;
\t \t $('#winnerContainer').append('<div id="winnerText">X WINS!</div>');
\t }
\t //--- Y Checks for winning ----
\t if((gridArray[0] == 'O' && gridArray[1] == 'O' && gridArray[2] == 'O') ||
\t \t (gridArray[3] == 'O' && gridArray[4] == 'O' && gridArray[5] == 'O') ||
\t \t (gridArray[6] == 'O' && gridArray[7] == 'O' && gridArray[8] == 'O') ||
\t \t (gridArray[0] == 'O' && gridArray[3] == 'O' && gridArray[6] == 'O') ||
\t \t (gridArray[1] == 'O' && gridArray[4] == 'O' && gridArray[7] == 'O') ||
\t \t (gridArray[2] == 'O' && gridArray[5] == 'O' && gridArray[8] == 'O') ||
\t \t (gridArray[0] == 'O' && gridArray[4] == 'O' && gridArray[8] == 'O') ||
\t \t (gridArray[2] == 'O' && gridArray[4] == 'O' && gridArray[6] == 'O'))
\t {
\t \t gameOn = false;
\t \t xWins = false;
\t \t $('#winnerContainer').append('<div id="winnerText">O WINS!</div>');
\t }
\t if(counter == 9 && gameOn == true){
\t \t drawGame = true;
\t \t gameOn = false;
\t \t console.log("Its a draw");
\t } else {counter = 0;}
\t if(gameOn == false && drawGame == false){
\t \t if(xWins == true){
\t \t \t console.log("X Wins");
\t \t } else {
\t \t \t console.log("O Wins");
\t \t }
\t \t return;
\t }
}body{
\t background-color: #338f51;
\t font-family: 'Passion One', cursive;
}
#title{
\t color: #fbd242;
\t font-size: 120px;
\t margin-top: 10px;
}
#textContainer{
\t color: #fbd242;
\t font-size: 40px;
\t margin-top: 20%;
}
.chooseButton{
\t display: inline-block;
\t font-size: 120px;
\t border-radius: 10px;
\t padding-top:10px;
\t padding-left: 50px;
\t padding-right: 50px;
\t background-color: #d81f70;
}
#gridContainer{
\t width: 400px;
\t height: 400px;
\t background-color: #ef529c;
\t border-radius: 10px;
\t margin-left: auto;
\t margin-right: auto;
\t margin-top: 10px;
}
#gridContainer > div{
\t color: #fbd242;
\t font-size: 140px;
\t background-color: #d81f70;
\t padding-bottom: 20px;
\t padding-left: 25px;
\t margin-top: 10px;
\t margin-left: 10px;
\t display: inline-block;
\t width: 120px; height: 120px;
\t vertical-align:top;
\t border: 1px solid #d81f70;
}
#replay{
\t color: #fbd242;
\t width: 20px;
\t display:block;
\t margin-left: auto;
\t margin-right: auto;
\t margin-top: 10px;
}<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
\t <!-- INITIALIZE -->
\t \t <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t \t <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
\t \t <link rel="stylesheet" href="stylesheet.css">
\t \t <script src="script.js"></script>
\t \t <!--CONTENT-->
\t \t <title>TicTacToe</title>
</head>
<body>
\t <div class="container text-center">
\t \t <div id="title">
\t \t \t TIC-TAC-TOE
\t \t </div>
\t \t <div id="textContainer">
\t \t </div>
\t </div>
\t
</body>
</html>
請提供一個簡單的工作演示 –