Show HN: Breakout with a roguelite/vampire survivor twist (breakout.lecaro.me)
My girlfriend and I played a lot of the excellent LBreakoutHD, an open source breakout game that follows the traditional formula of having multiple lives, scoring points by breaking bricks and catching the good upgrades that spawn randomly and fall down, while avoiding bad upgrades.
She liked this game because it is non-violent, and doesn't make her sick like the first person 3D games. There are some issues though, it gets boring to break the last bricks, it's a bit unfair or slow sometimes, and the run length is too long with 30 something levels to clear for a high score.
I wanted to make a clone that would be fix those issues. I first tried to introduce more strategy by making the upgrades visible from the start, instead of them appearing randomly. You'd then strategize what to break first to earn more points. That first version is playable (https://breakout-v1.lecaro.me/) but a bit too complex.
I then wanted to simplify the gameplay, but make the game multiplayer in split screen (https://breakout-v2.lecaro.me/). Instead of bonus and malus, each brick drops some coins, and you need to catch them with the puck. This worked pretty well. You can play with the keyboard (A/D and LEFT/RIGHT keys) or mouse or both. The bomb explosions will blow coins around, including the coins of other players, and if you lose your ball, then a gap opens between your screen and the guy next to you, to give him a chance to lend you his ball. You can play using your phone as a controller by scanning the QR code, but make sure everyone is on the same Wi-Fi and that the the firewalls are down.
For my last version (https://breakout.lecaro.me/) is focused on the game feel and juice. It is about breaking bricks and catching coins, like the v2, but you can now pick upgrades at the end of each level. Your score unlocks more upgrades and levels that are added to the pool for the next runs. There are currently 31 upgrades and 91 levels to unlock.
Please have a try and tell me what you think. The game should run well on Firefox, safari and chrome on mobile and pc. It is available in F-Droid and on the play store, The source code is on GitLab. All links are in the game menu.
195 comments
[ 2.7 ms ] story [ 229 ms ] threadAt first I didn't know that the coins were coins, it just looked like brick particles for visual effect. Maybe having a current coin counter or visual difference would've helped.
Speaking of coins, there's a couple times when the ball and coins were too similar in color, making it hard to find the ball amid a mass of falling coins. Maybe this is by design, but some contrast between coin color and the ball would help.
FWIW it also took me a couple of levels to even realize how I was getting coins. A yellow glow around the coins or some shiny effect + clinky sounds would go a long way. The -2 +2 etc. callout numbers could also last longer on the page and just grow in size as they fade out? They were also quite hard to spot
As a huge fan of incremental games, I liked it. I just don't like brickout, haha!
If you want some ideas for multiplayer, see if you can dig up “BattleTris” - it was a brown university cs student game that allowed networked Tetris play in the 1990s. I could be wrong but I think Bryan Cantrill was one of the people who made it. Anyway, my memory is that it had a lot of fun ways to mess with the opposing player, and you might find some good ideas in it.
https://en.wikipedia.org/wiki/TetriNET
[0] https://www.youtube.com/watch?v=VbLz79trgz8#t=14m12s
Here's an issue. The mouse freezes a bit at 3rd level, leading to missing the ball. Not sure if it's GC issue or input handling.
- The particle effects when the block is broken is a bit disturbing and distracts from the gaming experience since they make it harder to see the ball. And since this is just a visual maybe you want to fade them out or something.
- The size of the blocks seems out of whack with respect to the paddle and ball
- The little effect when the ball hits the paddle is a neat idea!
Here's what I have myself:
https://ensisoft.com/demos/break/game.html
Made with this engine
https://github.com/ensisoft/detonator
Blocks can explode in place, but shouldn't rain as much (or any) debris that gets mixed in with ball and coins.
I like the way the changes you made look already! Has a better feel to it.
A couple of small translation issues I spotted: "Keep pressing here to play" should really mean "tap repeatedly", I think you should put something like "Press and hold here to play"; the other was one of the upgrade descriptions said something like "slower the ball" which I'd write as maybe "slow down the ball".
Anyhow, great job.
Fyi, the perk to self-destruct the last block didn't seem to work.
My $0.02 of feedback: The number of lives being inside the puck as a number is distracting and makes the game look less evolved than it actually is.
I would prefer a visual indicator on the side of the game play area.
Having lives, coins and streak counters outside the play area I think would be better.
You start with just one life by the way, but if you pick up more they'll be shown as hearts at the top right near your score.
It makes the game feels unresponsive when you lose control of the pad because of this. It also breaks immersion because you must know where your pointer is instead of being the pad.
Couldn't play more than a few levels because of this.
Consider: (a) locking mouse (b) hiding cursor (c) fullscreen mode
Here's an example if you don't want to search docs: https://mdn.github.io/dom-examples/pointer-lock/
As other mentioned UI needs a few more iterations, but it's ok. I don't think you need to track coins during the run as you don't spend them to buy upgrades - which is not obvious and may require a change in how you communicate things - but on the other hand it's yet another thing tickle your lizard brain and generate additional dopamine boost. A life counter is a must.
Take a look at Electron or Tauri.
This is enough to put it on Steam. In current state it's a very solid freebie, and with some additional work you could charge an entry tier indie fee.
Mouse lock is a must on desktop, but you have to communicate it the user somehow so they don't get confused.
I understand your point about the game being 100kb, but once you decide to publish it on Steam the overhead doesn't matter. People are totally fine downloading 60Gb games, so couple megabytes won't hurt anyone. I gave you those two options because, at the end of the day it boils down to which platform you'll be more comfortable with and which will give you more usable options out of the box.
There is some work to be done with UI, but once you get there don't pass on Steam. If anything it will give you some bragging rights and another point in resume.
And like you said yourself, if you're willing to put some extra work, at 4-5 euro range it will be a steal on Steam. It may take some additional footwork to reach out to content creators to get some inital traction, but the concept is great and I would give it a chance.
Works great on my device (Android, Firefox).
Thank you!
probably the classic example of this particular gameplay mechanic is crimsonland (2003, 2014), on which much of vampire survivors' gameplay is based.
Through the comments of the folks here, you’ve surely noticed that some people aren’t really ‘getting’ some of the stuff right off the bat. One of the toughest things about games is the visual communication aspect of it. Notice how little explanatory text most games have now — even the more low-bit style ones? Choosing coins as a mechanism is a deliberate communication strategy— it’s a game mechanic near everyone is familiar with so they don’t need explanation for how it works. A game’s (or any interface’s) visual components must be approached with the same mindset. A designer’s job is to take a step back and ask “what makes a [coin for example] look like a coin? What are the visual signals— from the most obvious, such as a metallic texture and being a round disk, that make people think it’s a coin? How do they tell it’s a coin and not a blank punch-out from a steel electrical junction box? If I take a bunch of pictures of coins into a photo editor and reduce the resolution to something extremely pixelated, what’s the lowest res I can go to while still realizing it’s a coin, and what about those coins are the few remaining pixels conveying?”
And deeper beyond that is figuring out how you can convey things like slowing the ball down without having a little icon. The cognitive load required to parse which icon you’re looking at and the implications of that is a bit much while trying to play a fast-paced reflex-oriented game. It doesn’t seem as hard as it is when you’re the one that chose the icons and configured their behavior, but especially in a deliberately casual game, people probably won’t take the time to become familiar enough with that system to push through the initial cognitive resistance. Identifying objects is a bit different than labelling a button on a control panel because it has context, physical form, and animation. A turtle might be a great way to label a slow-down button out-of-context, but maybe instead that brick could look gloopy and sticky? Conversely, maybe a speed up brick might be arcing or the shape of a lightning bolt, or vibrating like a revving engine block? Maybe you could have a little starburst where the ball teleported from and to when it teleports to visually orient the user better and on the trigger blocks include some of the graphical elements from that to identify it?
Like I said, if you’re happy with this as your personal project I’m not trying to say there’s anything wrong with it! But if you’re looking to refine the playability for broader audience, the visual design would be a great place to start.
Promo it to some Twitch streamers and bilibili/huya streamers in China
Instant success
I legit think someone will copy this sooner or later if you don't do it.
(Generally I think any "well known"/traditional game combined with rougelite elements can be a huge success nowadays)
I guess this is just the random aspect of a rogue-like, but it struck me as very similar to roguelikes. The fact that the experience is different everytime makes things more playable and sparks a certain sort of joy when the randomness variables compliment eachother in effective ways which you can design a game plan around.
> I think any "well known"/traditional game combined with rougelite elements can be a huge success nowadays
This is basically the entire thesis of slay the spire and why its massively succesful.
I feel compelled to note that you can also put the front rank in random positions without changing the game.
https://gitlab.com/lecarore/breakout71/-/blob/main/app/src/m...
Here's a small but very frustrating bug report: if you click on "Menu", then "Unlocks", the individual unlock items are clickable. I expected clicking on them to bring up a more detailed description, or something. But it actually just instantly resets the game, without asking for confirmation.
Anyway, what a refreshing twist on an old fav. of mine. I dont even know what the console was called, but my cousin had this on an Atari cartridge thingy. Years later I wrote my own in a 4GL that no one will ever have heard of, but I never captured the feel of the original. I think this exceeds the original, well done!
I had one level completed that showed 0 out of 0 and 0 in 0, or something like that. Also an occasion where I got to pick 3 upgrades after a single level, felt like god mode or something hehe.
On my old FF(esr) it fails at ctx.fillStyle = currentLevelInfo()?.color || 'black' (game.js 148) expected expression, got '.' which is what most sites these days seem to use to crash my grumpy old browsing.
I'll give the last brick another run, thanks.
The '+1 choice permanently' is maybe '+1 choice until run end', I knew it sounded too good to be true hehe It would be nice to see which level I am on between levels since that influences choice. 11,531, but more than 10k score from a single level in a few seconds, but it was seriously overloaded! Might be worth to merge 50 coins into fat coins when that happens? The +1 level shows level count only sometimes. mouse/paddle gets stuck sometimes, not sure on this one, maybe out-of-play could pause? until back within the play zone. I got a catch rate 119% I think I had a level with caught more coins than 'out of n' sturdy? bricks was a fun pick with 3 balls, oopsi!
In summary, still hooked.
I try to resist playing more because I reached Worms and realised I ran out of perks. Well done again, and best of luck if you commercialise the game.
PS and if you click your username in HM you can access all your comments, it might be easier searching for replies.