填充不能正常工作

时间：2016-08-30 17:52:49

标签： javascript html css padding

我在Javascript和＆＃39; X＆＃39;上做了一个Tic-Tac-Toe游戏。和＆＃39; O＆＃39;在电路板上略微向下并且没有以垂直轴为中心。我尝试使用填充顶部或填充底部来修复它，但似乎它们什么都不做。我离开了整个代码。

＆＃13;
＆＃13; 
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
	<!-- INITIALIZE -->
		<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<link rel="stylesheet" href="stylesheet.css">
		<script src="script.js"></script>

		<!--CONTENT-->
		<title>TicTacToe</title>
</head>
<body>
	<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>
	

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
$(document).ready(function() {
	chooseSide();
});

var playerSelect, aiSelect = "";
var turn;
var gameOn;
var xWins;
var counter = 0;
var drawGame = false;
var gridArray = [];

function chooseSide(){

	$('#textContainer').html('<p> Choose side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');

	$('.chooseButton').click(function(){
		playerSelect = $(this).html();

		if(playerSelect == "X"){
			aiSelect = "O";
		} else { aiSelect = "X"; }

		iniGame();

	});
}

function iniGame(){
	$('#textContainer').fadeOut("fast", function(){
		$('#textContainer').remove();
	});

	$('body').hide().append('<div id="gridContainer"></div>').fadeIn("slow");
	$('body').hide().append('<div id="winnerContainer"> <div id="replay" class="text-center fa fa-refresh fa-3x"></div> </div>').fadeIn("slow");
	
	gameOn = true;
	turn = "player";
	resetGrid();
}

function resetGrid(){

	$('.gridElement').remove();

	for(var i = 0; i < 9; i++){
		$('#gridContainer').append('<div class="gridElement" id="gridNumber'+i+'"></div>');
		gridArray.push('e');
	}

	console.log(gridArray);

	/*var gridElementSize = $('#gridContainer').width()/3;

	$('.gridElement').css({'width': gridElementSize, 'height': gridElementSize});*/

	$('.gridElement').click(function(e){
		handlePlayerClick(e);
	});

}

function handlePlayerClick(e){

	if(gameOn == false){

		if(xWins == true && drawGame == false){
			console.log("X Wins");
		} else if(xWins == false && drawGame == false){
			console.log("O Wins");
		} else if(xWins == false && drawGame == true){
			console.log("Its a draw");
		}

		return;

	}  else {

		if(turn == "player"){

			square = $(e.target);

			if(square.html() == ""){
				square.html(playerSelect);
				turn = "enemy";
				console.log('Player has made a move');
				checkForWin();
				if(gameOn == true){
					makeEnemyMove();	
				}
			} else { console.log("Square taken"); } 

		} else {
			if(gameOn == true){
				makeEnemyMove();	
			}
			console.log("Enemy's turn");
		}

	}
}

function makeEnemyMove(){
	var chooseNumber = Math.floor(Math.random()*9);
	var chooseBox = $('#gridNumber'+chooseNumber);

	if(chooseBox.html() == ''){
		chooseBox.html(aiSelect);
		checkForWin();
		turn ="player";
	} else {
		makeEnemyMove();
	}

}

function checkForWin(){


	for(var i = 0; i < 9; i++){
		var squareVal = $('#gridNumber' + i).html();
		if(squareVal !== ''){
			counter ++;
		}
		gridArray[i] = squareVal;
	}
	console.log(counter);
	
	//--- X Checks for winning ----
	if( (gridArray[0] == 'X' && gridArray[1] == 'X' && gridArray[2] == 'X') ||
		(gridArray[3] == 'X' && gridArray[4] == 'X' && gridArray[5] == 'X') ||
		(gridArray[6] == 'X' && gridArray[7] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[3] == 'X' && gridArray[6] == 'X') ||
		(gridArray[1] == 'X' && gridArray[4] == 'X' && gridArray[7] == 'X') ||
		(gridArray[2] == 'X' && gridArray[5] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[4] == 'X' && gridArray[8] == 'X') ||
		(gridArray[2] == 'X' && gridArray[4] == 'X' && gridArray[6] == 'X') ) 
	{ 
		gameOn = false; 
		xWins = true;
		$('#winnerContainer').append('<div id="winnerText">X WINS!</div>');
	}

	//--- Y Checks for winning ----
	if( (gridArray[0] == 'O' && gridArray[1] == 'O' && gridArray[2] == 'O') ||
		(gridArray[3] == 'O' && gridArray[4] == 'O' && gridArray[5] == 'O') ||
		(gridArray[6] == 'O' && gridArray[7] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[3] == 'O' && gridArray[6] == 'O') ||
		(gridArray[1] == 'O' && gridArray[4] == 'O' && gridArray[7] == 'O') ||
		(gridArray[2] == 'O' && gridArray[5] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[4] == 'O' && gridArray[8] == 'O') ||
		(gridArray[2] == 'O' && gridArray[4] == 'O' && gridArray[6] == 'O') )
	{ 
		gameOn = false; 
		xWins = false;
		$('#winnerContainer').append('<div id="winnerText">O WINS!</div>');
	}

	if(counter == 9 && gameOn == true){
		drawGame = true;
		gameOn = false;
		console.log("Its a draw");
	} else {counter = 0;}

	if(gameOn == false && drawGame == false){
		if(xWins == true){
			console.log("X Wins");
		} else {
			console.log("O Wins");
		}
		return;
	}

}
＆＃13; 
body{
	background-color: #338f51;
	font-family: 'Passion One', cursive;


}

