Tacks
An ASCII style idle clicker
The Idea
Initially I just needed a project to fill some downtime at work, and I wanted to test myself with html and javascript by writing it all in notepad, but I got a little carried away and it became a full fledged clicker game. There's a lot to unpack so let's dig in I guess.
Influence
I played a lot of Cookie Clicker when I was in school, it was a pleasant time waster and there was something about the world building that really appealed to me. Zombie grandmas taking over the world, cookie economies, particle accelerators, it was all very stimulating to the imagination.
On the other hand, I was also recently introduced to Universal Paperclips which struck me in a different way. Whereas Cookie Clicker is simply about making cookies, Universal Paperclips explores things like resource management, stock market exchanges, thematic progression, and various different mechanics to play around with. Both are addictive, but paperclips pushes you through a learning curve into full scale production, managing different assets and sources of production as opposed to Cookie Clickers 'number go up' mentality.
I wanted to play with that idea. I wanted to find a good middle ground and make a game with some strong themes, clear progression, but retain the spirit of an idle game. And so I started taking Tacks a little more seriously.
The Visuals
I love that Universal Paperclips is, stylistically, so low effort. It consists almost exclusively of basic web-dev components with no css whatsoever. I wanted to learn more towards this programmer, old internet, aesthetic while utilising some modern tech and minimalist approach to GUIs. That's how I landed on ASCII art. Simple stuff like stickmen for workers, a hand with pointer finger for, well, pointers, etc. Honestly having this limited medium has been really interesting to play with, a fun challenge.
Still, I wanted to utilise modern methods, so I implemented stuff like a perlin noise ASCII display for the header, individual reactions to mouse movement, manually animated ASCII, and I have ideas for much more. The whole idea for most of the projects that I do is to embrace the medium. I like working with ASCII and pixel art because it's a native computer format. I like implementing detailed mechanics behind the scenes because again, the computer does the heavy lifting. It's as Dieter Rams (celebrated product designer) lists as one of his cardinal rules for design, "Good design is honest", it mustn't pretend to be something it's not, and by leaning into native digital formats, that's what I'm striving to do.
The Code
Yikes, this will be a good one. The code for Tacks is a mess because, originally, it was contained in a single file consisting of upwards of 1500 lines of code. It's now been split up (since I gave in and now use VS Code for it), but the refactoring process is slow. The main components are the canvas drawing functions which have been made modularly and support very primitive animation, the economics system which supports cheat modes and inflation, and the save system, which just uses local session storage in browser. I'm planning to make a more central and modular method of constructing the modals, but that's low on the list of things to do right now.
The core of the drawing system:
function drawSprite(name, ctx, sprite, x, y, scale, fontSize, lineHeightMult = 1){
const scaledSize = fontSize * scale;
ctx.font = `${scaledSize}px monospace`;
ctx.textBaseline = "top";
ctx.fillStyle = getColor(COLOURS.ascii);
let lineHeight = fontSize * lineHeightMult * scale;
let animated = (name == "printer") ? true : false; // The only animated sprite atm
for (let i = 0; i < sprite.length; i++) {
f = Math.floor((frame + 1) % 8);
spr = animated ? CHAR_PRINTER[f][i] : sprite[i];
ctx.fillText(spr, x, y + i * lineHeight);
}
}
All in all, the code has been a great exercise to learn the ins and outs of Javascript, learning scalable project structures, and web-dev in general.
The Future
The future of Tacks is bright, albeit slow. There was a massive rush making it and eventually I had another idea to pursue with these newfound web-dev skills so I've been distracted. I do, however, have big ideas for some later mechanics, from political influence to board room dramas. I need a proper workflow to ideate though and that will take some time. I think the main hurdle right now is making it less cluttered, for which either php modules or javascript html injection is definitely the answer, but that brings with it order of execution issues and along with other bottlenecks, it's a daunting task, but one I'll definitely tackle in the future.
To-Do List
Conclusion
All in all, this is a great project to work in between others. Chipping away at features, making improvements and seeing it all come to life is so wonderful, I could never have seen what this project would turn into when I started with just a button and a label on an otherwise blank html page. What a ride.