欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

井字游戲棋盤

CSS
張吉惟2年前9瀏覽0評論

我現(xiàn)在正在做Odin項目，我正在做井字游戲項目。我確信這對我來說很困難，但是我很期待。然而，我在這里尋求幫助，設(shè)置在HTML和CSS的董事會。我該怎么做呢？

<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>

你可以用CSS網(wǎng)格來布局。

.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>

可以用網(wǎng)格；這樣，單元格可以是棋盤的直接子元素:

<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;
}

試試看:

#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;
}

<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>

以下示例使用flexbox和vmin，這使得它可以流暢地適應(yīng)大多數(shù)視口大小。排除邊緣情況(TBH，我想不出任何)，廣場總是保持均勻的長度和整個游戲?qū)⑹冀K在視口內(nèi)垂直和水平居中。線條特征是通過改變div.line上的類來控制的

作為獎勵a & lt對話框& gt包括在選項注釋下，作為彈出窗口顯示誰贏了的消息和用戶退出或重新玩的按鈕。當(dāng)然，它的運行需要JavaScript(參見& lt對話框& gt)

細(xì)節(jié)在示例中進行了注釋

/**
 * 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;
}

<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>