I've been working on Athena Crisis for about two years, and full time for the past 9 months. The game is entirely built from scratch using React and CSS without a game engine. It runs anywhere, including the Steam Deck. You can even use a gamepad on the landing page to play!
Previously the landing page had a video of the game but my goal was to always just put the actual game on the website. I merged the landing page into the game's monorepo, added the game's React components, and boom – the video was replaced with a playable version of Athena Crisis.
Of course, the real game has tons more features, but the landing page now always runs the exact same code as the actual game – including assets, the AI, and the UI/UX – and it is pushed within 5 minutes as the actual game is being updated live.
I frequently talk about the tech behind this game (see this React Summit talk about "How Not to Build a Video Game": https://www.youtube.com/watch?v=m8SmXOTM8Ec ) and I'm planning on open sourcing as much as possible in the future.
by iraldir on 2/14/24, 8:29 AM
I was going to be fairly underwhelmed, I mean, yeah it's a web game of course you can play it on its website, wooplidoo.
But actually having a demo directly in the middle of the action embeded in an iframe of the landing page is quite neat. It blends properly with the rest as well, so actually well done.
Some feedback:
- Demo plays music. If the user clicks the purchase button, a new page opens which also plays music, this can be quite unpleasant as they are both playing at the same time.
- Personally I like the art of the game, including the pixel art character faces, but I don't like the banner. The banner feels like it was drawn by a teenager discovering photoshop with a book "learn to draw manga style in 2 hours" – That might be a bit unfair and I'm sure it was a lot of effort, but a lot of details make it feel amateur-ish in the wrong way, in particular the most central character and its face. Have you considered using the same pixelised style that you use for describing each character bellow?
- on firefox the character faces overlap with the text on "Create your own maps..." (Firefox, Mac OS, very large screen)
by PetitPrince on 2/14/24, 10:46 AM
Firefox, Windows 11 on a fairly modern computer.
* I don't know what to do when all my units have played. Is there a next turn button ?
* The info/goal/next unit buttons are fixed to the page and doesn't feel linked to the game itself, making them easily confused for page navigation instead of game element.
* I have trouble distinguishing between the background and the active units. Perhaps make the background slightly more desaturated ?
* Disable the music by default. It's jarring to have it play directly.
* It's super impressive to have a game playable like that in the browser
by vidarh on 2/14/24, 6:49 AM
Is there a "fast forward" for the AI actions? The thing that will turn me off a game like this faster than anything else is being forced to sit through and watch the individual moves the AI takes in "normal time", and I couldn't find one (I didn't look very hard)
by npinsker on 2/14/24, 1:46 AM
Your game looks great! Love the color palette, I’ll keep an eye on this for sure.
Sorry for the curveball, but I’d be really interested in hearing about the process of finding your publisher (if you don’t mind) — it seems incredibly tough for devs without huge resumes right now, so I’m curious how the process went.
by zoidb on 2/14/24, 9:07 AM
I just watched parts of your "How Not to Build a Video Game" talk and I am blown away. I have not seen anyone build a game at this level with css. Do you know of any other games that take this approach? If you were doing this again would you choose a 2d game rendering engine that uses canvas like phaser or pixi.js? I'm curious as well about speed and loading times, if there really is a noticeable benefit over using canvas?
by leshokunin on 2/14/24, 1:48 AM
Very cool setup. Congrats. Obviously this is geared at people who already know Advance Wars. If you wanna make it more newbie friendly (not that you have to), plenty of hand holding you could add. But definitely a neat demo.
by usrusr on 2/14/24, 2:08 PM
From a gameplay perspective, the demo gives me the impression that it's mostly about avoiding unrecoverable mistakes while attrition takes its course. I guess that's what real war is like, but for a game I'd rather win by finding enough good moves and the occasional very good one, not by "diligently avoided making any mistakes" (on the other hand that sentence would look worse in a job performance review, heh). Sorry to be that person on the internet who complains that the game is too realistic!
by tesrx on 2/14/24, 1:30 AM
Nice work!
This reminds me of the "Advance Wars" game series on GBA.
by mtlynch on 2/14/24, 1:39 AM
I tried it out, but it froze up my browser on Firefox + Windows on a pretty well-resourced desktop.
The page loaded fine, but when I hit "Play" everything ground to a halt, and even scrolling the page up and down had a 3-5 second delay.
by vinnymac on 2/14/24, 11:41 AM
This is the third time I’ve seen your beautiful game now. So I decided to pull the trigger and buy early access.
Unfortunately after filling out the stripe form on iOS Safari the pay button remained gray and I couldn’t checkout.
I actually experienced a variety of quirks on mobile while navigating that might require some investigating. Perhaps because it is optimized for Chrome?
by Narishma on 2/14/24, 10:37 AM
It's unusably slow for me in Firefox/Linux, as in multiple seconds per frame with the CPU at 100%.
by poopsmithe on 2/14/24, 6:23 AM
I like this kind of game so I gave it a go. First thing I had trouble with is differentiating the two team colours. I'm not colorblind but they look too similar on this 10 year old monitor with a blue light filter I'm playing on. Second thing I had trouble with was telling what I can click on or when it was my turn. I'm still figuring that out actually. Gonna jump back in and see if I can blow up some stuff.
by adamredwoods on 2/14/24, 4:15 AM
Nice graphics! I lost badly, and have desire to return.
by mxstbr on 2/14/24, 3:19 AM
That talk is the most mind blowing thing I've watched in years. Bonkers!
by appden on 2/14/24, 2:33 AM
This is so freakin’ cool! Love the animated screenshots and whole retro vibe. I hope the tech behind this will enable you or (through licensing or open source) others to build more immediately playable, cross platform games.
by tsukurimashou on 2/14/24, 2:03 AM
I tried the demo but after using every move on every unit nothing happens
by mashlol on 2/14/24, 1:42 AM
Very cool demo, but I think it needs a NUX as I have no idea what to do. I randomly clicked stuff but I have no idea if anything accomplished anything.
by frozenlettuce on 2/14/24, 1:27 PM
Hey! I'm also developing a game with some Advance Wars inspiration. I also had a UI challenge when developing the interaction with tiles that have a unit + a city. Instead of displaying a window to select the desired entity, I opted to displaying the controls for both. The city controls can be displayed in a small window in a corner and the mouse still controls the unit. I'm not sure if that's the better interaction, but it's what results in fewer clicks.
by freetonik on 2/14/24, 10:18 AM
Very cool approach and the demo! One minor critique is the color palette choice. As far as optometric tests go, I do not experience any color blindness, but I still struggled to comfortably distinguish between the violet and orange characters, and especially orange characters standing on orange backgrounds. I can clearly see them, it's just slightly uncomfortable for the eyes.
by ukuina on 2/14/24, 5:46 AM
Demo was tough, but fun, so I bought the game!
How do I build structures in the prequel campaign? Is it an action on the Pioneer on specific land squares?
by NohatCoder on 2/14/24, 11:53 AM
The whole thing scrolls in a very weird fashion. Despite only taking up around 1/6 of my screen it manages to scroll so that part of the map is hidden. The whole thing lacks instructions on how to play, along with rules. What units do what? What does the terrain do? How is damage calculated?
by elliottcarlson on 2/14/24, 2:42 AM
Very neat -- one issue with the site is once you have started a game, if you try to scroll down to check out the rest of the page it keeps scrolling me back up to the game. I was looking for a pause button, hoping that would let me check things out, but couldn't find one.
by huhtenberg on 2/14/24, 11:23 AM
by dagurp on 2/14/24, 11:50 AM
Works great for me on Vivaldi on Android and Linux but I couldn't figure out how to end my turn on desktop. There should probably be a help dialog for that when you don't have anything left to do.
by intruder on 2/14/24, 12:55 PM
I absolutely love when products have interactive versions of their product right in their product pages.
The game looks really good, love the art style and the readability of it all.
by pie_flavor on 2/14/24, 4:17 PM
Wow, I haven't seen a browser game this full-featured since CrossCode. Were there any completely unexpected challenges on the web?
by germandiago on 2/14/24, 10:03 AM
Is it inspired in Advance Wars?
by greentext on 2/16/24, 10:17 PM
Had fun killing an hour there, fun gameplay. Is there multiplayer?
by ambrood on 2/14/24, 3:30 AM
have been playing this for sometime. quite addictive! ty @cpojer
by kokizzu5 on 2/14/24, 10:43 PM
is this game run a mining script? '__') main page uses 90% of 32 cores..