完成棋盘布局

src/App.css

@@ -1,38 +1,9 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+* {
+  box-sizing:border-box;
+  padding: 0;
+  margin: 0;
+}
+html, body, #root {
+  width: 100%;
+  height: 100%;
 }

src/App.js

@@ -1,24 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import Checkerboard from './views/Checkerboard'
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+  return (<>
+    <Checkerboard />
+  </>
   );
 }
 

src/views/Checkerboard.css

@@ -0,0 +1,81 @@
+.checkerboard{
+    position: relative;
+}
+.center{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    width: 30rem;
+    height: 30rem;
+}
+.black{
+    background-image: url('/src/assets/point.png');
+    background-position: 0.08rem -1.5rem;
+    background-size: 200%;
+    background-repeat: no-repeat;
+}
+
+.white{
+    background-image: url('/src/assets/point.png');
+    background-position: -1.9999rem -1.53rem;
+    background-size: 200%;
+    background-repeat: no-repeat;
+}
+
+.board-grid{
+    display: grid;
+    height: 2rem;
+    grid-template-columns: repeat(14, 1fr);
+    grid-template-rows: 2rem;
+}
+
+.bj-grid{
+    display: grid;
+    height: 2rem;
+    grid-template-columns: repeat(15, 1fr);
+    grid-template-rows: 1rem;
+}
+
+.board-item{
+    border: 0.01rem solid rgba(0, 0, 0, 0);
+    width: 2rem;
+    height: 2rem;
+}
+.bj-item{
+    border: 0.01rem solid black;
+    border-bottom: none;
+    border-right: none;
+    width: 2rem;
+    height: 2rem;
+}
+.bj-bottom{
+    border-bottom: 0.01rem solid black;
+}
+.bj-right{
+    border-right: 0.01rem solid black;
+}
+.bj{
+    position: absolute;
+    z-index: -1;
+}
+.board{
+    position: absolute;
+    left: 1rem;
+    top: 1rem;
+}
+
+.xline{
+    position: relative;
+    top: -1.6rem;
+    left: -0.3rem;
+}
+
+.yline{
+    position: relative;
+    top: -0.9rem;
+    left: -2.3rem;
+    width: 2rem;
+    display: inline-block;
+    text-align: right;
+}

src/views/Checkerboard.js

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import './Checkerboard.css'
+import tableData from './CheckerboardData'
+const bgline = [
+  ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
+  ["x", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n"],
+];
+const Checkerboard = function () {
+  const [table, updateTable] = useState(tableData)
+  const [userFlag, setUserFlag] = useState(0)
+  const goBangTouchEvent = function (x, y, value) {
+    if (value === 0) {
+      table[x][y] = userFlag
+      updateTable({ ...table })
+      switch (userFlag) {
+        case 1: setUserFlag(2); break;
+        case 2: setUserFlag(1); break;
+        default: setUserFlag(0)
+      }
+    } else {
+      console.log("此处已经落子了")
+    }
+  }
+  return (
+    <div className='center'>
+      <div className='checkerboard'>
+        <div className='board' >
+          {Object.keys(table).map((x) => {
+            return (
+              <div key={x} className='board-grid'>
+                {table[x].map((value, y) => {
+                  return (
+                    <div
+                      onClick={() => {
+                        goBangTouchEvent(x, y, value)
+                      }}
+                      onTouchEnd={()=>{
+                        goBangTouchEvent(x, y, value)
+                      }}
+                      className={(() => {
+                        switch (value) {
+                          case 0: return 'board-item'
+                          case 1: return 'black board-item'
+                          case 2: return 'white board-item'
+                          default: return 'board-item'
+                        }
+                      })()}
+                      key={y}
+                    //style={{border:'1px solid red'}}
+                    >
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+        <div className='bj' >
+          {(() => {
+            const ret = bgline[0].map((x) => {
+              return (
+                <div key={x} className='bj-grid'>
+                  {
+                    bgline[1].map((y) => {
+                      return (
+                        <div key={y} className={(() => {
+                          let ret = 'bj-item'
+                          if (x === '14') {
+                            ret += ' bj-bottom'
+                          }
+                          if (y === 'n') {
+                            ret += ' bj-right'
+                          }
+                          return ret
+                        })()}>
+                          {x === '0' && y !== 'x' ? <span className='xline'>{y}</span> : ''}
+                          {y === 'x' && x !== '0' ? <span className='yline'>{x}</span> : ''}
+                        </div>
+                      )
+                    })
+                  }
+                </div>
+              )
+            })
+            return ret
+          })()}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default Checkerboard

src/views/CheckerboardData.js

@@ -0,0 +1,227 @@
+const tableData = {
+    a: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    b: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    c: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    d: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    e: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    f: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    g: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    h: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    i: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    j: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    k: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    l: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    m: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ],
+    n: [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ]
+}
+export default tableData