How I Build Intergalactic War Game In Pure JavaScript 
Tags: gamedev, webdev, javascript, beginners
Published: 2021-09-03 07:32:12

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](https://fikrinotes.netlify.app/javascriptproject-menu/intergalacticwar/).

![Game Ilustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o802k7lglof0678c6kij.jpg)

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:

```css
.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.

![bullet image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36vhphhh2p6s3sf9m6nx.png) 

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.

![coordinate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqk35usrmgkmsqgu32ye.png)
<figcaption>xs=x_position of spaceship and xu=y_position of UFO</figcaption>

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`.
{% github fikrinotes/fikrinotes.github.io no-readme%} 

Or, you can also go to this [link](https://github.com/fikrinotes/fikrinotes.github.io/tree/master/Javascriptproject-menu/IntergalacticWar). 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.