How I Build Intergalactic War Game In Pure JavaScript

Hi, Do you know that about 1 month ago (to be exact 20 days ago) I made a game? What? You haven't tried it yet? Try playing the game here.

Interesting, right? Actually, the code of this game is quite difficult for me to explain here. Therefore, I will not discuss the code, but only the algorithm.

The Algorithm

Coordinate System

For this game, I used the Cartesian coordinate system that we often learn in school. However, to save variable usage in javascript, I use array (vector) format to store coordinate data. I stored the coordinate data for spaceship in an array called poss and coordinate data for UFO in an array called posu.

Controller

First of all, I created 4 buttons for 4 different movements, left, right, up, and down. This button is useful for moving the spaceship to the left, right, up, and down. To set the position of the spaceship, we can use CSS, with the code:

.spaceship {
  position: absolute;
  left: __px;
  top: __px;
}

With javascript, we can change the value of top and left. I used spaceship.style.left to set the x-coordinate, and spaceship.style.top to set the y-coordinate, and set the speed with setInterval. Okay, I think this is pretty easy. We're done with the spaceship controller.

Shoot

In this game, i use the image from flaticon.com as the bullet.

If we shoot a bullet, logically we know that the initial coordinates of the bullet are the same as the initial coordinates of our body (spaceship). Therefore, when the shot button is pressed, the first command that must be executed by this game is to find out, what are the coordinates of the spaceship. After the spaceship coordinates are known, then set these coordinates as the initial coordinates of the bullet, then fire it with bullet.style.top.

Collision

If the spaceship collides with UFO, then the player's life (spaceship) will be reduced by 25%. Well, as we learned in school (mathematical geometry), 2 objects collide if the coordinates of each object are the same. So if the first object and the second object collide, then it should be x1=x2 and y1=y2 (x1=position x object 1). This is easy. However, there is a slight problem here. This rule applies if the colliding object is a point object (you've studied physics, haven't you?), while our object (spaceship and UFO) is a rigid body. Therefore, we need a little modification. In CSS, we know the concept of CSS box model. Simply put, this concept explains that each element in html is "wrapped" in a box. With this concept, we can modify the previous rule.

xs=x_position of spaceship and xu=y_position of UFO

By paying attention to the graph above, we can modify the condition of the spaceship when it collides with a UFO. A spaceship collides with a UFO if xu<xs+spaceship_width and xu>xs and yu<ys and yu>ys-spaceship_height. We have also managed to solve the issue of the spaceship collides with UFO. This concept also applies to the event of a bullet hitting a UFO.

UFO Movement

If you pay attention to the game, you will know that UFO actually move randomly. To make the UFO move, I use setInterval again, and to make the movement random, I use Math.random.it's easy, right?

How It Works ?

The gameplay is like this :

at first the UFO moves randomly while the spaceship (player) doesn't move. The spaceship will only move if the controller button (right, left, up, down) is pressed. The UFO moves from left to right, and if the UFO has reached the edge of the screen, the UFO will return to the left side. We call this 1 cycle. In each cycle, the UFO will fire 1 bullet at random. If the bullet hits the player, the player's life will be reduced by 25%. Otherwise, the game will continue without reducing the player's life. Players can also fire at UFO. If the bullet hits the UFO, then the player will get a score +1. Every time you reach score which is the multiple of 5, the bullet speed of the UFO will increase and also increasing your chances of losing. Simple, right?

Github Repository

If you want to see the code of this game, please jump in to the github repository below and go to javascriptproject-menu/IntergalacticWar.

fikrinotes / fikrinotes.github.io

Personal Website Of Fikri Mulyana Setiawan

Or, you can also go to this link. Thank you for read this article.

Update

I just updated the game Intergalactic War. now, you can play the game smoothly via smartphone or PC, and I think there are no more bugs.

Comments

[Shikhar]

Ummm.. i played the game as it's link is mentioned in the beginning and I have to say it wasn't fun/playable.

[Fikri Mulyana Setiawan]

do you play it using PC? for now, the controller via the keyboard is not working properly. if you want to continue playing the game using a PC, you can use the virtual buttons I gave on the website (but of course it will be very inconvenient if you have to click 5 buttons using the mouse).

the best way to play my game is through a smartphone and using the virtual keys that I gave. if you play it using a smartphone, I think you will have no more problems.

by the way, thanks for the response.

[Alex Nudelman]

well done !!
I did something similar 3y ago, works on PC not on mobile :)
github.com/nudelx/ReactSpaceInvaders

[Fikri Mulyana Setiawan]

Wow, it build using react ? That's cool
until now i'm still learning how to use react

[kasandrop]

Thi is not playable. You need to spend more days than 20 something at the development of it.. At the moment it is absolute utter rubbish!

[Rochan90]

Not sure if this will help, or if you've already done so, but try taking a look at the way key bindings work in Chrome extensions and maybe you can do something similar?

[Fikri Mulyana Setiawan]

ooh, okay. thanks for the advice