Code game caro đơn giản, đánh với BOT

<div class="box caro-game">
<div id="caro-board" class="board">
<div id="win-line"></div>
</div>
<p id="game-status">
Lượt bạn: <b>X</b>
</p>
<button type="submit" id="reset-game">Chơi lại</button>
</div>

<style>
.caro-game {
text-align: center;
font-family: Arial;
}

.board {
display: grid;
grid-template-columns: repeat(11, 32px);
grid-template-rows: repeat(11, 32px);
gap: 1px;
justify-content: center;
position: relative;
}

.cell {
width: 32px;
height: 32px;
font-size: 20px;
text-align: center;
line-height: 32px;
background: #f9f9f9;
border: 1px solid #ccc;
cursor: pointer;
}

#win-line {
position: absolute;
background: red;
height: 4px;
transform-origin: left center;
z-index: 10;
display: none;
}

.X {
color: #1a73e8;
font-weight: bold;
}

.O {
color: #e53935;
font-weight: bold;
}

#reset-game {
margin-top: 10px;
padding: 8px 16px;
background: #ffca28;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
</style>

<script>
const S=11,c=[],b=document.getElementById("caro-board");let g=!1;const t=document.getElementById("game-status"),m=[0,10,100,1e3,1e4,1e5],d=[[1,0],[0,1],[1,1],[1,-1]];function q(){b.innerHTML='<div id="win-line"></div>',g=!1;for(let y=0;y<S;y++){c[y]=[];for(let x=0;x<S;x++){const e=document.createElement("div");e.className="cell",e.addEventListener("click",()=>n(x,y)),b.appendChild(e),c[y][x]=e}}t.innerHTML="Lượt bạn: <strong>X</strong>",document.getElementById("win-line").style.display="none"}function n(x,y){if(g||c[y][x].textContent)return;l(x,y,"X");if(u(x,y,"X"))return r("Bạn thắng!");r("BOT đang nghĩ..."),setTimeout(f,500)}function f(){let e={score:-1};for(let y=0;y<S;y++)for(let x=0;x<S;x++){if(c[y][x].textContent)continue;const s=Math.max(p(x,y,"O")*1.1,p(x,y,"X"));s>e.score&&(e={x,y,score:s})}e&&l(e.x,e.y,"O"),u(e.x,e.y,"O")?r("BOT thắng!"):r("Lượt bạn: <strong>X</strong>")}function p(x,y,P){return d.reduce((s,[dx,dy])=>{let a=h(x,y,dx,dy,P)+h(x,y,-dx,-dy,P)+1;return s+(m[Math.min(a,5)]||0)},0)}function h(x,y,dx,dy,P){let s=0;for(let i=1;i<5;i++){let nx=x+dx*i,ny=y+dy*i;if(nx<0||ny<0||nx>=S||ny>=S)break;if(c[ny][nx].textContent===P)s++;else break}return s}function u(x,y,P){for(let[dx,dy]of d){let c1=h(x,y,dx,dy,P),c2=h(x,y,-dx,-dy,P);if(c1+c2+1>=5){const x1=x-dx*c2,y1=y-dy*c2,x2=x+dx*c1,y2=y+dy*c1;return w(x1,y1,x2,y2),!0}}return!1}function l(x,y,P){c[y][x].textContent=P,c[y][x].classList.add(P)}function r(s){t.innerHTML=`<strong>${s}</strong>`,s.includes("thắng")&&(g=!0)}function w(x1,y1,x2,y2){const l=document.getElementById("win-line"),s=33,sx=x1*s+16,sy=y1*s+16,ex=x2*s+16,ey=y2*s+16,len=Math.hypot(ex-sx,ey-sy),ang=Math.atan2(ey-sy,ex-sx)*180/Math.PI;l.style.left=sx+"px",l.style.top=sy+"px",l.style.width=len+"px",l.style.transform=`rotate(${ang}deg)`,l.style.display="block"}document.getElementById("reset-game").onclick=q,q();
</script>