DeveloperBreeze

Tutorials Programming Tutorials, Guides & Best Practices

Explore 149+ expertly crafted tutorials tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Build a Multiplayer Game with Python and WebSockets

Tutorial December 10, 2024
python 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiplayer Tic-Tac-Toe</title>
    <style>
        .board { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 5px; }
        .cell { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 24px; border: 1px solid #000; }
    </style>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <div class="board">
        <div class="cell" id="cell-0"></div>
        <div class="cell" id="cell-1"></div>
        <div class="cell" id="cell-2"></div>
        <div class="cell" id="cell-3"></div>
        <div class="cell" id="cell-4"></div>
        <div class="cell" id="cell-5"></div>
        <div class="cell" id="cell-6"></div>
        <div class="cell" id="cell-7"></div>
        <div class="cell" id="cell-8"></div>
    </div>
    <script>
        const ws = new WebSocket("ws://localhost:8765");
        const cells = document.querySelectorAll(".cell");

        ws.onmessage = function(event) {
            const data = JSON.parse(event.data);
            const board = data.board;
            const status = data.status;

            board.forEach((mark, i) => {
                cells[i].textContent = mark;
            });

            if (status !== "Next turn") {
                alert(status);
            }
        };

        cells.forEach((cell, index) => {
            cell.onclick = () => {
                ws.send(JSON.stringify({ move: index }));
            };
        });
    </script>
</body>
</html>
   python websocket_server.py

Read More