#title{
	color: #fbd242;
	font-size: 120px;

	margin-top: 10px;
}

#textContainer{
	color: #fbd242;
	font-size: 40px;

	margin-top: 20%;


}

.chooseButton{

	display: inline-block;

	font-size: 120px;

	border-radius: 10px;

	padding-top:10px;
	padding-left: 50px;
	padding-right: 50px;


	background-color: #d81f70;
}

#gridContainer{
	width: 400px;
	height: 400px;

	background-color: #ef529c;
	border-radius: 10px; 

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#gridContainer > div{

	color: #fbd242;
	font-size: 140px;
	background-color: #d81f70;

	padding-bottom: 20px;
	padding-left: 25px;
	margin-top: 10px;
	margin-left: 10px;

	display: inline-block;

	width: 120px; height: 120px;
	vertical-align:top;

	border: 1px solid #d81f70;
}



#replay{

	color: #fbd242;

	width: 20px;

	display:block;

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
＆＃13; 
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
	<!-- INITIALIZE -->
		<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<link rel="stylesheet" href="stylesheet.css">
		<script src="script.js"></script>

		<!--CONTENT-->
		<title>TicTacToe</title>
</head>
<body>
	<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>
	

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您想摆脱填充并设置行高和文本对齐

#gridContainer > div {
    line-height: .8em;  /* something like this */
    text-align: center;
    /* rest of the code minus the padding */
}

答案 1 :(得分：0)

需要更新一些** CSS：* 

