英文:
Tic Tac Toe Board
问题
我现在正在进行奥丁计划，并且正在进行井字游戏项目。我相信这对我来说会非常困难，但我期待着。然而，我在这里是要求帮助在HTML和CSS中设置游戏板。我应该如何着手？
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<div class="board" id="upperLeft"></div>
<div class="board" id="upperCenter"></div>
<div class="board" id="upperRight"></div>
<div class="board" id="middleLeft"></div>
<div class="board" id="middleCenter"></div>
<div class="board" id="middleRight"></div>
<div class="board" id="lowerLeft"></div>
<div class="board" id="lowerMiddle"></div>
<div class="board" id="lowerRight"></div>
<!-- end snippet -->
请注意，上面是HTML代码片段，用于创建游戏板的各个部分。
英文:
I am doing The Odin Project right now and I am on the Tic Tac Toe project. I am sure this will be very difficult for me but I am looking forward to it. However, I am here to ask for help with setting the board up in HTML and CSS. How would I even go about this?
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<div class="board" id="upperLeft"></div>
<div class="board" id="upperCenter"></div>
<div class="board" id="upperRight"></div>
<div class="board" id="middleLeft"></div>
<div class="board" id="middleCenter"></div>
<div class="board" id=middleRight></div>
<div class="board" id="lowerLeft"></div>
<div class="board" id="lowerMiddle"></div>
<div class="board" id="lowerRight"></div>
<!-- end snippet -->
答案1
得分: 1
你可以使用CSS网格进行布局。
.board {
width: 500px;
height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto;
}
.box {
border: 3px solid;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="board">
<div class="box" id="upperLeft"></div>
<div class="box" id="upperCenter"></div>
<div class="box" id="upperRight"></div>
<div class="box" id="middleLeft"></div>
<div class="box" id="middleCenter"></div>
<div class="box" id="middleRight"></div>
<div class="box" id="bottomLeft"></div>
<div class="box" id="bottomCenter"></div>
<div class="box" id="bottomRight"></div>
</div>
另外，你可以将所有内容都包含在一个大的div中，就像我在board中所做的那样 
英文:
You can use CSS grids to lay it out.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.board {
width: 500px;
height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto;
}
.box{
border: 3px solid;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
}
<!-- language: lang-html -->
<div class="board">
<div class="box" id="upperLeft"></div>
<div class="box" id="upperCenter"></div>
<div class="box" id="upperRight"></div>
<div class="box" id="middleLeft"></div>
<div class="box" id="middleCenter"></div>
<div class="box" id="middleRight"></div>
<div class="box" id="bottomLeft"></div>
<div class="box" id="bottomCenter"></div>
<div class="box" id="bottomRight"></div>
</div>
<!-- end snippet -->
Also, you can make everything a member of one class by including it in one big div like I did with the board
答案2
得分: 0
你可以使用 grid；这样，单元格可以直接成为容器的子元素：
<div id="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
#board {
display: grid;
/* 使三行等高 */
grid-template-rows: repeat(3, 1fr);
/* 使三列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 控制单元格之间的间隔 */
gap: 1em;
/* 高度自己选择 */
height: 400px;
/* 使其成为完美的正方形 */
aspect-ratio: 1 / 1;
}
试试看：
<!-- 开始片段: js 隐藏: true -->
<!-- 语言: lang-css -->
#board {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 1em;
margin: 2em auto;
height: 400px;
aspect-ratio: 1 / 1;
}
.cell {
背景: #ddd;
}
<!-- 语言: lang-html -->
<div id="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<!-- 结束片段 -->
英文:
You can use grid; this way, cells can be direct children of the board:
<div id="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
#board {
display: grid;
/* Make three rows of equal height */
grid-template-rows: repeat(3, 1fr);
/* Make three columns of equal width */
grid-template-columns: repeat(3, 1fr);
/* Controls the gap between cells */
gap: 1em;
/* A size of your choice */
height: 400px;
/* Make it a perfect square */
aspect-ratio: 1 / 1;
}
Try it:
<!-- begin snippet: js hide: true -->
<!-- language: lang-css -->
#board {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 1em;
margin: 2em auto;
height: 400px;
aspect-ratio: 1 / 1;
}
.cell {
background: #ddd;
}
<!-- language: lang-html -->
<div id="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<!-- end snippet -->
答案3
得分: 0
以下是翻译好的内容：
以下示例使用弹性盒子布局和vmin，使其能够在大多数视口大小上自适应。除了一些极端情况（老实说，我想不出任何情况），这些正方形始终保持相等的边长，整个游戏始终在视口垂直和水平居中显示。线条特性通过更改div.line上的类来控制。
作为奖励，还包括一个<dialog>，它在OPTION注释下作为弹出窗口显示消息，显示谁赢了以及用户退出或重新玩的按钮。当然，需要JavaScript才能使其正常工作（参见<dialog>）。
示例中有注释
/**
* 所有长度（除了轮廓以外）都以“vmin”为单位
* 例如，5vmin = 5vh（如果视口高度小于视口宽度）
* 或者5vw（如果视口宽度小于视口高度）。
*/
:root {
font: 5vmin/1 "Segoe UI";
}
/**
* 所有元素都垂直和水平居中显示。
* “form”是<dialog>的一部分（见下面的OPTION），
* 它不是必需的。
*/
body,
main,
.frame,
.square,
form {
display: flex;
justify-content: center;
align-items: center;
}
body {
min-height: 100vh;
padding: 0;
background: white;
overflow: hidden;
}
main {
flex-flow: row wrap; /* ".square"将按行排列，并在填充前一行的3个方块时创建新行 */
position: relative; /* 这将设置“main”的边框作为“.frame”的定位参考 */
width: 75vmin;
height: 75vmin;
}
.square {
width: 25vmin;
height: 25vmin;
margin: 0;
outline: 3px inset grey;
font-size: 5rem;
font-family: Consolas; /* 等宽字体最适合居中对齐 */
vertical-align: middle;
text-transform: uppercase;
cursor: pointer;
}
.frame {
position: absolute; /* 将“.frame”设置为正常“flow”之外，以防止其尺寸干扰元素的“static” */
z-index: 1; /* 将“.frame”置于z轴上的“static”元素之上 */
top: 0; /* 将左上角定位到“main”的顶部 */
left: 0; /* 将左上角定位到“main”的左侧 */
min-width: 100%;
min-height: 100%;
outline: 3vw solid white; /* 遮罩所有“.square”的外边缘 */
overflow: hidden; /* 隐藏超出边界的所有内容 */
pointer-events: none; /* “.frame”位于所有“.square”之上，还会阻止用户点击或悬停在“.square”上，从而允许绕过“.frame”，以使“.square”可点击和可悬停 */
}
.line {
position: relative; /* “.line”在移动到新位置时参考其原始位置 */
min-width: 150%;
height: 3vmin;
border: 0;
background: black;
transform-origin: center center; /* 允许它以中心旋转 */
}
/**
* 通过类分配线位置到“.line”
* 每个数字表示“.square”的位置
* “.s000”隐藏“.line”，这是它的正常状态
*/
/* 没有“.line” */
.s000 {
display: none;
}
/* 顶部水平 */
.s123 {
bottom: 25vmin;
}
/* 中间水平 */
.s456 {/* 这是默认位置，可以通过不将任何类分配给“.line”来实现相同的效果 */ }
/* 底部水平 */
.s789 {
top: 25vmin;
}
/* 左侧垂直 */
.s147 {
right: 25vmin;
transform: rotate(90deg);
}
/* 中间垂直 */
.s258 {
transform: rotate(90deg);
}
/* 右侧垂直 */
.s369 {
left: 25vmin;
transform: rotate(90deg);
}
/* 从左到右对角线 */
.s159 {
transform: rotate(45deg);
}
/* 从右到左对角线 */
.s357 {
transform: rotate(-45deg);
}
/* OPTION */
dialog {
position: fixed;
z-index: 2;
border-radius: 8px;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
}
form {
flex-flow: column nowrap;
font-variant: small-caps;
}
fieldset {
border: 0;
}
#message {
font-size: 3rem;
text-align: center;
}
input {
width: 5rem;
font: inherit;
font-size: 2rem;
vertical-align: middle;
cursor: pointer;
}
<main>
<div class="square">x</div>
<div class="square">o</div>
<div class="square">o</div>
<div class="square"></div>
<div class="square">x</div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square">x</div>
<section class="frame">
<div class="line s159"></div>
</section>
</main>
<!-- OPTION -->
<dialog>
<form method="dialog">
<output id="message">X wins!</output>
<fieldset>
<input type="submit" value="Exit">
<input type="submit" value="Play">
</fieldset>
</form>
</dialog>
<details>
<summary>英文:</summary>
The following example uses flexbox and `vmin` which makes it fluidly adaptable to most viewport sizes. Excluding edge cases (TBH, I can't think of any), the squares always maintain even lengths and and the whole game will always be centered vertically and horizontally within the viewport. The line feature is controlled by changing classes on `div.line`.
As a bonus a `<dialog>` is included which is under the ***OPTION*** comment as a popup to display a message as to who won and buttons for the user to exit or play again. JavaScript is required for it to function of course (see [`<dialog>`][1])
**Details are commented in example**
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
/**
* All lengths (with the exception of outlines) are in "vmin"
* ex. 5vmin = 5vh
* if viewport height is smaller than viewport width.
* OR
* 5vw
* if viewport width is smaller than viewport height.
*/
:root {
font: 5vmin/1 "Segoe UI";
}
/**
* All elements center it's contents vertically and horizontally.
* "form" is part of the <dialog> (see OPTION below)
* it is not required.
*/
body,
main,
.frame,
.square,
form {
display: flex;
justify-content: center;
align-items: center;
}
body {
min-height: 100vh;
padding: 0;
background: white;
overflow: hidden;
}
main {
flex-flow: row wrap /* ".square"s will orient in rows and will
make a new row when 3 of them have
filled the previous row */ ;
position: relative /* This sets the borders of "main" as the
reference for ".frame" positioning */ ;
width: 75vmin;
height: 75vmin;
}
.square {
width: 25vmin;
height: 25vmin;
margin: 0;
outline: 3px inset grey;
font-size: 5rem;
font-family: Consolas /* Monospaced fonts center the best */ ;
vertical-align: middle;
text-transform: uppercase;
cursor: pointer;
}
.frame {
position: absolute /* Sets ".frame" out of normal "flow" so
that it's dimensions do not interfere
with the "static" of the elements */ ;
z-index: 1 /* Brings ".frame" above the "static" elements in
the z-axis */ ;
top: 0 /* Position top left corner to the top of "main" */;
left: 0 /* Position top left corner to the left of "main" */ ;
min-width: 100%;
min-height: 100%;
outline: 3vw solid white /* Mask the outer edges of all ".square" */ ;
overflow: hidden /* Hide all content that exceeds it's borders */ ;
pointer-events: none /* ".frame" sits above all of the ".square"s
which also blocks the user from clicking
or hovering over any ".square". This allows
".frame" to be bypassed so that ".square" is
clickable and hoverable again */ ;
}
.line {
position: relative /* ".line" references it's original position
when moving to a new position */ ;
min-width: 150%;
height: 3vmin;
border: 0;
background: black;
transform-origin: center center /* Allows it to spin from it's
center when it rotates */;
}
/**
* Line positions are assigned by a class to ".line"
* Each number represents the position of a ".square"
* ".s000" hides ".line" which is it's normal state
*/
/* No ".line" */
.s000 {
display: none;
}
/* Top horizontal */
.s123 {
bottom: 25vmin;
}
/* Middle horizontal */
.s456 {/* This is default position the same effect can be
accomplished by not assigning any class to ".line"*/ }
/* Bottom horizontal */
.s789 {
top: 25vmin;
}
/* Left vertical */
.s147 {
right: 25vmin;
transform: rotate(90deg);
}
/* Center vertical */
.s258 {
transform: rotate(90deg);
}
/* Right vertical */
.s369 {
left: 25vmin;
transform: rotate(90deg);
}
/* Left to right diagonal */
.s159 {
transform: rotate(45deg);
}
/* Right to left diagonal */
.s357 {
transform: rotate(-45deg);
}
/* OPTION */
dialog {
position: fixed;
z-index: 2;
border-radius: 8px;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
}
form {
flex-flow: column nowrap;
font-variant: small-caps;
}
fieldset {
border: 0;
}
#message {
font-size: 3rem;
text-align: center;
}
input {
width: 5rem;
font: inherit;
font-size: 2rem;
vertical-align: middle;
cursor: pointer;
}
<!-- language: lang-html -->
<main>
<div class="square">x</div>
<div class="square">o</div>
<div class="square">o</div>
<div class="square"></div>
<div class="square">x</div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square">x</div>
<section class="frame">
<div class="line s159"></div>
</section>
</main>
<!-- OPTION -->
<dialog>
<form method="dialog">
<output id="message">X wins!</output>
<fieldset>
<input type="submit" value="Exit">
<input type="submit" value="Play">
</fieldset>
</form>
</dialog>
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
</details>
# 答案4
**得分**: 0
1. 这是一个可以帮助的表格。
2. HTML：
```html
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- CSS：
td {
border: 1px solid black;
height: 50px;
width: 50px;
}
英文:
1.Here's a table that would help.
2.Html:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
3.Css:
td {
border: 1px solid black;
height: 50px;
width: 50px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论