thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2024-09-29 06:06:37 +00:00
Code

Implement base of tic tac toe game

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-03 14:07:13 +02:00
parent ad265f4011
commit 5ccbdb3194
3 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client.mts
View File

@ -2,6 +2,44 @@ const ws = new WebSocket("ws://localhost:1234");
ws.onopen = (e) => { ws.onopen = (e) => {
console.log("connected to server"); console.log("connected to server");
ws.send("hello");
const canvas = document.getElementById("game") as HTMLCanvasElement | null;
if (canvas) {
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null;
if (ctx) {
drawGrid(ctx);
canvas.addEventListener("click", (evt: any) => {
const {clientX, clientY} = evt;
const x = Math.floor(clientX / 90);
const y = Math.floor(clientY / 90);
if (x < 3 && y < 3) {
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillStyle = "red";
ctx.fillRect(rx, ry, 90, 90);
ws.send(JSON.stringify({x, y}));
}
});
}
}
}; };
ws.onmessage = (evt) => {
console.log(evt.data);
};
function drawGrid(ctx: CanvasRenderingContext2D){
for (let y = 0; y < 3; ++y) {
for (let x = 0; x < 3; ++x) {
ctx.fillStyle = "green";
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillRect(rx, ry, 90, 90);
}
}
}

4
index.html
View File

@ -3,6 +3,8 @@
<head> <head>
<title>Hello websockets</title> <title>Hello websockets</title>
</head> </head>
<body></body> <body>
<canvas id="game" width=800 height=600></canvas>
</body>
<script type="module" src="client.mjs"></script> <script type="module" src="client.mjs"></script>
</html> </html>

18
server.mts
View File

@ -5,13 +5,27 @@ const wss = new WebSocketServer({ port });
console.log(`waiting for connection on ws://localhost:${port}`); console.log(`waiting for connection on ws://localhost:${port}`);
let id = -1;
let clients = [];
wss.on("connection", (ws, req) => { wss.on("connection", (ws, req) => {
console.log(`${req.socket.remoteAddress} connected`); id += 1;
if (id > 1) {
throw new Error("too many players");
}
clients.push(ws);
ws.send("bonjour" + id);
console.log(`player #${id} connected`);
ws.addEventListener("message", (event: any) => { ws.addEventListener("message", (event: any) => {
//const message = JSON.parse(event.data.toString());
const message = event.data.toString(); const message = event.data.toString();
console.log(`message from client : ${message}`); console.log(`message from client : ${message}`);
if (id == 0) {
clients[1].send("coucou");
} else {
clients[0].send("coucou");
}
}); });
}); });