Info

Year

2020

Languages

Vanilla Javascript, HTML

Platform

Web

Back to Projects

Overview

Thwomp! is a thrilling action platformer that lets you play as the character you’ve always wanted to play as, Thwomp!.

Do you have what it takes?

Do you have what it takes?

Practice your skills of patiently waiting for Mario to finally get to your part of the course only to hear him go down a pipe and have to wait a bit longer.

Play Thwomp Now

During you’re waiting you should practice a bit with your thwomping skills. But be prepared you’ve got to have split section reflexes to get mario before it’s too late.

Technical

The game is basically a joke because it makes you wait 10-60 seconds for Mario to zoom past giving you a split second to try to get him. If you miss, you lose. That’s it. It is however, actually a game. The main gameplay mechanic is that Mario sounds like he is actually playing a level. You can initially here a very faint jumping or stomping of enemies. Slowly the sounds start to get louder indicating Mario is getting closer. It culminates in some quite loud action sounds indicating Mario is just off-screen and he’ll run through and try to jump past you. If you get use to the sounds you can actually win the game.

So close. But so far.

So close. But so far.

The game is built in plain javascript as a way to get familiar with a bit of canvas drawing and pseudo-sprite manipulation in Javascript. The game does some very simple HTML5 audio playing but playing with the volume parameters.

The game implements a very basic mario physics engine to handle the computer’s control of Mario.

Listening Skills

As mentioned the sounds progressively get louder. The levels in the game are not random but are programmed actions set against a time offset. The computer will make Mario play a fictional level and trigger each action. The time offset is compared against the ACTION_END time to determine the volume level or effective distance from you. At the point ACTION_END hits, Mario blasts on screen and jumps past you.

levels.js

    120: ACTION_JUMP,
    180: ACTION_STOMP,
    400: ACTION_FIREBALL,
    500: ACTION_JUMP,
    700: ACTION_JUMP,
    780: ACTION_JUMP,
    890: ACTION_STOMP,
    1190: ACTION_JUMP,
    1290: ACTION_STOMP,
    1330: ACTION_STOMP,
    1350: ACTION_STOMP,
    1370: ACTION_STOMP,
    1470: ACTION_PIPE,
    1970: ACTION_PIPE,
    2170: ACTION_JUMP,
    2370: ACTION_FIREBALL,
    2450: ACTION_STOMP,
    2670: ACTION_JUMP,
    3000: ENTER_SCREEN,
    3101: ACTION_RUN,
    3102: ACTION_JUMP,
    3152: ACTION_JUMP,         
    3500: ACTION_END 

Overall, it’s not the most complex code or necessarily best architecture. It was created partially to implement a silly joke and play with canvas and images.