Starfling: A one-tap endless orbital slingshot game in a single HTML file
497 points - last Thursday at 1:52 AM
SourceComments
At the very least, put the reset and play again buttons in the same spot, so I can just keep tapping/clicking there.
Super Meat Boy is how all games like this should be.
You orbit a star with a ball. Tap anywhere to release and sling it through space. Catch the next star to lock in orbit and keep going. Miss and it's game over.
The whole thing is just one HTML file with vanilla JS, Canvas, and Web Audio. No frameworks, no build step. Loads in under 2 seconds on phone or desktop.
There's a combo system if you release quick, a skip bonus for jumping over stars, and it gets harder the longer you last. When you die you get a cool trail art picture of your whole run that you can share.
Audio is all generated on the fly and it has haptics too. Pretty satisfying once you get the timing down.
Play it here: https://playstarfling.com?utm_source=hn&utm_medium=showhn
Would love your thoughts on the feel, difficulty, and whether the trail art is fun or not.
Thanks!
I stopped it running at 10866. That's currently the high score. I appreciate that this is pointless and proves nothing, but I've been experimenting with automating testing games (I work at a gaming company at the moment) so it felt like an opportunity to try an experiment.
It also seems like there's gravity coming from off screen assets (or maybe it's the bottom of the screen?) causing the projectile to curve in unexpected ways, and not be captured as strongly by the gravity of the visible objects as I'd expect.
Might also be fun if you encountered powerups as you explore deeper into the map (eg. gravity attraction, project path, etc), or even got to pick between forks in the route. The trail art reminds me of Out There.
I've made a similar little web game based on Lunar Lander, check it out!
But why make apps for it? The web page is perfect as is
Doesn't seem that hard, just a boredom endurance
If you like this, you will for sure love the game "12 Orbits"!
Small idea for improvement: the "fast" text is often over the same space as the ball, which makes it harder to see where the ball would be going.
My only gripe is you render the bonus notification too near the ball and it distracts me and makes it harder to keep a combo going.
Looks at imports
>Google Tag Manager
-_-
Very fun.
Related but I played a similar orbital minigame a while back on Itch.io which has a bit of a 2D Mario Galaxy feel to it as well.
Ok on touch gravity of the orbiting takes off. And if I don't land the next I start again and get prompted for my email each time.
It reminds me of certain games on NES which could be played for hours, once you lose your 3rd life you start all the way from the beginning.
Here it's the same. With one life.
- on desktop (tested in Brave Browser) the speed is faster than on mobile (is this supposed to be ?)
- on desktop would be nice to have a short cut to instantly start a new game (may be on mobile you could calculate early on if the balls curve would have a collision and show a button to directly restart)
https://pod.sekor.eu.org/@modinfo/statuses/01KNXT3ZQDTHZBDYF...
I did however expect the stars to attract my ship, that combined with the top down gravity vector made it less intuitive.
It also makes it feel like a game happening in earths atmosphere instead of space, it impacts the possible sense of scale.
Still fun :)
I loved the simplicity, it was fun!
(function () { "use strict";
// ββ CONFIG ββββββββββββββββββββββββββββββββββββββββββββββββββ
const AUTO_RESTART = true;
const RESTART_DELAY = 800; // ms before auto-restart after death
const MUTE_SOUND = true; // silence during autoplay
const SIM_FRAMES = 350; // max frames to simulate per check
// ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
let running = true;
let totalGames = 0;
let botBest = 0;
let scores = [];
if (MUTE_SOUND && typeof snd !== "undefined") snd = false;
function wouldHitTarget() {
if (st !== 1 || !bl || !bl.orb) return false;
var targets = [];
for (var i = cWI + 1; i < Math.min(wl.length, cWI + 3); i++) {
if (wl[i] && !wl[i].caught) targets.push(wl[i]);
}
if (targets.length === 0) return false;
var ta = bl.angle + bl.dir * Math.PI / 2;
var nw = wl[cWI + 1];
var spd;
if (nw) {
var ddx = nw.x - bl.x, ddy = nw.y - bl.y;
spd = Math.max(4.5, Math.min(7.5, Math.sqrt(ddx * ddx + ddy * ddy) * 0.038));
} else {
spd = 5.5;
}
var x = bl.x, y = bl.y;
var vx = Math.cos(ta) * spd;
var vy = Math.sin(ta) * spd;
for (var f = 0; f < SIM_FRAMES; f++) {
vy += 0.06;
vx *= 0.995;
vy *= 0.995;
x += vx;
y += vy;
for (var t = 0; t < targets.length; t++) {
var dx = x - targets[t].x, dy = y - targets[t].y;
if (Math.sqrt(dx * dx + dy * dy) < targets[t].radius + 20) {
return true;
}
}
if (y > 2500 || x < -400 || x > W + 400) return false;
}
return false;
}
function autoRestart() {
if (st !== 2) return;
var go = document.getElementById("game-over");
var rp = document.getElementById("revive-popup");
if (go) go.classList.add("hidden");
if (rp) rp.classList.add("hidden");
document.getElementById("pause-btn").style.display = "flex";
document.getElementById("sound-btn").style.display = "flex";
st = 1;
init();
}
function tick() {
if (!running) return;
if (st === 0) {
handleTap();
} else if (st === 2 && AUTO_RESTART) {
totalGames++;
scores.push(sc);
if (sc > botBest) botBest = sc;
console.log(
"Game #" + totalGames +
" | Score: " + sc +
" | Jumps: " + jmp +
" | Combo peak: " + cc +
" | Bot best: " + botBest
);
setTimeout(autoRestart, RESTART_DELAY);
setTimeout(function () { requestAnimationFrame(tick); }, RESTART_DELAY + 50);
return;
} else if (st === 1 && bl && bl.orb) {
if (wouldHitTarget()) {
release();
}
}
requestAnimationFrame(tick);
}
window.stopBot = function () {
running = false;
console.log("Bot paused. Call startBot() to resume.");
};
window.startBot = function () {
if (running) return;
running = true;
console.log("Bot resumed.");
requestAnimationFrame(tick);
};
window.botStatus = function () {
var avg = scores.length
? (scores.reduce(function (a, b) { return a + b; }, 0) / scores.length).toFixed(1)
: 0;
console.log(
"Games: " + totalGames +
" | Best: " + botBest +
" | Avg: " + avg +
" | Running: " + running
);
};
console.log("=== STARFLING AUTO-PLAYER ===");
console.log("Controls: stopBot() | startBot() | botStatus()");
requestAnimationFrame(tick);
})();Git rekd nerds
Right now the first 5 or so times you miss. Probably the first 5 times you try.
You get an annoying process of having to shift you hand to press the play again button.
The solution is easy as checking what the game score and high score is, if it's 0 just restart.
I don't need or want to hear about how to sign up to your mailing list if I've just fallen flat on my face!
There's a reset button but it seems to do nothing and you end up at the play again screen.
(Apparently iOS still doesn't support it [1]? It's been in Chrome for the past 12 years. Maybe someday.)
1. https://developer.mozilla.org/en-US/docs/Web/API/Vibration_A...
Good art style, terrible UX
You didn't play the game you created
Tangentially, this is also why I dislike the modern trend of auto-shooters and idlers. The twin-stick shooter is by far the superior control scheme for this type of game, yet for some reason people enjoy having less control and engagement. I never got the appeal.
I ship self-contained HTML files for a different project and the sneakiest gotcha is </ sequences inside inline <script> tags β the browser sees </ and tries to close the script tag prematurely. You have to escape them as <\/. Curious if the author ran into that one.
Fun concept for the format too β games are the perfect use case.