“Save the Earth” game using Javascript

3 Step Guide to Create a simple game Only Using HTML, CSS, and Javascript.

Nirmani warakaulla
Javarevisited
3 min readDec 2, 2021

--

Many people disparage video games as being unsophisticated or the province of couch potatoes, but did you realize that many common components of these virtual worlds may bring significant benefits in real life? The following are some of the advantages of video games for both youngsters and adults:

· Brain stimulation for good health

· Improvement of problem-solving abilities

· Stress reduction

When it comes to video games, you either win or keep trying, learning from your mistakes as you go until you attain the objective. As a result, some academics and educators say that video games may educate people to be more confident and to work towards their objectives, with each failure viewed as a new learning opportunity.

Depending on the sort of game you want to build, JavaScript is an excellent language for game creation. JavaScript is ideally suited to web-based and mobile games. Using platforms and tools may aid in the creation of both 2D and 3D games that can be played straight in your browser.

Have you ever wondered we can code games using programming languages!!! So let’s go…

I wanted to see how easy it is to create this game for players only using basic HTML, CSS, and JavaScript.

So, in this article, I will show you how you can create it following 3 steps.

In this game, I came up with the concept that aliens are coming from other planets to invade our earth.

They come in their alien spacecraft. When they arrive we have can use a laser gun to shoot.

Destroying one spacecraft earns one point each.

If even one spacecraft lands and hits the ground, the game is over.

Then you can compete from the beginning again. The use of the laser gun is entirely through the mouse.

Step 01:

Create an index.html file and write the code below.

https://www.java67.com/2020/08/5-best-online-courses-to-learn-html-5.html

Step 02:

Create a style.css file to style your design and write the code below.

Step 03:

Create a script.js file and write the code below.

Make Sure, all of the images and CSS files link perfectly.

Here you can download the image for the sky background.

sky.png

Here you can download the image for the component (the Earth, laser gun, laser shot, spacecraft, START button, RESTART button).

component.png

Here you can download the image for the pointer.

pointer.png

Here you can download the image for the full-screen.

full-screen.png

Conclusion

We strongly like to play online games because there are so many advantages instead of disadvantages to playing online games. For this reason, I have presented to you how to create a very interesting computer game called “Save the Earth” that can be built from HTML, CSS, and javascript.

Hope you found this helpful. Do reach out to me if you have any trouble implementing this or if you need any help.

--

--

Nirmani warakaulla
Javarevisited

Experienced UI/UX engineer deeply committed to creating impactful solutions through innovative design.