{"id":21000571,"url":"https://github.com/aaayyuusshh/dots-and-boxes","last_synced_at":"2025-06-24T09:33:38.831Z","repository":{"id":211553295,"uuid":"563753434","full_name":"aaayyuusshh/dots-and-boxes","owner":"aaayyuusshh","description":"Client/Server multiplayer implementation of the dots and boxes game 🚀","archived":false,"fork":false,"pushed_at":"2024-08-04T06:02:52.000Z","size":2480,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T19:05:01.559Z","etag":null,"topics":["multiplayer-browser-game","websockets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaayyuusshh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-09T09:06:03.000Z","updated_at":"2024-12-02T06:41:49.000Z","dependencies_parsed_at":"2023-12-09T10:26:02.913Z","dependency_job_id":"1ade7f30-f4dd-401d-b67c-bd16289de43c","html_url":"https://github.com/aaayyuusshh/dots-and-boxes","commit_stats":null,"previous_names":["aaayyuusshh/dots-and-boxes"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaayyuusshh/dots-and-boxes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaayyuusshh%2Fdots-and-boxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaayyuusshh%2Fdots-and-boxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaayyuusshh%2Fdots-and-boxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaayyuusshh%2Fdots-and-boxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaayyuusshh","download_url":"https://codeload.github.com/aaayyuusshh/dots-and-boxes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaayyuusshh%2Fdots-and-boxes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261643544,"owners_count":23188892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multiplayer-browser-game","websockets"],"created_at":"2024-11-19T08:11:24.686Z","updated_at":"2025-06-24T09:33:38.796Z","avatar_url":"https://github.com/aaayyuusshh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dots \u0026 Boxes Multiplayer Game\n\n## Overview\n\ndots-and-boxes is an online multiplayer implementation of the classic Dots and Boxes game. This project brings the traditional paper-and-pencil game to the digital world, enabling users to play with up to three players in real-time. The game leverages web sockets for seamless communication between players, ensuring an engaging and low-latency multiplayer experience.\n\n## Screenshots\n\u003cimg width=\"1434\" alt=\"Screen Shot 2024-01-16 at 10 50 49 PM\" src=\"https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/b82b1729-3e6c-4f81-996c-1f1b3b5a8e14\"\u003e\n\n\n**Waiting for players:**\n\u003cimg width=\"1438\" alt=\"Screenshot 2024-05-30 at 6 06 39 AM\" src=\"https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/2c316c57-a46f-4380-a442-e2c414798c86\"\u003e\n\n**Game screen of one client:**\n\u003cimg width=\"1438\" alt=\"Screenshot 2024-05-30 at 6 08 52 AM\" src=\"https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/3adf6c45-b38f-4a89-975e-4aabd5650d06\"\u003e\n\n**Gameplay with 3 clients:**\n![Screenshot 2024-05-30 at 6 14 06 AM](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/46c4ebd9-8889-44cf-81ea-0a1003e3c403)\n\n## Technologies Used\n\n- **Frontend:** HTML, CSS, JavaScript\n- **Backend:** Node.js, Express.js, Socket.io\n- **Database:** MongoDB\n\n## Game Logic and Architecture\n\n### 1. Frontend (`main.js`) \n- **Game Initialization:**\n  - The game starts by initializing the game board and necessary variables.\n  - Cells are represented using the `cell` class defined in `cell.js`.\n    \n- **Game Loop:**\n  * The `runGameLoop` function runs continuously, updating the game state and rendering changes on the canvas.\n- **Event Listeners:**\n  - Event listeners are added to the canvas for mouse movements and clicks to detect player actions.\n  - Socket.io is used to emit and receive events related to game moves and turns.\n\n- **Highlighting and Moves:**\n  - Cells are highlighted based on mouse movements, indicating potential moves.\n  - Players can click to make moves, and the game logic processes and updates the board accordingly.\n\n- **Scoring and Game Over:**\n  - Scores are tracked for each player based on the number of squares formed.\n  - The game ends when all possible squares are formed, and a modal displays the winner and scores.\n\n### 2. Backend (`server.js`)\n\n- **Server Initialization:**\n  - The server is set up using Node.js and Socket.io to handle real-time communication.\n  - The server manages game rooms, tracks player turns, and facilitates interactions between clients.\n\n- **Room Creation and Joining:**\n  - Players can create a new game, generating a unique room code.\n  - Existing games are joined by entering the room code.\n\n- **Turn Switching:**\n  - Turns are managed on the server, ensuring synchronized gameplay.\n  - Players take turns, and the server emits events to activate and deactivate event listeners accordingly.\n\n- **Real-time Communication:**\n  - Socket.io is employed for real-time communication between clients and the server.\n  - Events such as moves, highlights, and turn switches are broadcasted to all players in the same room.\n\n## How to Play\n\n1. **Create a New Game:**\n   - Click the \"Create Game\" button on the landing page.\n   - Share the generated game code with others to join.\n\n2. **Join an Existing Game:**\n   - Enter the provided game code on the landing page and click \"Join.\"\n\n3. **Gameplay:**\n   - Players take turns making moves to form squares.\n   - Highlighting and moves made from one player is transmitted to other players through web sockets.\n   - Scores are updated based on the number of squares claimed.\n\n## Miscellaneous Planning\n\n![dots-and-boxes-1](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/169a05fb-494c-4320-9c72-6600a220b78e)\n\n![dots-and-boxes-2](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/23aa2e3e-68a7-457e-95e3-3a11c124b972)\n\n![dots-and-boxes-3](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/30d12c2e-1f6f-4d88-9c21-d6c160f7f000)\n\n![dots-and-boxes-4](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/4e76c1bd-9dae-49a4-a6e3-f344c8f1daf3)\n\n![dots-and-boxes-5](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/197e29a1-3cdb-4742-bd37-24c606d3e77e)\n\n![dots-and-boxes-6](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/fe0b3dbc-6da7-40e6-80a3-967bc30eba53)\n\n![dots-and-boxes-7](https://github.com/aaayyuusshh/dots-and-boxes/assets/80851741/c04b0775-7bda-4c70-82f0-655d0802a92f)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaayyuusshh%2Fdots-and-boxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaayyuusshh%2Fdots-and-boxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaayyuusshh%2Fdots-and-boxes/lists"}