Vanilla JS on a Rails API

Here we are again! Phase 4 of 5, and we’re tasked with building a single pager and our own rails backend.

The game was best played using the numpad and you just had to bop the enemies on the corresponding tiles. Some only require a single hit, other more. Some had other tricks where you’d have to use precision timing, or were instructed to hit a different key entirely. All in all, the game was one of my first forays into internet and game addictions.

In 2021, Flash is dead so unfortunately you can no longer play the original game, but that just gave me a bit of a push to start making a copy-cat version that one day I hope gets to the calibre of what I recall in my memories.

Pummel is my Tontie tribute. Little monsters pop up and you bonk them using your keypad. As you gain points and move up the levels, the monsters appear and disappear faster. To prevent random button mashing, you lose health if you hit an empty tile, as well as if you miss a monster and it disappears before you get to it.

Upon ending the game, you can save you score to see the top 10 high scores, and you can also submit comments and give notes regarding each level.

The game is made using an object oriented programming (OOP) paradigm that relies on the concept of classes and objects.

In this initial version, Pummel consists of three classes (Game, Level, and Hole). Object corresponding to each class are responsible for their own actions and how the affect what the user sees on the page. This style allows for good meaning organization and intuitive behaviors. There is a reasonable separation of concerns for example such that, as a Hole “moves” up and down, the object itself is responsible for making that change as well as rendering it.

On page load, a Game object is initiated at level 1. Once the game starts, it will fetch information regarding the first level, creating a Level object which will initiate 9 Hole objects associated with the level. Points are added when you successfully bonk a monster, health is lost if you miss a monster or hit an empty spot.

Once you gain enough points to finish the current level, the next level is automatically fetched and initiated. The cycle continues until you run out of health or you manage to get to the end of the last level.

As mentioned earlier, the back end is a Ruby on Rails API using Postgres to store the server side data for the game. This information includes all the information that needs to be loaded to run and differentiate each level, as well as scores and names previously players. This is also where notes associated with specific levels that users can submit will be saved.

The front end is made completely with HTML, CSS, and vanilla Javascript. Rather than using the JS to make any movements, I opted to use the transition property and toggling classes to render any changes to the page. The majority of everything will be visible at some point is already written in the HTML, and only made visible at some point using a combination of the CSS and JS. The game logic is completely handled by the Javascript classes that control the HTML and CSS.

My eventual goal is to remake Tontie so that I can relive my own childhood. Currently the monsters just pop up randomly, however I’d like to add in different qualities and health for each of the monsters, and also add different types of mallets (ie. bronze, silver, gold) that have different strengths and speeds. There’s a lot of work to do, but in the moment it’s playable and I’m decently content with the two weeks I’ve spent on it.

Related posts:

In my childhood days while I’m learning cycling, I tried many times to learn cycling Alone, but always fall down down down! But once you choose it as a success it will change, go on until you learn…

Founded by Peep Laja, an entrepreneur who was voted the most influential conversion rate optimization expert, CXL Institute is an online platform offering a range of technical marketing courses…

Did we make the most of our family time during Covid lockdown?