I've been learning JS and wanted to actually finish something instead of another half-built tutorial project. So I made a dumb little game and put it online.
It's called LIAR. A button tells you what to do - TAP, HOLD, DON'T, and you do it before the timer runs out. Then around round 6 it starts lying to you. A red shaking "TAP" actually means don't tap. It also insults you when you die.
Play it here: https://playliar.netlify.app/
Two things I'm weirdly proud of:
It's one HTML file, ~28KB, no images and no sound files. Everything is drawn with canvas and the sounds are just Web Audio oscillators. The whole "sound design" is basically this:
function beep(freq, dur, type, vol, slideTo) {
const o = audioCtx.createOscillator(), g = audioCtx.createGain();
o.type = type;
o.frequency.setValueAtTime(freq, audioCtx.currentTime);
if (slideTo) o.frequency.exponentialRampToValueAtTime(slideTo, audioCtx.currentTime + dur);
g.gain.setValueAtTime(vol, audioCtx.currentTime);
g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + dur);
o.connect(g); g.connect(audioCtx.destination);
o.start(); o.stop(audioCtx.currentTime + dur);
}
And the lies always have a "tell" (the red shake), so dying feels like your fault, not the game cheating. That part took the most tuning.
It's my first finished game so it's probably rough. Would love to know how far you get before it fools you, and whether the first lie feels fair or cheap. Roasting welcome.
👇 If enough people want it, I'll write a full step-by-step build guide - how the canvas drawing, the Web Audio sounds, the "lying" mechanic, and the auto-generated share card all work, so you could build your own. Comment below if you'd read that and I'll put it together.
Top comments (0)