How to Develop an Online Game: A Beginner’s Guide

Here’s my experience on how I developed my first online game

A beginner’s guide to creating the first online game from scratch

Back in 2018, I had just concluded my class 10th boards and was impatiently waiting for the results to be announced.

I had plenty of time to spare, and was looking for ways to use it productively before the admissions season began.

I started reading up on algorithms and found the shortest path algorithm quite fascinating and wondered what I could do with it. That’s when I thought, why not repackage this as a game so that I could understand not just the way the algorithm works but also its application in the real world.

Ideation

While most online games are just intended for fun, I thought it would be unusual to create one with the objective of amplifying a broader message.

After a substantial amount of brainstorming and research, I finally found an idea I could work with — a global warming online game based on the carbon footprint. I decided to call it ‘The Footprint Game’.

For the uninitiated, carbon footprint is the total greenhouse gas emissions resulting from an individual’s activity, expressed as its carbon dioxide equivalent. It is one of the major reasons for human induced climate change.

The objective of the game is pretty simple — consume lesser resources, minimize your carbon footprint, save the world!

Having worked on a few smaller projects before, I was hoping to explore a new domain this time and most importantly, learn a new programming language (PHP).

Designing the Game

Before starting with the development phase, the toughest challenge was to design a game board such that it could be reused for multiple combinations of the game.

I drew my inspiration from one of the most frequently played and loved game of all times, i.e., Sudoku — a simple game, yet so powerful.

The board of my game is quite similar to that of the popular game, except that game-makers have the liberty of choosing the dimensions of their game-board and the numbers need not be unique either.

Here’s what the designing phase looked like.

Step 1

Step 2

Step 3

The overall idea was to keep it simple so as to target a larger audience. Also, since it’s a play around numbers and doesn’t require extensive language knowledge, anybody can attempt it.

The rules of the game are pretty straightforward:

• Each cell represents an activity to be completed in order to link the first and the last cell in one continuous path
• The numbers in each cell indicate the total amount of natural resources consumed (i.e., carbon footprint) by each activity
• Design a path using the least number of resources
• Use single-step vertical and horizontal hops only
• To backtrack, re-click on the last highlighted cell

Considering the figure shown earlier, one such path would be as shown below.

Shortest path solution to the earlier problem

The game resonated with me because it’s unlike any other ordinary game — not just a game, but also a creative way of making people environmentally conscious of the current global situation.

For the tech stack, I decided to limit it only to plain HTML, CSS, JS and PHP. The whole point of choosing PHP for the backend was because it has been the de facto standard for developing online applications and had multiple support communities / resources easily accessible on the net.

Here’s a PHP tutorial for beginners to get acquainted with the basics.

Video link: http://youtu.be/LGF5H4nWMGs&list=PLFHz2csJcgk_fFEWydZJLiXpc9nB1qfpi

The Learning Phase

Initially, trying to learn the different domains all at once was definitely tricky.

From trying to get acquainted with web development to learning PHP for the backend and then moving over to the Dijkstra’s algorithm (a famous shortest route-finding algorithm), I lost track of time and ended up spending a massive chunk of my time in just learning the new technology stack and algorithms.

Here are some resources that can help you get started with webdev:

https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf

https://microsoft.github.io/Web-Dev-For-Beginners/#/

One important thing I learnt while working on this project was applying already existing components to newer technologies instead of building it from scratch (with reference to Dijkstra’s algorithm), making it a point to not reinvent the wheel.

A short explanation of the Dijkstra’s algorithm.

http://youtu.be/FSm1zybd0Tk

In case you’re unfamiliar with the basics of graph theory, check this out.

Introduction to Graphs - GeeksforGeeks

The Development Phase

When I started out, I wasn’t too focused on how the entire game looked as my major focus was on just making it functional and bringing the idea to life.

Working with that mindset proves to be rewarding as you don’t spend too much time beautifying it (though I’m planning to do that in the future).

Coding the actual game didn’t take as long as the learning phase did, but it wasn’t easy either.

Since this was my first time working on an actual web development project, I would often get stuck at the simplest of tasks.

Usually in a software development life cycle (SDLC), there are 5 major stages involved — ideation, designing, coding, testing, deployment.

This is the standard framework used to define tasks performed at every step in the entire software development process.

As discussed earlier, here’s a visual representation of what the software development life cycle looks like.

This experience helped me realize how even a small idea takes up so much energy to bring into execution.

You can check out this game HERE.

Lessons and tips

For a newbie starting out, here are some tips based on my experience

• Think of a design, don’t make it too complicated but keep it simple — you’re doing it to learn and not impress others
• Give it out to users for testing to know their opinion and get valuable feedback
• Try to aim for quick wins
• Focus on small steps rather than taking huge leaps

Good luck as you start your coding journey!