https://github.com/webceyhan/multiplay-snake-game
Multiplay Snake Game using Vue + Websockets
https://github.com/webceyhan/multiplay-snake-game
bootstrap css express game html javascript nodejs vite vue websocket
Last synced: 3 months ago
JSON representation
Multiplay Snake Game using Vue + Websockets
- Host: GitHub
- URL: https://github.com/webceyhan/multiplay-snake-game
- Owner: webceyhan
- License: mit
- Created: 2022-02-08T19:22:01.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T17:51:25.000Z (about 2 years ago)
- Last Synced: 2024-05-28T21:08:04.182Z (about 2 years ago)
- Topics: bootstrap, css, express, game, html, javascript, nodejs, vite, vue, websocket
- Language: JavaScript
- Homepage: https://multiplay-snake-game.onrender.com/
- Size: 179 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/webceyhan/multiplay-snake-game/actions/workflows/github-code-scanning/codeql)
# Vite Multiplay Snake Game
This is a multiplay version of famous Snake Game to demonstrate how to utilize websockets for full duplex communication.
It consists of a backend server and a frontend application.
Backend server was implemented using ExpressJs to serve the compiled frontend app as static content. And the WebSocket Server starts listening to the same port to respond socket messages.
Frontend application is built with Vite + Vue 3 + Bootstrap. Client is automatically connected to the server using standart WebSocket API the on initial request, then awaiting user to enter his name and joing the channel.
## Requirements
You need to install the [Node.js](https://nodejs.dev/)
and `npm` package manager first.
> Recommended IDE:
> [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
## Installation
1. Clone the repository.
```sh
git clone https://github.com/webceyhan/multiplay-snake-game.git
```
2. Get inside the cloned project folder.
```sh
cd multiplay-snake-game
```
3. Install NPM packages.
```sh
npm install
```
## Usage
You can use following commands to do various task with the project.
```sh
npm start # run application
npm run dev # start watching backend & frontend concurrently
npm run dev:backend # start nodemon to watch backend app
npm run dev:frontend # start vite to watch frontend app
npm run build # build for production
npm run preview # preview built app
```
> Take a look at the other scripts in [`package.json`](./package.json)
## Development
You have to run both backend server and frontend development server concurrently to be able to develop application properly.
```sh
npm run dev
```
## Building
Build the frontend application for production.
```sh
npm run build
```
To preview, you still have to run the backend server which will serve the app and provide socket connectivity in order to make it work properly.
```sh
npm run preview
```
## Deployment (Render)
Project is linked to [Render](https://render.com/) for deployment.
> It will automatically deploy the project to Render on every push.
## References
- [Node.js](https://nodejs.dev/)
- [Vite](https://vitejs.dev/)
- [Vue.js](https://vuejs.org/)
- [Bootstrap](https://getbootstrap.com)
- [Express](https://expressjs.com/)
- [WebSocket (WS)](https://github.com/websockets/ws)