File size: 3,434 Bytes
2ecf7d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!DOCTYPE html>
<html>
<head>
<title>Checkers</title>
<style>
body { font-family: Arial; text-align: center; }
#board { display: grid; grid-template: repeat(8, 60px) / repeat(8, 60px); margin: auto; }
.cell { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.black { background: #769656; }
.white { background: #EEEED2; }
.piece { width: 40px; height: 40px; border-radius: 50%; }
.r { background: red; }
.b { background: black; }
.R, .B { border: 2px solid gold; }
</style>
</head>
<body>
<h1>Checkers</h1>
<input id="nameInput" placeholder="Enter name" />
<button onclick="setName()">Join</button>
<h2 id="status"></h2>
<div id="board"></div>
<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
<script>
const socket = io("http://localhost:5000");
let myColor = null, board = [], selected = null;
socket.on("connect", () => console.log("Connected"));
function setName() {
const name = document.getElementById("nameInput").value;
socket.emit("set_name", { name });
}
socket.on("match_found", ({ color, opponent }) => {
myColor = color;
document.getElementById("status").innerText = `You are ${color}, playing vs ${opponent}`;
fetch("/state")
.then(res => res.json())
.then(data => { board = data.board; render(); });
});
socket.on("opponent_move", move => {
applyMove(move);
render();
});
socket.on("multi_jump", ({ from }) => {
selected = from;
});
socket.on("game_over", ({ winner }) => alert(`${winner} wins!`));
socket.on("opponent_disconnected", () => alert("Opponent disconnected."));
function render() {
const boardDiv = document.getElementById("board");
boardDiv.innerHTML = "";
for (let r = 0; r < 8; r++) {
for (let c = 0; c < 8; c++) {
const div = document.createElement("div");
div.className = `cell ${(r + c) % 2 ? "black" : "white"}`;
div.onclick = () => handleClick(r, c);
const piece = board[r][c];
if (piece) {
const p = document.createElement("div");
p.className = `piece ${piece}`;
div.appendChild(p);
}
boardDiv.appendChild(div);
}
}
}
function handleClick(r, c) {
const piece = board[r][c];
if (selected) {
socket.emit("move", {
from: selected,
to: [r, c],
captured: null
});
selected = null;
} else if (piece && piece[0] === myColor[0]) {
selected = [r, c];
}
}
function applyMove({ from, to, captured }) {
const [fr, fc] = from, [tr, tc] = to;
board[tr][tc] = board[fr][fc];
board[fr][fc] = null;
if (captured) {
const [cr, cc] = captured;
board[cr][cc] = null;
}
}
</script>
</body>
</html> |