Skip to content

tjtanjin/spaceships_web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SpaceShips Web

Table of Contents

Introduction

SpaceShips Web is a self-initiated project building on one of my very first coding project SpaceShips (2018). This project involves recoding the original SpaceShips project done in python to javascript so as to bring the entire game online. Currently, the game is live on spaceships.tjtanjin.com.

A backend project was also done separately using nodejs to incorporate a leaderboard so as to add some competitiveness to the game. For work pertaining to the leaderboard, please refer to the API repository.

Features

The web edition of SpaceShips retains all the old features of the original project with tweaks to player/enemy stats for game balance reasons. Apart from being playable online now, the game also offers support for both PC and mobile devices! In addition, leaderboards have been added to allow for competitive players to pit themselves against each other! The game currently supports 2 main modes:

  • Single player
  • Two player

Note: Leaderboards for both modes are calculated separately so you need not worry about losing out should you be playing this game alone!

Technologies

Technologies used by SpaceShips Web are as below:

Done with:

HTML

CSS

JavaScript

Project Repository

Setup

The following section will guide you through setting up your own SpaceShips Web edition!

  • First, cd to the directory of where you wish to store the project and clone this repository. An example is provided below:
$ cd /home/user/exampleuser/projects/
$ git clone https://github.com/tjtanjin/spaceships_web.git
  • Following which, extract res.tgz which contains the images and audio files for the project. You may remove res.tgz after that.
  • This step is optional. If you wish to have your own leaderboard set up as well, you will need to modify the config.js file inside the js folder of the project and replace the 2 endpoints with your own. A separate setup for the API endpoint of the leaderboard can be found in the backend project here.
  • Once the above steps are complete, clicking on index.html will launch the game window which allows you to run the game locally.

Deployment

Docker

This section assumes you are familiar with docker. If you are unfamiliar with docker, it is recommended you go through a quick tutorial for it first. This section will not dive into the details of docker usage.

  1. If you using the project as it is (i.e. no intended code changes), then simply pull the latest image from dockerhub and run the container as follows:
    $ docker pull tjtanjin/spaceships_web:master
    $ docker run -d -p 80:80 --name spaceships_web tjtanjin/spaceships_web:master --restart always
    
    Note that the default image uses my leaderboard endpoints. To use your own endpoints, you will have to update the 2 endpoint variables in the Dockerfile. If you wish to make changes to the project, then please read on. Otherwise, launch away!
  2. Once you are done with your code changes, you would have to build your own docker image with the following command (take note to replace the tag -t with that of your own):
    $ docker build -t tjtanjin/spaceships_web .
    
  3. Upon obtaining your image, you may then start your container with the following command (remember to replace image name below if you built your own image):
    $ docker run -d -p 80:80 --name spaceships_web tjtanjin/spaceships_web:master
    
    With that, you now have your own container for the spaceships game running on port 80 of your localhost!

Note: To expose the application publicly, you will still need to serve it over a web server/proxy. Refer to the Manual section if you would like more details.

Manual

A guide utilizing this spaceships project as an example can be found here.

Team

Contributing

If you have code to contribute to the project, open a pull request and describe clearly the changes and what they are intended to do (enhancement, bug fixes etc). Alternatively, you may simply raise bugs or suggestions by opening an issue.

Others

For any questions regarding the implementation of the project, please drop an email to: [email protected].