gpt4 book ai didi

javascript - 为什么在这个井字游戏中输入 X 或 O 时我的 div 会移动

转载 作者:可可西里 更新时间:2023-11-01 12:58:24 26 4
gpt4 key购买 nike

我正在开发一个基本完成的井字游戏,但 UI 设计似乎有问题。当我点击一个正方形(div 标签)时,正方形向下移动。我怎样才能防止这种情况发生?我需要在我的 html/css 代码中添加什么才能使其稳定?谢谢。这是我的代码笔的链接,如果有兴趣查看其余代码:html、css、js https://codepen.io/zentech/pen/xLRzGrhtml

<div class="container">
<!-- header -->
<div class="header">
<h1>TicTacToe</h1>
<h2>You're playing against the computer!</h2>
</div>
<div class="ticTacToe">
<!-- first row (3 square) -->
<div class="row">
<div id="0" class="square"></div>
<div id="1" class="square"></div>
<div id="2" class="square"></div>
</div>

<!-- second row (3 square) -->
<div class="row">
<div id="3" class="square"></div>
<div id="4" class="square"></div>
<div id="5" class="square"></div>
</div>

<!-- third row (3 square) -->
<div class="row">
<div id="6" class="square"></div>
<div id="7" class="square"></div>
<div id="8" class="square"></div>
</div>
</div>
<div class="controls">
<h2 id="message">Message:</h2>
<a href="#" class="resetGame"><h3>Reset Game</h3</a>
</div>
</div>

CSS

body {
background-color: #999;
font-family: serif, verdana;
}

h1 {
font-size: 50px;
}

h2 {
margin-bottom: 30px;
}

.container {
margin: 0 auto;
text-align: center;
}

.row > div {
margin: 2px;
border: solid 1px black;
display: inline-block;
font-size: 35px;
width: 50px;
height: 50px;
text-align: center;
padding: 0px;
}

#message {
/* display: inline-block; */
text-align: center;
}

最佳答案

vertical-align: top 添加到 CSS 中的 .row > div 规则以修复对齐方式。

我还添加了 line-height: 50px 使每个 50px 框内的“X”和“O”字母垂直居中。

//variables
var xPlayer = "X";
var oPlayer = "O";
var turn = "X";
var board = new Array(9);
var message = document.getElementById("message");

$(document).ready(function() {

//1- listener for event clicks
$(".square").click(function() {
var sqrId = $(this).attr("id");
playerMove(sqrId);
if (checkWinners()) {
message.innerHTML = "Message: " + turn + " Wins!";
return;
}
nextPlay();
});


//reset game anchor listener
$(".resetGame").click(function() {
$(".square").text("");
$("#message").text("Message: ");
})

});

function playerMove(sqrId) {
console.log("player move: " + $('#' + sqrId).attr("id") + " " + turn);
if ($('#' + sqrId).text() == "") {
$('#' + sqrId).text(turn);
message.innerHTML = "Message: ";
} else {
console.log("error!");
message.innerHTML = "Message: Wrong move!..."
return;
}
// console.log($(this).attr("id"));
turn = (turn == 'X') ? 'O' : 'X';
}

//checking for winning combinations
function checkWinners() {
console.log("check winners");
//checking rows
if (board[0] != "" && board[0] == board[1] && board[1] == board[2]) {
return true;
} else if (board[3] != "" && board[3] == board[4] && board[4] == board[5]) return true;
else if (board[6] != "" && board[6] == board[7] && board[7] == board[8]) return true;
//checking across
else if (board[0] != "" && board[0] == board[4] && board[4] == board[8]) return true;
else if (board[2] != "" && board[2] == board[4] && board[4] == board[6]) return true;
else {
return false;
}
}

/* checking if there's more room to play, if not
then it's a draw'*/
function nextPlay() {
for (var i = 0; i < board.length; i++) {
if (board[i] == '') {
message.innerTHML = "Message: " + turn + " move";
return true;
}
}
message.innerHTML = "Message: It's a draw!";
return false;
}
body {
background-color: #999;
font-family: serif, verdana;
}

h1 {
font-size: 50px;
}

h2 {
margin-bottom: 30px;
}

.container {
margin: 0 auto;
text-align: center;
}

.row>div {
margin: 2px;
border: solid 1px black;
display: inline-block;
font-size: 35px;
width: 50px;
height: 50px;
text-align: center;
padding: 0px;
/* add this: */
vertical-align: top;
line-height: 50px;
}

#message {
/* display: inline-block; */
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- header -->
<div class="header">
<h1>TicTacToe</h1>
<h2>You're playing against the computer!</h2>
</div>
<div class="ticTacToe">
<!-- first row (3 square) -->
<div class="row">
<div id="0" class="square"></div>
<div id="1" class="square"></div>
<div id="2" class="square"></div>
</div>

<!-- second row (3 square) -->
<div class="row">
<div id="3" class="square"></div>
<div id="4" class="square"></div>
<div id="5" class="square"></div>
</div>

<!-- third row (3 square) -->
<div class="row">
<div id="6" class="square"></div>
<div id="7" class="square"></div>
<div id="8" class="square"></div>
</div>
</div>
<div class="controls">
<h2 id="message">Message:</h2>
<a href="#" class="resetGame">
<h3>Reset Game</h3</a>
</div>
</div>

关于javascript - 为什么在这个井字游戏中输入 X 或 O 时我的 div 会移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45676685/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com