How I built a Space Shooter Game using only HTML and Javascript?

How I built a Space Shooter Game using only HTML and Javascript?

Introduction

I built a space recently. I use only VanillaJs for making the game. The overall game also consists of a 2nd website, where you can create your plating account, buy skins for ships and see the scoreboard for all the players playing the game. This secondary website is made using ReactJs. But as far as only the game is concerned it is made only with VanillaJS.

You can check out the game here: https://space-shooter-home.vercel.app/

Github code is present here: https://github.com/yashnirmal/space-shooter (Star the GitHub repo if you like it)

Purpose of this blog

In this blog, I will share with you how I made the game, techstack that I used, basic structure of the game, and the resources that I used for it. If you want more details on the day-by-day progress of the game, I have shared that in my tweet, you can see those here: https://twitter.com/YashNirmal42/status/1622621639421874178

Let's start

  1. Structure of the project

    The project is divided into 3 main parts.

    A) Frontend: Game website and Helper website

    B) Backend

    You can that in the following image also

  2. TechStack

    I used different frameworks and libraries for different parts of the project, but one thing is common between all of them: Javascript. All of them use javascript.

    A) Game (Frontend) : VanillaJS

    For the game website, I used HTML and lots of Javascript. I started making the game as a simple JS game but in the process added lots of features. For one of the features of login and fetching skins that Players have bought, I have to use some kind of bundler, so I ended up using Webpack.

    B) Helper website(Frontend) : ReactJs

    For this website, I used ReactJs since I was very familiar with it and I have been using it for a year now.

    C) Backend

    I made the backend using NodeJs and ExpressJs. I used MongoDB use the database to store user data and spaceship skins. For the payment gateway, I choose stripe.

    There are many npm packages that I used in the backend like jsonwebtoken, bcryptjs, stripe, nodemon, dotenv, cors, etc.

  3. Resources

    The main resource I used to learn how to make games using JS is a Freecodecamp course in this: https://youtube.com/watch?v=GFO_txvwK_c&feature=shares

    For using Stripe JS: I mainly use stripe documentation and a few other random youtube videos.

If you have any other questions, you can ask me in the comments. Also, I share my build in public journey on Twitter(https://twitter.com/YashNirmal42) so you can follow me there.

Did you find this article valuable?

Support Yash Nirmal by becoming a sponsor. Any amount is appreciated!