Show HN: Breakout with a roguelite/vampire survivor twist
breakout.lecaro.meHi HN ! This is an open source project I've been working on for a while. It's actually the third breakout-like game I've built. I really like the simplicity of the concept, having just one input (the puck horizontal position) and a simple gameplay that gives a low skill floor.
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.
Release this on Steam for $4.99
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 learned about chess960 the other day. It's a variant Bobby Fisher invented because he was bored with "theory" (ie wrote memorization of openings and positions) and wanted a fresh experience. Its basically just chess but you put the back rank (non-pawns) in random positions. As a result you have to (or get to) reason through things from first principles each game.
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.
There's a variation of this http://reallybadchess.com/ -- I kind of like it because I don't remember all the classic strategies... many of these just need to be memorized.
> Its basically just chess but you put the back rank (non-pawns) in random positions.
I feel compelled to note that you can also put the front rank in random positions without changing the game.
People will copy it even if he does.
First mover advantage
Nice, I like the perk system. Played a few rounds. Quick thoughts:
At 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.
Both valid points. I colored the coins for two reasons : they are pretty and the perk "coins stain bricks" means that if a red coin hits a blue brick, that brick becomes blue (which helps with other perks like "picky eater" and "color pierce"). I think there could be a short text that changes once you perform the action, so "click to start", "catch the ball", "catch the coins for score", and "clear all bricks", then it would be gone once you finish the first level.
The game is great and clearly a lot of thought has gone into polishing! Congrats
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
The -1 numbers are when your coin multiplier drops, that part isn't really explained or intuitive. i'm not even sure of how to call it. It's the number of coins that will spawn when you break a brick, and is displayed on your puck. I guess if i displayed " 2 x " on the puck and made coins look like coins, everything would be a bit easier to understand.
I had this same thought; maybe just CSS to make them glow / glint a little? Or make the edges golden? I agree there could be a bit of juice on the coins. Or possibly the noise could be a little more clink/coinish.
Yes, i'll make coins look like coins, sound like them, and roll around. Then if you pick the "coins stain bricks" perk, they'll be colored like before, but by then you should already know what they are.
Yes. Coins should all be gold and spin on edge (so they don't present as just circles). Colored halo or trail can match the origin brick color.
I rather enjoyed that I got to make the discovery that the particles were coins, moreover, I enjoyed dropping STRAIGHT into the game without having to read anything or press any buttons. Lastly, this worked flawlessly on my iPhone, bravo to the work you did to make that happen!
“Add multiplayer” is of course the annoying request that every game maker always gets, but since you’ve already done it for v2–how hard do you think it would be to combine the multiplayer and the “survivors” type system?
Anyway, fun game. I liked that the perks slowly seemed to ramp up from small tweaks to total game changers as I accumulated/unlocked them.
I think that would be a good candidate feature for a paid version later. When starting v3, I decided to focus on game feel and finding the fun, and disregard everything else, so there's a lot I could do. I still want to make it deeper, and add basic QOL options to let everyone play it the way they like, before adding multiplayers or distributing in more closed gardens. I'm already very happy about the reception the game got here.
Fun game!
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".
Both good points, the message now says "Press and hold here to play" and "Slower ball: slow down the ball". English isn't my native language.
I love this genre of games, I use to play the Ricochet games (from Reflexive Entertainment) as a kid, a lot of good memories.
I tried it, I've been doing some pretty extensive research. I wasn't a fan of the art style, I prefer very minimal things. You might want to try LBreakoutHD (foss) if you haven't, it's clean and friendly in looks and follows the traditional formula. I really love their other game "swarm gold" though, it's also a very clean ui and control scheme with lots of potential. But it's about murdering aliens and there's fast scrolling, so my girlfriend doesn't like it all.
Amazing! Well executed idea and great example that less is more. :)
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.
Thanks for the feedback. Fullscreen is offered in the menu when "document.fullscreenEnabled || document.webkitFullscreenEnabled" is true. I've noticed it doesn't show in safari mobile, but you can trigger it by click aA / Hide toolbars. I'll look at the pointer lock, i could easily unlock it once you pause the game with a click, so it wouldn't be too intrusive. For the score, i'm thinking to put the score multiplier there instead, i'll experiment a bit. There's a life counter, in the sense that you start with 0 extra lives, but if you pick the extra life perk, you'll see 1 heart per life next to your score. The game being 100Kb, you can probably guess I'll pass the electron option, but Tauri could be considered. First, I'll just make the web app offline capable. Also, I'm pretty sure that "save page as / Web page, complete" would work on desktop and give you a usable app (YMMV). I personally dislike Steam (mandatory updates, slow UI, DRM, monopoly, online requirement), and never buy any game there, so it's not a priority to publish there for me, but I might put it there once I have enough interest and price if 4 euros. I'd rather have a good app on the web first, and deal with the various store's rules and painful UIs later, I'm doing this for fun after all.
Also need (great if): spacebar launches ball, L/R arrows moves bar.
Yes, that will come. But you have no chance to reach a decent score with binary like that honestly, it's like playing with mittens on.
I'm another vote for hiding the cursor. It's pretty distracting, especially early on in a level when there's still a lot of low-level bricks.
That's be an option soon :)
Really fun, nice work. Oops, I skipped the extra life, since it wasn't too clear I only had one. The destroy last brick didnt seem to work. It said I had +1 choice for only missing 3x, but I only received the coin choice. And missed ball gave me a 'list.findLast is not a function' (brave) and didnt run at all on my bit older FF, but not your fault, I lose a site a week at the moment, and I refuse to play the never ending updates game.
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!
Yeah, it's not clear how many lives you start with, but I'm going to guess people will quickly figure out that the game is over once the ball is lost. Destroy last brick was buggy (< sign instead of <= , silly mistake) but should work now. +1 choice means you get 4 options in the upgrades list instead of 3, but you can still only pick one thing in the list. +1 upgrade happens when you don't miss at all, by the way. Funny, my tests today crashed when I tried to use findLast, and I realized it's not as common of a function as I thought. I've just redefined it to let you play on FF LTS. I'm a grumpy Debian and FF user myself, but I have the latest Firefox because as a Web dev I need to reproduce the issues my users report.
There is an issue with mouse control (I'm playing with a mouse pad but the problem should occur with a regular mouse too): When you move the mouse fast it gets out of the control area and then small movement don't respond anymore until the mouse gets back into the control area which usually results in an overshoot.
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.
Thanks for the feedback. I recommend turning on full screen in the menu, until I figure out how to add mouse lock .
Full screen doesn't solve my problem (firefox ubuntu).
Does anyone know the url of the variant with multiple balls? Blocks have numbers and you get more balls the more you play. I cannot find it, is was on ycombinator news a few years ago.
This is super fun, and it works on mobile. Thanks for making it!
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.
I don't recall ever playing BattleTris, but Tetrinet is one that got passed around IRC a lot in the 90s. It was a blast. Seconding the notion that their gameplay is a good source of inspiration.
https://en.wikipedia.org/wiki/TetriNET
TetriNET was fantastic. My students played SO much of it in class after they finished their assignments for the day. We even made/used custom skins to improve visibility and thus gameplay
Yeah,the side by side "collaborative" multiplayer where you can mess with others was fun, but I decided making it fun in single player was a better first step, and multiplayer could come after. I can also more easily test and iterate on single player games. Finally, no need for a backend server if the game is just a static html file :)
It's pretty fun, but not in any way part of the survivor-genre.
Right, I wasn't really sure about that title either. I didn't play vampire survivor, but I saw footage where the game stops completely as you level up, you get to think and choose an upgrade in peace, and then the frenetic action start again. It inspired me to add this mechanic to the game, instead of the quick thinking required in traditional breakout, so that's why i mentioned it. I don't think I can change the title here, but if a mod could remove the vampire survivor mention, it would make the title more accurate.
Love the concept.
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.
I realize now this is a streak counter not a number of lives, which I think is even less intuitive.
Having lives, coins and streak counters outside the play area I think would be better.
So, the coins counter, aka score, is at the top right. The combo is on the puck, it's an important number because most of the strategy is about increasing it and catching the extra coins that fall. I agree that it's not the best place to put it on desktop, but there are fewer options on mobile. I'll see how it feels to put it at the top, or even replace the score with just the combo display.
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.
Very cool concept!
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.
Oh boy, I can see how annoying that would be. There's now a confirmation popup if you click an unlock while on level 2+. And I agree that an explanation there would make sense, i'm still wondering where to put the more detailed texts, for now they are in the readme : https://gitlab.com/lecarore/breakout71
This is actually a good game idea. If you keep working on it and polishing it, it could be a hit.
Thank you. I enjoy playing it during my programming breaks, and fixing issues as they go, to the point where it often derails me from real work. All that to say, i'll keep working on it :)
Very fun. But I don't understand why the UI got much worse between V1 and the latest version? You had tool tips, audio, better visuals, and everything in V1.
Anyhow, great job.
The V1 tried to combine real time gameplay and strategic thinking, so i added tooltips, highlights, etc.. to try to make that work. In v3 the two things are separated, and I tried to focus on mobile gameplay, with the desktop version being basically a scaled up mobile screen. There should be audio in both, what browser are you using ? The v1 had performance issues because of the use of a lot of css combined with canvas, the v2 is pure canvas and performs much more smoothly on low end devices. My focus for v3 was to make it fun and challenging for me to play it, while still being approachable for my girlfriend, who just wants something chill to play with and has no interest in high scores.
This is pretty fun. I enjoyed it.
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.
Ah yes, that must be a GC. I optimized the render function to not allocate, but i can do a lot of progress when it comes to reusing objects for particles and coins. I'm a React dev by trade, we're used to creating objects without a thought.
Very fun! Works great on iPhone. Neat that I can stop by just lifting my finger to take a breather. Fun multipliers! More to discover!
Yes, I'm and android user, but my girlfriend is on iphone, so I better make it work there too. Not going to pay the apple tax to publish a free game on the store though. have you noticed that you could disable the "mobile mode" in settings, and then move your finger over the browser navigation, and it still controls the puck ? Fullscreen didn't work last time i tried in safari but this gives you a bit extra space and time to see the ball coming.
Wow, very addictive loop! I instantly played a couple of rounds.
Fyi, the perk to self-destruct the last block didn't seem to work.
You are right, thanks, should be fixed now. It was a `remainingBricks < perks.skip_last` instead of `<=`. I never pick that perk so I didn't realize.
I noticed that too. Was very disappointed the last brick wasn't destructing. Otherwise fun!
I think it's an off by one error. When I got to level 2 of the perk, it ended when there was 1 block left.
Yeah, a < sign when it should be a <=
I like the idea, makes it much more engaging. Some things were a little confusing like the coins concept. Also sometimes the ball trajectory is a little wonky, not sure if that’s just me. Nice work!
Yes, I need to make the coins look like coins, roll around and sound like coins. I'm still not sure of how to convey the multiplier/combo idea. For the trajectory, the engine is homemade and well, let's say the laws of physics have been simplified.
Hi, cool and congrats on making a game! I also have a breakout clone in the works but with the twist that I'm doing my own complete 2D game engine for the game.
- 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
Just tried your version on Firefox on Android, but it seems to go into a reload loop (I keep seeing the Detenator loading page), then the device becomes unresponsive and Firefox crashes.
Ah, web dev, always a pleasure.
Agree on all counts.
Blocks can explode in place, but shouldn't rain as much (or any) debris that gets mixed in with ball and coins.
Fun! I really like the idea that you can have a simple game with simple graphics that's really compelling.
Thank you, the simple graphics derive from trying to keep everything procedural.
def package this and put it on the App Store before clones eat your lunch. Would happily pay a couple bucks to play this on my phone offline.
Thanks. I packaged on the play store (free). Nobody seemed to care, and it got 0 downloads. It's now on f-droid too, where I got a nice message from a random user. Maybe I should make a paid version for play store/app store/steam, while continuing to give the same game away for free on web and f-droid (it's OSS). I don't like really like app stores and their annoying rules and monopolies, though. And I feel like they don't promote good stuff, they only push adware in front of visitor because they get a cut of the ads, so even if I package the app and publish it (ad free), the stores will probably push the clones. I might eventually make the move, but for now I'm happy to make good OSS software.
The simplicity of controls makes this really good on mobile.
Works great on my device (Android, Firefox).
Thank you!
Glad you liked it. It's meant to be a fun way to pass time on mobile, and my main browser is Firefox, so I tested it there, of course.
The stereo sound effects shows the amount of care you put into this game. Thanks for sharing!
I made this game for my girlfriend, so it's literally a labor of love, haha. I'm glad you noticed the stereo effect :)
Nice work. Here’s some crit from someone with a game design degree if you’re interested in refining the visual design. If you’re happy with it as is as a your own little project, feel free to summarily disregard this comment!
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.
You're right, thanks for that feedback. Changing the looks and sound of coins is now on top of my to-do list. For your second paragraph, are you talking about the V1 ? This is where you need to quickly identify all sorts of pictures to realize what you need. I added tooltips and all, but then thought that it would be better to separate the quick action reflex time and the strategic choices, which is what happens in v3 with upgrade choices between levels instead of timed pickups. The coins in v3 look even less like coins, though.
Cool! I can't figure out how to play with the keyboard though. Only mouse pointer works for me.
v2 works instead
I like it, couldn't stop playing! I will play some more later today on possibly have better feedback.
Nice, thank ! Looking forward to interesting perk ideas (though I already have a backlog of those) or level ideas.
I need this on iOs, now
I could try to build the app on my girlfriend's mac, but more likely I'll see how to make a PWA that installs. For now you can combine "share / add to home screen" and "aA / Hide Toolbar" in safari to get and experience close to an app. Still no offline mode but that's just me being lazy, I need a pretty simple service worker for that to happen.
[flagged]