马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
前几天，我做了个井字棋，今天正好发一下。
（小插曲：由于我不能上传zip文件，为了大家，我把图片换成了SVG……）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>井字棋</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
h1 {
font-size: 50px;
}
p {
margin-bottom: 50px;
}
#main td {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 50px;
}
#main td svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
}
#p1,
#p2,
#draw {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
display: none;
}
</style>
</head>
<body>
<h1>井字棋</h1>
<p>By Ckblt</p>
<table id="main">
<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>
<h1 id="draw">Draw!</h1>
<h1 id="p1">P1 Wins!</h1>
<h1 id="p2">P2 Wins!</h1>
<script>
const STATE = {
NULL: 0,
P1: 1,
P2: 2
}
const ticTacToe = [
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL,
STATE.NULL
]
const elem = document.getElementById('main')
let player = 1
let win = null
const render = () => {
elem.querySelectorAll('td').forEach((e, i) => {
switch (ticTacToe[i]) {
case STATE.NULL:
e.innerHTML = ''
break
case STATE.P1:
e.innerHTML =
'<svg t="1643371128605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2199" width="200" height="200"><path d="M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578" p-id="2200"></path></svg>' // ???
break
case STATE.P2:
e.innerHTML =
'<svg t="1643371178726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3050" width="200" height="200"><path d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z" p-id="3051"></path></svg>' // ?????
break
default:
break
}
})
}
const judge = () => {
console.log(ticTacToe)
if (
(ticTacToe[0] === STATE.P1 &&
ticTacToe[1] === STATE.P1 &&
ticTacToe[2] === STATE.P1) ||
(ticTacToe[3] === STATE.P1 &&
ticTacToe[4] === STATE.P1 &&
ticTacToe[5] === STATE.P1) ||
(ticTacToe[6] === STATE.P1 &&
ticTacToe[7] === STATE.P1 &&
ticTacToe[8] === STATE.P1) ||
//
(ticTacToe[0] === STATE.P1 &&
ticTacToe[3] === STATE.P1 &&
ticTacToe[6] === STATE.P1) ||
(ticTacToe[1] === STATE.P1 &&
ticTacToe[4] === STATE.P1 &&
ticTacToe[7] === STATE.P1) ||
(ticTacToe[2] === STATE.P1 &&
ticTacToe[5] === STATE.P1 &&
ticTacToe[8] === STATE.P1) ||
//
(ticTacToe[0] === STATE.P1 &&
ticTacToe[4] === STATE.P1 &&
ticTacToe[8] === STATE.P1) ||
(ticTacToe[2] === STATE.P1 &&
ticTacToe[4] === STATE.P1 &&
ticTacToe[6] === STATE.P1)
)
win = 1
else if (
(ticTacToe[0] === STATE.P2 &&
ticTacToe[1] === STATE.P2 &&
ticTacToe[2] === STATE.P2) ||
(ticTacToe[3] === STATE.P2 &&
ticTacToe[4] === STATE.P2 &&
ticTacToe[5] === STATE.P2) ||
(ticTacToe[6] === STATE.P2 &&
ticTacToe[7] === STATE.P2 &&
ticTacToe[8] === STATE.P2) ||
//
(ticTacToe[0] === STATE.P2 &&
ticTacToe[3] === STATE.P2 &&
ticTacToe[6] === STATE.P2) ||
(ticTacToe[1] === STATE.P2 &&
ticTacToe[4] === STATE.P2 &&
ticTacToe[7] === STATE.P2) ||
(ticTacToe[2] === STATE.P2 &&
ticTacToe[5] === STATE.P2 &&
ticTacToe[8] === STATE.P2) ||
//
(ticTacToe[0] === STATE.P2 &&
ticTacToe[4] === STATE.P2 &&
ticTacToe[8] === STATE.P2) ||
(ticTacToe[2] === STATE.P2 &&
ticTacToe[4] === STATE.P2 &&
ticTacToe[6] === STATE.P2)
)
win = 2
else if (
ticTacToe[0] !== 0 &&
ticTacToe[1] !== 0 &&
ticTacToe[2] !== 0 &&
ticTacToe[3] !== 0 &&
ticTacToe[4] !== 0 &&
ticTacToe[5] !== 0 &&
ticTacToe[6] !== 0 &&
ticTacToe[7] !== 0 &&
ticTacToe[8] !== 0
)
win = 0
switch (win) {
case 0:
elem.style.opacity = '0.5'
document.getElementById('draw').style.display = 'block'
break
case 1:
elem.style.opacity = '0.5'
document.getElementById('p1').style.display = 'block'
break
case 2:
elem.style.opacity = '0.5'
document.getElementById('p2').style.display = 'block'
break
default:
break
}
}
render()
elem.querySelectorAll('td').forEach((e, i) => {
e.addEventListener('click', () => {
if (win === null && ticTacToe[i] === STATE.NULL) {
ticTacToe[i] = player
player === 1 ? (player = 2) : (player = 1)
render()
judge()
}
})
})
</script>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-1-28 20:06:21
置顶卡
千斤顶
显身卡
楼主
发表于 2022-2-7 20:08:10