OK, last one, I promise. My second Javascript game is break-out.
Its just five levels, the first 4 introducing each type of block, and a 5th mixing them together. If you want you can change the level = 1 in the Breakout constructor to level = 4 or 5 to just to more interesting level if wanted, or can create your own in the levels array.
Firefox for some reason runs a little slow and injects a static pop at the start of every sound, and didn’t support roundRect, so Chrome seems to work better. If anyone knows why Firefox is messing up the sound I’d be curious to know. I hope codepen doesn’t slow it down or delay sound.
I really enjoy making these games, but think its back to the curriculum for me to study more pandas and numpy… need to make myself more employable, don’t think break-out is going to impress people in an interview.
Thanks… level 5 can get quite hectic I’m also proud that all the sounds are made from scratch… the bricks breaking are me dropping a handful of clay sculpting tools on my desk.
Yeah, those come from just playing with frequency and noise in a sound generator to get the sound. Didn’t spend a lot of time on that, kinda why most of the music is phone tones, haha. The ball sizzling sound is just crunching up a napkin next to the mic, lol.
The collision detection fails sometimes and the ball goes through the bricks but other than, really good!
I also need to take notes on the audio part because I tried adding some SFX to my Pong game and there was considerable audio delay and Google drive ended up blocking my codepen game because of too many requests smh
Yeah, I noted the failure of my collision detection in the intro window… its simplistic and I believe the problem is my use of division to calculate a few things which results in fractions of a pixel allowing on occation the ball to slip through, but told myself by weekends end I needed to start another FCC Lesson, so decided to leave it for now.
Regarding audio, my research didn’t find a definitive answer to the audio lag… mine was pretty bad. What I ended up doing on document loaded is to run a loop that loads, mutes, then plays every sound. You do get an error that the sound can’t be played because the page hasn’t been interacted with yet, but that doesn’t seem to matter, the sound ends up getting cached, and when the game starts the lag seems non-existent for the most part.
Hey @kinome79 this is a very nice job. Just a few suggestions off the top of my head (if you are interested in working on this further).
You can click the Continue button on the opening pop-up modal with a mouse and you can move the paddle with a mouse but you can’t start the game with a mouse (you must press the space bar). I think you should make this more consistent and allow a way to start with the mouse. Would this also allow touch screen users to play the game?
Anything that makes sound should provide a way to at least mute the sound.
Speaking of sounds, since you are using classes, I’d probably make a Sound class and use that to manage your sounds. Preload your sounds as you are doing but create a new Audio object for each sound during the preloading and then you don’t need to keep creating a new Audio object each time you play a sound. This might help with any sound lag issues that remain.
Thanks. Those are all great points. Now that you mention them, they all popped into my head at one point, but got pushed out as I got distracted with other tasks… the importance of a to-do list. As they are good ones, I’ll squeeze in some time to make those changes sooner than later. Not sure if touchscreen would kick of mousemove events when dragging a finger… if so, guess it might work on mobile.
Regarding creating sound objects ahead of time, I did that initially, but the problem was a single Audio object shared by multiple elements would only play once at a time(as far as I could figure anyway)… if you hit two blocks in rapid succession, only the first one would make a sound, as the second one won’t play if the first play request hasn’t finished yet. To overlap, each block needed its own sound object, and I attempted preloading each block with a sound, but that resulted in a long freeze and lag at the start of the game. I considered loading a more robust js sound library to handle sound rather than HTML Audio objects, but as I set a time constraint I decided would just make it work with Audio.
Ahh, I see. It has been a while since I created my drum machine, so I couldn’t remember exactly how I loaded the sound files for that. Now that I refreshed my memory, I think you would want to make use of the Web Audio API, which should allow you to load the sounds asynchronously so you don’t get that lag.
