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.
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 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!
Thank you. Making coins looks like coins doesn't require adding text, so i'll definitely do that. And yeah, it's not so easy to convey upgrades effect without text, but at the same time at that point you kind of want a bit of rest so reading is ok. I really dislike game that take forever to load and show pointless menus before letting you play.
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.
I like the colors of the balls and kind of appreciate they don't look like coins. May be try showing a number going up over the paddle when a coin is absorbed
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.
Yes, will do, this is definitely the top thing to change
As a counter, it made sense and looked fine, they have weight and fall like they ought. Also having something interefere with the ball makes the game more difficult, but you added meta progression as well as per-run progression.
As a huge fan of incremental games, I liked it. I just don't like brickout, haha!
This is amazing. I started playing it with my morning coffee and somehow it became 1pm...
Despite what other people commented, I really liked not really knowing what happens with some (most?) of the updated and having to try them to understand what they do and how to combine them. The last part is especially true: it was just SO SATISFYING when I realized that a perk I hated became my favourite once I was able to pair it properly and catch waterfall of coins :)
One thing I still don't get at all are the white and red ball "paths" that briefly appear from time to time. I don't get what they represent nor how are they triggered, especially as it doesn't look like the ball will actually do that exact path after it hits the puck (if I don't move it). It's a little annoying for the red one, that resets your coin counter, because I can't understand if I can avoid it somehow or do I have to take it as a "random debuff".
Thanks. I guess one perk i could add is "3 random perks" where you have to figure out what you got haha. The flashing lines you see are signaling that you missed the bricks and didn't hit any. That will reset your combo. If you manage to never miss in a level, you'll get and extra upgrade and choice. If you miss less than 3 times, you'll just get an extra choice.
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.
Silly me, I didn't noticed menu, I was trying to press F instead.
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.
Pointer lock is now in the options, it also hides the cursor, let me know your thoughts. Fullscreen mode should be toggled with the F key, or in the menu.
On Firefox android, I don't get fullscreen after adding to home screen. Not sure the cause. Slightly better on chrome but there's still some browser UI shown. I guess it needs to be a configured as a progressive web app. That would be amazing to maximise screen real estate
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.
Pointer lock is now in the options, it also hides the cursor, let me know your thoughts.
That's be an option soon :)
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 just spent an unintentional few hours playing this game; it's genuinely great.
I will say that some of the color combinations were a little punishing. White balls on a white background is a lot. Some of the perks have very murky upsides; having the ball change color isn't ever an advantage, so far as I can tell. It would be nice if the perks had mouseover explanations. Even after hours, there's still a few I have no idea what they do.
Every time I bounce a ball, there's a -1 that doesn't seem to impact the score. What's that about?
If the arcade version of Breakout had had a skill tree, Nolan Bushnell would likely be richer than Richard Branson today.
Some of the perks seem to be downgrades or maybe they require synergy.
Compound interest will tank you combo… unless you use magnetism (necessary) and viscosity (very helpful), at which point you get exponential bonus going.
The perk that gives you more bonus the more bounces your ball does seems like it could be good, but it resets your bonus when you hit the ball with your paddle, so actually it is streak destroying. But maybe there’s some hidden combo with another perk?
Yeah, there are a few footguns in here. Most bad perks are not so bad once combined with sapper+pierce+puck control ball + multiball + bigger explosions because levels finish in 2 seconds anyway
Speaking of finishing maps in 2 seconds—it seems to me that having the number of maps be the thing that determines the run length could be sort of limiting to your design choices in powerups. Enough kaboom and the run will just blow through the screens in an instant, and your run will be over before you can fully enjoy in your overpowered nature.
It could be interesting if time was a component to the whole thing instead. Look at Risk of Rain for inspiration, the game gets harder as time goes by. You have a finite number of power-ups that you can unlock per map, so the player is incentivized to try and keep progressing through the maps at a good rate.
In your case, maybe the player could “buy” a +1 map bonus for their run using coins. The cost in coins could be influenced by the current time and the map number. Then, the player will have to choose between strategies that slow them down but get more coins, and strategies that let them smash their way through maps.
It's also worth mentioning that pierce is likely OP to use gamer parlance. It was the perk I would consistently choose over all others, for good reason; nothing else comes close to upgrading from a knife to a bazooka.
Thanks, yeah i need to work on a deeper level of help for the curious players that really want to understand what's going on, without adding a wiki ^^
You are a GENIUS. This game is so well done! Instant add to my home screen.
For me (Android Chrome) until you click, ie hold and release, the music doesn't play. So I went through a level in silence and got to hear the great sounds only after my first upgrade.
I love the combo of breakout and the homage to vampire survivor upgrades. Mentioning both in the title made the coin and progression mechanics already familiar and comforting.
Btw Realistic coins seems a little like skeumorphic UI design... The bricks and paddle don't look like the real world objects and to good effect.
Thank you. I didn't try chrome on android much so I'll see how that goes. I'm going to guess that clicking the upgrade buttons was enough for chrome to allow me to play sounds, but clicking a canvas wasn't. Coins were initially just glowing colored circles but nobody understood they were coins, i went a bit too much to the other side, i'll find the right look eventually :)
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.
Hello,
This a tremendously good game, very clean in all ways that matter. Merci beaucoup!
Below is me wilding out a bit, feel free to ignore. The take home message is: great game, thanks!!
I do however wish for two things down the road:
More focus on the run
A) some kind of tracker for where you are in the run (level 2/10)
B) a perk that lets you chose (2-4 choices) what level to go to next (so you can pick ones you like OR search for hidden combos)
C) a perk that lets you prolong the run with 1-3 levels (making it easier to score higher and also to look for hidden combos)
.
Some complexity to the unlocking system
Since you say you are inspired by Vampire Survivors I think there is a lot of space to have more complex unlocks.
Like having levelled a perk to 3 unlocks another perk, 2 level 2 perks can combine to a different perk. 3 specific perks combine to a new one, etc
Completing a set of levels unlocks a final level in the same theme.
Unlocks based on misses per level and/or run.
Unlocks based on coin-catch percentage, obviously 100%, but also others.
Even time based unlocks (completing all levels in a run under X sec, completing every level slower than the previous one, or Mario style time unlocks, so ending on 11, 22, etc)
Merci for the feedback.
A/ I had a current level display before, but now the menu is in its place. I guess once you pass level 1 i could display your current level instead of "menu" at the top right. I also want to show the score and multiplier, i'll have to do hard choices. B/ Yes, letting users pick the next level is a great perk, it's a bit of a code change but not that hard, i added it to the possible new perks list. C/ This perk already exists (menu/unlocks/+1 level) but you need to score a bit to get it.
I've played a lot of nova drift where the is a lot of complexity to the upgrades system in-run. In previous versions of breakout 71 you would permanently unlock perks level by level but that was a lot of code and not contributing much to the fun, so I got rid of it and you for example just unlock all 3 levels of "extra level" at total score 13000 (all run scores summed).
I did restrict some perks about ball to ball interactions (ball_repulse_ball, ball_attract_ball to having first picked the multiball perk) because otherwise they'd do absolutely nothing.
The misses, coin catch % and level clearing speeds are already tied to an in-game behavior of having more options and being able to upgrade more than once after a level, so I don't know if I'd also add another thing that depends on it. Keyboard users (where it's really hard to not miss 50% of shots) will be mad :)
I never heard of Mario style time unlocks, that sounds like silly fun. You get something for finishing the level in a sepecific amount of seconds, no matter how many minutes?
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.
Pointer lock is now a thing, you can turn it on in the menu.
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).
Ah yeah, of course, sorry, I didn't think it through. i'll add the mouse lock option soon
That is crazy coincidence. i just released demo my rogue like breakout clone on Steam next fest. i picked a more of a bullet hell/shoot em up kind of approach. Faster the better.
I had great fun playing yours. Sound design is especially good.
https://store.steampowered.com/app/3499470/Rogue_Bricks_Demo...
Your coins look like coins, i'm a bit jealous and will do the same :) So you're going for a longer play style, with many levels, and a character build where you have a very strong ship at the end ? I think trying to tell stories around such a simple mechanic with nicely designed levels and background is a great idea ! If you release out of steam at some point, I'd love to try it. I'm allergic to that platform and its constant updates, my gaming pc does not connect to the internet and will stay on windows 10 forever.
here i have updated it to latest. https://arcadenest-games.itch.io/rogue-bricks
I'll give it a try. Itch quarantined your page, i'm not sure why. I don't care because my gaming pc is airgapped but you might want to look into it. When clicking download i got this :
WARNING: This Page Has Been Quarantined
Our system has flagged this page for additional review due to potential suspicious behavior from the page owner.
If someone has asked you to download from this page and you don't fully trust them, or their behavior isn't what you recognize, then we don't recommend downloading this file until our team has reviewed the page.
Password-protecting files or pages is a technique often used by scammers in an attempt to block virus and other security scans from detecting malware. Do not trust password-protected files unless you fully trust the uploader.
Learn more about the "Try my game" Discord scam.
Thank you. It is kinda like Tetris, blocks falling constantly. you have limited time to get strong and destroy blocks.
i struggled greatly on balancing. My solution was to make director behind the scenes to make sure player never gets bored. Downside is; game is quite hard for non breakout players. Aiming is crucial.
i did release the demo on itch.io But it lacks some features. i will update it tomorrow.
Love the fact that on mobile if you stop touching it will automatically pause!
I figured this can be used to cheat a bit. The paddle warps to the finger instantly on touch. You can use the pause to catch all coins
Yeah, I'll try to alleviate that by making the pause take more and more time to happen when repeatedly use it in a level.
Interesting. I was thinking it might lead to some cool emergent mechanics, especially combined with puck control ball, but I can see that being suboptimal, especially in how it introduces differences between mobile and mouse gameplay.
Great controls. Truly appreciate the effort to understand how a this game may be played on mobile. The upgrades are a nice touch. Maybe add some boss battles?
Oh, that could be really cool, like a last level that starts scrolling down and go faster and faster until you die. But that's for a future major version of the game.
Maybe have an enemy that throws balls and you just hit them back to hurt them. Have a health bar that you need to deplete by hitting them before being able to pass the level. Dunno, might add some kind of story mode to it. Beating the boss would give the user some kind of upgrade or special weapon.
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.
> game stops completely as you level up, you get to think and choose an upgrade in peace, and then the frenetic action starts again
probably the classic example of this particular gameplay mechanic is crimsonland (2003, 2014), on which much of vampire survivors' gameplay is based.
Thanks for the precision. Never heard of that game. It's also made by reflexive entertainment, the makers of Ricochet Infinity, another breakout game. The (game) world is small.
Lovely little game.
It wasn't immediately obvious what the coins were for, as in i would make it so that you spend them on upgrades it ties much more clearly into why i want them.
Easy to add more special blocks i.e double ball, multipliers etc. level design could become more interesting / think about multiple level stacking, so i feel progress.
XP system is an easy add to unlock some core features maybe a backpack/weapons, things that add simple bulk to the game.
In general a great prototype, watch people play the game and correct peoples first time user experience. You might also need to add a few words to the very first round to help people understand the goals!
Thanks for taking the time to leave me feedback. I'm not sure which version of the game you played, I'll assume it's the v3. There are unlocks, tied to the total score accumulated. "Double ball and more multipliers" are unlockable upgrades. There are 7 levels per run and the upgrades stack during your run. Those levels are picked randomly from a pool of 91 unlockable levels (admittedly, some are a bit basic). I will indeed add a bit more text, but every word comes with the cost of making the experience more like a book and less like a game.
This is fun!
A quick note that I think I found a way to cheat that you may (or may not) want to patch (though I’ve still enjoyed my plays while “cheating”).
I’m on iPhone, and can simply lift my finger to pause the game. Putting my finger back down immediately transports the puck to where my finger lands.
So if you just keep tapping slowly where you want the puck to hit a ball or catch coins, you can easily catch most coins and still hit the ball(s), and play the game in slow motion.
I was pretty quickly able to clear a run while collecting most coins, and it became very easy to make it through without missing a ball.
I guess one fix would be to not immediately transport, and have the puck still animate towards where your finger lands.
But still, I imagine it’d still be easy to never miss a ball, because of being able to simulate slow motion. So you may need to drop the “pause on lift” altogether, and just leave the puck where it is but keep the ball(s) and coins moving.
Good point, yeah, it's not hard to exploit this, but as it's a single player game, cheating just hurts you. On desktop, you can open the console and write score=100000. However, i see how the challenge feels less interesting if you have to actively avoid cheating. I think i could add a slower and slower puck move as you pause the game more and more times in a run, this way that "trick" quickly looses interest, while you still get to pause the game if you reached your stop in the metro, and won't be punished for it.
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
Battletris was x11 on sparc I believe.
Yes -- great memory! Amazingly, Adam and I talked about BattleTris on Oxide and Friends just two weeks ago[0] -- and specifically how BattleTris almost prevented ZFS from coming into being. (!)
[0] https://www.youtube.com/watch?v=VbLz79trgz8#t=14m12s
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 :)
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.
awesome, fixed for brave thanks. I now get to see the 'run finished' page, but feels strange, I played 4 or 5 levels and then run complete, then another 4 or 5 levels, and reached smiley, but looks like you lose upgrades each time. Anyway lvl 3 ball piercing with 2 balls was started to feel like a bullet shooter with coins exploding everywhere, great fun!
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.
Ah yes, I guess the a?.b syntax is also quite new, and as a grumpy many myself, i didn't feel like adding a js preprocessor. This syntax is used 25 times, i think at that point it would be more reasonable to write my game in typescript or something else kids do these days haha. The run should complete at level 7, unless you extend it with the "+1 level" upgrade up to three time. If you stop at level 4 or 5 it means you dropped the ball, or there's a bug. And yes, once the run is over, you loose all upgrades, however some new ones are unlocked and added to the "pool", same for levels, so you'll see interesting new things in the next run. The "pick 3 upgrades" should happen when you play very well and clear the level in 30 seconds without missing any coins and without ever shooting nothing (well, then you'd get 4 upgrades actually). If the game bugs out and ends the level immediately, it will effectively consider you did all those things. I don't have telemetry, so I have no idea what could have caused this. Can you tell me the OS, browser name and browser version ? I'll give it a try on browserstack. Or maybe even better, open the dev console and see if there's some funny business happening over there
I'm glad you have no stats, especially for hours spent playing! I have a better feel for it now, and still really like it. Although it can be a bit jarring to have crazy upgrades and clear a level in 3s, only to have completed the run, and be back to 60s+ level 1. I worked out the extra levels thing you mentioned (it was probably always 7 but felt shorter because of the fast pace!) and I hit 10 levels on a few runs, but the text was wrong a couple times eg. '+1 level lvl 2 - 1 more brick replaced by a bomb'. The new coins are cute, although I also liked the spray of colour on the old ones. The repulse is fun, although I had one ball bouncing left to right a few times, before another one shifted it, but could imagine a stuck ball had it missed. 6149 my top score so far. Do those scores/stats persist between plays, otherwise I might never be able to close the browser again! Right, 'one last game' to see what wind is all about.
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 :)
Great stuff!
Small bug - the text for +1 level is wrong past level 1. It uses the sapper text instead.
Bug fixed, nice catch, thanks !
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 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.
Misspoke on my part, by 'audio' I just meant the vocalizations, which were kind of cheesy but also kind of neat!
Oh, that only worked on some devices because it used the tts api of the browser only
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.
Isn't the original Breakout copyrighted? There seems to be many clones of the game, and also in large platforms like Steam, I wonder how that works.
(Not buzzkilling anything, just genuinely curious.)
IANAL, TINLA
In intellectual property law you have a few different concepts including:
- copyright
- trademarks
- patents
Copyright law would generally prohibit ripping off the original assets from another game or copying their code, but it would to my understanding not prevent anyone from making a “clone” of another game as long as the assets and the code are your own. And as long as those assets of yours are actually distinct looking and not the same look or too similar to the original, and your code is your own and not something you wrote by reverse engineering the code of the original yourself. Also there is a concept called “clean room implementation” that is sometimes used where they do reverse engineer other people’s code, but the person or people doing the reverse engineering and the person or people implementing the clone are separate people and the people implementing it only look at documentation from the people that reverse engineered it without looking at any of the reverse engineered code itself.
Trademark law might prevent you from using the name “Breakout” in the name of your clone, if there is a trademark on that. On the other hand, if there was a trademark but the name has become a generic word for the thing, the holders of the original trademark might not be able to prevent you from using the name even so. I have not looked into the trademark status of “Breakout”.
Software patents might prevent you from copying mechanics from a game. For example if there is a patent relating to how Breakout works. I haven’t looked into whether there are any patents on that, as I am not planning to publish any Breakout clone myself.
I assumed that the game was so old the concept was up for grab, but there might be some obscure patent. Given how many successful commercial games were made based on this concept, I'd assume the patent trolls would have killed the genre if there were any with valid patents to show. I might be wrong ^^
“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.
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.
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.
I didn’t have to disable mobile mode to move my fingers over the browser navigation from the app and still control the puck. It’s very replaceable. I like the statistics. Perhaps one that shows a histogram over all games and where you rank for score etc? But top tennis is generous.
In the meantime i found the best way to play on iphone safari is to tap aA/hide toolbars. The histograms shown are your top 10 games. I limited the list because after a while the earlier games and 10 seconds run just pollute the histogram by stretching the interval. A separate list of just the score could be nice, but i don't know if it's so interesting to know you player 30 or 40 games better than the current one before, right ? The goal being to reach high scores, i thought i'd show how they compare to their best version of themselves. There's no global leaderboard because i don't want to maintain such a server and the game is trivial to cheat in.
Nice game!
I found myself putting my finger directly into the paddle many times. Instead of the message "Push here to play" you could create a more obvious UI element where one should press (something like the grip part of a slider). Maybe even make the grip glow when you push it for funs :-).
Good idea ! Some sort of handle on mobile that's inviting you to "grab" it. good point.
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
What are people getting for scores anyway? Broke 8k just now. The abilities stack nicely.
Ah, and then I had a 48k run. Compound interest is about as powerful as you’d expect.
My top is around 10k so congrats haha
I did exponential+magnet+viscous+some boost to speed up the early exponential growth
It is quite strong, but the torrent of coins is pretty satisfying.
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 tried this on the morning and noticed that you've already taken some of the suggestions folks make into account. Great job making it so playable on mobile!
Yeah I try to show that I care about feedback. Plus, it makes further feedback more interesting.
Is the ball supposed to change color when it touches the bricks? At some point this started happening which made it nearly impossible to track when there are hundreds of similarly-colored coins bouncing around the screen.
It happens with the "picky eater" and "color pierce". With picky eater, you need to hit bricks that are the color of the ball, and color pierce makes a red ball go right through red bricks, and change color when it hits a different one. You could disable both by enabling color blind mode in the menu. This will be less of an issue once i make coins look like coins and all gold.
Any more details on how you made it, tools, etc? It's a lot of fun and I appreciate the gitlab link, just curious about the tooling and process that got you to such a great point.
It's all handwritten js, lots of trying the game and figuring out what's fun, what's not. I don't even use a bundler, right click / show source will show the code I wrote. I made an apk for it and added a small deploy script that ssh to my server and pushes the code. The code is written with webstorm, but you could use anything. I've asked mistral AI for help when it came to making procedural sounds, the rest is just a lot of trial and error. I have a small ui to make levels and icons that's also handwritten.
awesome and inspiring. really enjoying it. Thanks!
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.
Sounds like a description of the idle breakout genre? But I might be wrong. https://www.hoodamath.com/games/idlebreakout.html
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.
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.
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.
This is a fun little game. Would make a nice app. I would pay a buck or two for this.
Thank you. I plan to make a paid package version later, but keep it exactly the same as the free version.
Very fun. Reminds me that I wanted to check whether Peglin has had a major version release.
Oh I think my Girlfriend would like that game, thanks for mentioning it.
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.
Cool! I can't figure out how to play with the keyboard though. Only mouse pointer works for me.
Keyboard play is now supported. Use left/right arrow to move puck, shift+arrow to move it faster, space to start/stop, M for menu, S for score menu, and up/down arrows and space/enter/escape to navigate menus.
Yeah, playing with keyboard it would be hard to be precise enough and fast enough. i'll work on that thought.
v2 works instead
im hooked!
did die a few times due to dragging the mouse out of the client area... is there a pause button if someone is trying to talk to me and i cant look away?
Oh yes, basically you can click anywhere on screen to pause
discovered lmb is pause
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 :)
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.
Certified 5 minute banger while I waited for tests to run.
That's the spirit, I actually also play it while tests runs. I used to play nuclear throne for such short intermissions, i liked how quickly it started up, the lack of filler, variety and limited run length. I just tried to get a similar feel from a breakout game.
Very nice indeed… I wasted a lot of time playing on it!
Really sorry about that haha. it's meant as a short game to play when you want a break, but i've found myself replaying a few times and really not getting much done.
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
I like the explosions effect and the sound effects of your game. My engine is very basic, its main goal is to be small, fast and simple, the whole game fits in 100kb compressed. I'm not sure if you realized that the goal of the game is to catch the "particle effects when the block is broken" (aka coins). They didn't look enough like coins before for this to be understandable. The size of the blocks depends on the level size. At the start of the run you get levels with a few huge bricks, at the end you get levels with tons of smaller bricks. I'm confused about which "little effect when the ball hits the paddle" you are talking about, it might be something related to the perks you got.
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.
You mean the small particles that fly away for 150ms and fade away after you break a brick ? You could disable them (and many other effects) with "menu/basic graphics" if you want, but this never prevented me from seeing what's going on clearly.
My mistake. In addition to the same colored coins falling out of the bricks, I thought there were same-color brick pieces.
I like the way the changes you made look already! Has a better feel to it.
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.
A lot of fun! I enjoy the subtle coloring and changing background texture.
It's a bit confusing at first to grasp that one upgrade is applied randomly at the start of the game (I think?). The first few times I played it felt like the rules were changing and I couldn't figure out what contributes to the score multiplier.
Also, when you get multiple upgrades, the text reads something like "You caught 0 coins out of 0 in 0 seconds (+1 upgrade and choice). You missed 0 times (+1 upgrade and choice)." which is a bit confusing.
Thanks, i put a lot of thought in the neon effects. Yeah, i'll have to explain that in some clearer way. The "You caught 0 coins out of 0 in 0 seconds" is definitely a bug, happened to someone else too, do you mind trying to reproduce it ?
I see the buggy text too (You caught 0 coins out of 0 in 0 seconds (+1 upgrade and choice). You missed 0 times .). Usually on the 2nd+ item selection screen.
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.
It's fun, but having to clear the last few blocks of each rounds is kind of boring. I'd see more of an endless wave of blocks descending from the top, and an upgrade screen popping up every xp threshold.
The last blocks are indeed a bit boring, but : - you can use upgrades like "puck controls ball", "Easy Cleanup" and "Wind" to make it easier - managing to clear everything without missing the bricks is rewarded with more upgrades and options, which let you progress much faster. I'll consider bricks falling from the top for an "end boss" level that just gets harder and faster over time until you inevitably lose the ball.
so fun ! great job !
Thank you :)
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.
Yes, here I was mostly trying to make the game sessions shorter, so first you have only one life not 4 or 5, and second you are limited to 7 levels (+3 extra with perks) to score as much as possible. From that, it made sense to pick the levels at random each run, because we lost the variety of going through 30 levels before game over. Then for the upgrade, i just copied what vampire survivor of interrupting the action to leave players time to think. I'm a huge fan of Nuclear throne and wish more games could be started in 5 seconds, played for 2-10minutes, and then let you go back to work. That's the real value of roguelikes for me, the short playtime (because dying after 10h sucks) and intense action with a bit of RNG forcing you to think.
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.
Haha loved that comment.
Thanks for your advice. I published on the play store and got 0 download. I'll try to get a good game and a few users, then bite the bullet and publish on stores. I don't think I can prevent copy cats, and the game itself is based on another game. Also, it's FOSS (AGPLv3), so this is a very easy target for an unscrupulous copycat.
Just out of curiosity, is this the cruz of packaging it up for Android?
https://gitlab.com/lecarore/breakout71/-/blob/main/app/src/m...
People will copy it even if he does.
I agree. I don't mind. I didn't invent breakout. Half of the value of my game is that it's free, ad free, lightweight and very easy to access anywhere, I doubt the copycats will be willing to do that.
Yea you can just be like the Banksy of game design. Put out a free game somewhere, easy to reach, people play it and that’s it.
First mover advantage
I published on the play store and got 0 downloads in a week. The game needs to be popular already to be noticed on those platforms. Same with steam, plus you need people to want it to even be lister. I'm not doing this for the money so dealing with the arbitrary requirements of various stores is low on my priority list.
[flagged]