Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/whispernet/multiplayer-game-with-js

This multiplayer game project was a fantastic learning experience, focusing on socket programming, server-client architecture, and multi-user environments. It features real-time player movement, collision detection, and a leaderboard.
https://github.com/whispernet/multiplayer-game-with-js

canvas express javascript node-js socket-io

Last synced: about 1 month ago
JSON representation

This multiplayer game project was a fantastic learning experience, focusing on socket programming, server-client architecture, and multi-user environments. It features real-time player movement, collision detection, and a leaderboard.

Awesome Lists containing this project

README

        

# Multiplayer Game with JS

Welcome to my multiplayer game project repository! This project was a significant learning experience where I explored socket programming, server-client architecture, and multi-user environments. You can view a demo of this game [here](https://youtu.be/v28cxluJgAk) .
![image](https://github.com/WhisperNet/multiplayer-game-with-js/assets/83389896/bb7fda96-378e-403a-9db5-4d94121abdef)

## Table of Contents

- [Introduction](#introduction)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Lessons Learned](#lessons-learned)

## Introduction

This project is a multiplayer game developed from scratch. It covers various aspects of game development, from setting up the game to adding unique player attributes, implementing player movement, handling projectiles and collisions, creating a leaderboard, and more. The project culminates in pushing the game live and setting up a domain name.

## Features

- **Player Connection and Disconnection**: Manages multiple players connecting and disconnecting seamlessly.
- **Unique Attributes and Usernames**: Assigns unique attributes and usernames to each player.
- **Real-time Player Movement**: Implements smooth player movement and interactions.
- **Projectiles and Collision Detection**: Handles shooting projectiles and detecting collisions.
- **Leaderboard**: Displays a leaderboard to track player scores.

## Technologies Used

- **HTML5**: For structuring the game interface.
- **CSS3**: For styling the game elements.
- **JavaScript**: For game logic and client-side interactions.
- **Node.js**: For the server-side logic.
- **Socket.IO**: For real-time communication between the server and clients.

## Installation

To run this project locally, follow these steps:

1. **Clone the repository**:
```sh
git clone https://github.com/whispernet/multiplayer-game-with-js.git
```

2. **Navigate to the project directory**:
```sh
cd multiplayer-game-with-js
```

3. **Install dependencies**:
```sh
npm install
```

4. **Start the server**:
```sh
node backend.js
```

5. **Open your browser and navigate to**:
```
http://localhost:3000
```

## Lessons Learned

Throughout this project, I gained valuable insights into:

- **Socket Programming**: Learned how to use Socket.IO for real-time communication.
- **Server-Client Architecture**: Understood how servers and clients interact in a multi-user environment.
- **Game Logic**: Developed logic for player movement, collisions, and score tracking.
- **Project Deployment**: Learned how to deploy a project live and set up a custom domain.
- **Enhanced Interpolation**: Improved the smoothness and responsiveness of gameplay.

---