.gridElement{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

这是工作Demo

<强> CODE：

注意：运行代码段代码需要一段时间才能加载。点击run snippet code后等待加载 

$(document).ready(function() {
	chooseSide();
});

var playerSelect, aiSelect = "";
var turn;
var gameOn;
var xWins;
var counter = 0;
var drawGame = false;
var gridArray = [];

function chooseSide(){

	$('#textContainer').html('<p> Choose side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');

	$('.chooseButton').click(function(){
		playerSelect = $(this).html();

		if(playerSelect == "X"){
			aiSelect = "O";
		} else { aiSelect = "X"; }

		iniGame();

	});
}

function iniGame(){
	$('#textContainer').fadeOut("fast", function(){
		$('#textContainer').remove();
	});

	$('body').hide().append('<div id="gridContainer"></div>').fadeIn("slow");
	$('body').hide().append('<div id="winnerContainer"> <div id="replay" class="text-center fa fa-refresh fa-3x"></div> </div>').fadeIn("slow");
	
	gameOn = true;
	turn = "player";
	resetGrid();
}

function resetGrid(){

	$('.gridElement').remove();

	for(var i = 0; i < 9; i++){
		$('#gridContainer').append('<div class="gridElement" id="gridNumber'+i+'"></div>');
		gridArray.push('e');
	}

	console.log(gridArray);

	/*var gridElementSize = $('#gridContainer').width()/3;

	$('.gridElement').css({'width': gridElementSize, 'height': gridElementSize});*/

	$('.gridElement').click(function(e){
		handlePlayerClick(e);
	});

}

function handlePlayerClick(e){

	if(gameOn == false){

		if(xWins == true && drawGame == false){
		} else if(xWins == false && drawGame == false){
		} else if(xWins == false && drawGame == true){
		}

		return;

	}  else {

		if(turn == "player"){

			square = $(e.target);

			if(square.html() == ""){
				square.html(playerSelect);
				turn = "enemy";
				checkForWin();
				if(gameOn == true){
					makeEnemyMove();	
				}
			} else { } 

		} else {
			if(gameOn == true){
				makeEnemyMove();	
			}
		}

	}
}

function makeEnemyMove(){
	var chooseNumber = Math.floor(Math.random()*9);
	var chooseBox = $('#gridNumber'+chooseNumber);

	if(chooseBox.html() == ''){
		chooseBox.html(aiSelect);
		checkForWin();
		turn ="player";
	} else {
		makeEnemyMove();
	}

}

function checkForWin(){


	for(var i = 0; i < 9; i++){
		var squareVal = $('#gridNumber' + i).html();
		if(squareVal !== ''){
			counter ++;
		}
		gridArray[i] = squareVal;
	}
	
	//--- X Checks for winning ----
	if( (gridArray[0] == 'X' && gridArray[1] == 'X' && gridArray[2] == 'X') ||
		(gridArray[3] == 'X' && gridArray[4] == 'X' && gridArray[5] == 'X') ||
		(gridArray[6] == 'X' && gridArray[7] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[3] == 'X' && gridArray[6] == 'X') ||
		(gridArray[1] == 'X' && gridArray[4] == 'X' && gridArray[7] == 'X') ||
		(gridArray[2] == 'X' && gridArray[5] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[4] == 'X' && gridArray[8] == 'X') ||
		(gridArray[2] == 'X' && gridArray[4] == 'X' && gridArray[6] == 'X') ) 
	{ 
		gameOn = false; 
		xWins = true;
		$('#winnerContainer').append('<div id="winnerText">X WINS!</div>');
	}

	//--- Y Checks for winning ----
	if( (gridArray[0] == 'O' && gridArray[1] == 'O' && gridArray[2] == 'O') ||
		(gridArray[3] == 'O' && gridArray[4] == 'O' && gridArray[5] == 'O') ||
		(gridArray[6] == 'O' && gridArray[7] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[3] == 'O' && gridArray[6] == 'O') ||
		(gridArray[1] == 'O' && gridArray[4] == 'O' && gridArray[7] == 'O') ||
		(gridArray[2] == 'O' && gridArray[5] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[4] == 'O' && gridArray[8] == 'O') ||
		(gridArray[2] == 'O' && gridArray[4] == 'O' && gridArray[6] == 'O') )
	{ 
		gameOn = false; 
		xWins = false;
		$('#winnerContainer').append('<div id="winnerText">O WINS!</div>');
	}

	if(counter == 9 && gameOn == true){
		drawGame = true;
		gameOn = false;
	} else {counter = 0;}

	if(gameOn == false && drawGame == false){
		if(xWins == true){
		} else {
		}
		return;
	}

}
body{
	background-color: #338f51;
	font-family: 'Passion One', cursive;


}

#title{
	color: #fbd242;
	font-size: 120px;

	margin-top: 10px;
}

#textContainer{
	color: #fbd242;
	font-size: 40px;

	margin-top: 20%;


}

.chooseButton{

	display: inline-block;

	font-size: 120px;

	border-radius: 10px;

	padding-top:10px;
	padding-left: 50px;
	padding-right: 50px;


	background-color: #d81f70;
}

#gridContainer{
	width: 400px;
	height: 400px;

	background-color: #ef529c;
	border-radius: 10px; 

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#gridContainer > div{

	color: #fbd242;
	font-size: 140px;
	background-color: #d81f70;

	padding-bottom: 20px;
	padding-left: 25px;
	margin-top: 10px;
	margin-left: 10px;

	display: inline-block;

	width: 120px; height: 120px;
	vertical-align:top;

	border: 1px solid #d81f70;
}



#replay{

	color: #fbd242;

	width: 20px;

	display:block;

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
.gridElement{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
}
<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>

答案 2 :(得分：0)

您需要调整#gridContainer > div的行高，请参阅小提琴https://jsfiddle.net/sxh0n7d1/34/ 

#gridContainer > div {
    color: #fbd242;
    font-size: 140px;
    background-color: #d81f70;
    margin-top: 10px;
    margin-left: 10px;
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: top;
    border: 1px solid #d81f70;
    line-height: 110px;
}

答案 3 :(得分：0)

另一个简单的修复方法是将网格容器ID中的字体大小更改为100px而不是140px。这将正确地使X和O元素居中。

相关问题
最新问题