Triska Reloaded - celebrating tenth edition of js13k

A very long time ago (around 2014) we’ve released Triskaidekaphobia (the name meaning “fear of the number thirteen”) - a hyper casual mobile game promoting the js13kGames competition. With the tenth edition starting in a couple of days, I wanted to revive the original concept, but properly this time.

Triskaidekaphobia was built using the Phaser game engine, and you were a red number Eight going through the dark forest and trying to avoid evil Thirteens - it was a side-scroller where you jumped up and down, and collected lucky charms to give you more endurance. It was fun, but it was missing the most important feature - being built within the 13 kb zip limit. Luckily, Rémi (who won the competition last year with his game Ninja vs Evilcorp) was kind enough to help!

It all started with Ewa designing a refreshed concept of the game, optimized for portrait. The game needed a better protagonist, and so Badlucky was born. It’s a black cat with ninja skills - he’s jumping up, and if enough lucky clovers are collected, they will give him extra boost.

Play Triska Reloaded: triska.js13kgames.com

I know, it’s not really an original idea to say the least, but the cat itself looks cute, and we immediately liked it!

I’ll let Ewa explain everything:

Concept and design

EWA: My job was to create a visualization of the game merging Remvst’s style with our very own Enclave Games creation, Triskaidekaphobia. The main focus on deadly spikes was left unchanged, but the key was to update the main character. In the original, it was a boring Eight without any anthropomorphic features, so I decided to change that in the new game.

I’ve created a bad luck black cat and I named it Badlucky. He had to be a ninja (a little bit weird, but also swift and agile when needed), because that’s what I felt would look the best thanks to Remvst’s incredible skills. The cat’s headband and a huge “13” necklace are specifically using js13kGames’ brand colors.

When creating the visuals (since there were no graphic assets to be used as the game itself is rendered on Canvas), I decided to follow “the simpler the better” approach. I’ve used simple shapes like circles, rectangles, and squares - and merged them together, using the color palette from the original game. I knew they’ll come to life with all the attention to detail Remvst is known for.

Now moving to Rémi, who coded the whole thing:

Coding the game

RÉMI: With Triska Reloaded, my main goal was to show that it was possible to build a game that felt good without adding complex mechanics, or spending too much time focusing on compression.

The game itself is pretty simple: the character moves towards a certain direction until it hits the wall. A direction of 1 means it’s going right, a direction of -1 means it’s going left:

 x += direction * velocityX * elapsed;
// Don’t go beyond walls!
 x = Math.max(wallX, x);
 x = Math.min(width — wallX, x);

Add a bit of gravity, and you have a game!

velocityY += gravity * elapsed; // Keep growing velocityY so we keep falling faster (gravity * elapsed is the acceleration)
 y += velocityY * elapsed;

Of course this requires a lot of tweaking to feel right, but beyond that, what makes a game stand out is all the tiny details that are added to it. I always reference this talk to demonstrate how you can make the simplest games exciting.

If you look at Triska Reloaded, there are plenty of small effects: the character has a trail, the background has a subtle parallax, the buttons are moving, they grow when highlighted… and many others, but there’s one simple effect that I’d love to emphasize on: the cat’s tail.

If you look at the tail (in the menu or in the game), you’ll notice that the tail is moving. The tail itself is drawn using Bezier curves, but its end is simply moving left and right. This is a very simple effect that can be achieved using the sinus function.

Sinus is a function that smoothly alternates between 1 and -1 every pi * 2. If you use the current time and change its period (how often it repeats), and amplitude (how much it oscillates), you can make things oscillate with just one line of code:

const currentTime = Date.now() / 1000; // current timestamp in seconds
const periodsPerSecond = 0.25; // oscillate once every 4 seconds
const halfAmplitude = 10; // oscillate between -10 and 10 (amplitude = 20)
const tailEndX = Math.sin(currentTime * Math.PI * 2 * periodsPerSecond) * halfAmplitude;

Hope this inspires you to add oscillations here and there in your code in the next js13k!

Summary

Similar to all the games submitted to the competition over the years, the sources of Triska Reloaded are available on GitHub for you to check and learn from! Ps. If you think you could help us create a music track for the game within the size limit left (a few kb), please get in touch!

I think it looks and plays very well - it’s simple and quick, but addictive enough for you to return and try to beat your own (or your friend’s) high score. After getting through the first 100–200 meters the number of lucky clovers is increasing, so with enough skill reaching out 500 meters and above is quite possible.

Play Triska Reloaded: triska.js13kgames.com

So… what’s YOUR high score?