Controls

S key to start/stop (pause)

left/right arrow to move paddle

-or-

move mouse

Cosmic Breakout!

A Mintbean Hackathon Project, August 2021

TL;DR

  • Languages: JavaScript, HTML5, CSS
  • Control: keyboard & mouse
  • Gameplay Tweaks:
    • Ball decreases per paddle hit
    • Ball increases velocity per paddle hit
    • Lives lost if ball disappears (< 1 pixel) or ball misses paddle

This is a vanilla JavaScript project. It draws all objects to the HTML5 canvas directly without use of any JavaScript packages or pre-rendered sprites, save the background image.

Twists on the classic version include reducing the size of the ball and increasing its speed each time it strikes the user-controlled paddle. This causes variation in the directionality because the center of the ball object changes while the X-Y shift remains the same. Also, the ball might wink out of existence if it becomes too hot and too dense for our universe. You might want to weigh sacrificing a life before it gets too fast or small or beyond your control. The choice is yours.

Tip: Enable Web Developer Tools to see ball sizes reflected in the console.

It's Breakout! (But Why?)

Hackathon, my plans!
I must become responsive,
.container-fluid

This is my second hackathon. I didn't finish my first. I let grand ambitions create grand frustrations the first go-around. I went through a series of starts and restarts in a framework I had put on the shelf for a while. I took my lessons from that attempt, dusted myself off, and looked forward to this challenge. When the word came down that it was a 2D game I felt a bit of relief—I've made a few 2D games. I would have a couple in my pocket if all else fails. Let's do it!

"Your game's frontend must be built in JavaScript or Typescript."

Ah, ok. Look, JavaScript is not my favorite. TypeScript? I like that more, but I hadn't used it in a while. This is going to be a little like the first hackathon after all, in that I would be dusting off some old notebooks and getting back up to speed. Things started well. Dare I say I was having fun, until I hit some old frustrations.

One of the reasons I'm not a huge fan of JavaScript is that there are loads and loads of flavor-of-the-year libraries, frameworks, and packages. Most of the time they exist for good reasons and solve problems, but a lot of them seem to have a short shelf-life. I spent a great deal of time in "tutorial hell" for JS packages and all I seemed to get was this lousy Github dependabot yelling at me about critical security updates after six months.

I'll try and get to the point here: I had explored a few JS libraries for this project, hoping that I could repeat the successes I've had with PyGame. I tried MelonJS, PhaserJS, and KaboomJS and a few of their project template setups from Github. After cloning, reading the notes, and running npm install my terminal was full of "deprecated"-this and "severe warning"-that. I shudder to think of the time spent just trying to sort through error warnings.

Nuts to that! It's a one-week project and I've got my own errors to create and troubleshoot. And just to add this: I am developing the project on a laptop that qualifies as a slightly over-powered potato (an AMD A9 APU if you were curious). All of these factors in mind, I decided to follow the tried and true KISS principle. I'll whip up a basic game that has been done a lot (with a lot of knowledge base content), put some spin on it, make it with three files. A retro game with a retro site.

It could be prettier, but it could just be sitting on my machine going through refactor after refactor without being submitted, too. You know: a coding project!

A Little Redirection

Direction set: no dependencies. Pure vanilla JS that draws to the screen. I had decided on doing a hybrid of two games I love: Asteroids and Missile Command, perhaps with a veneer and story inspired by The Expanse books. I haven't done much with HTML5 canvas, but it was fun to draw shapes, especially just with stroke(). I have a love of "laser line" (read: "vector graphics") games like the original Star Wars 1983, Tempest, Asteroids, all things Tron.

Quickly I got hung up on the math. You'd think that making a stationary gunner position would be easier than a ship moving in two-dimensional space, but for this project...not so much.

OK. Time is running out. Back to the rules.

"You can build any game you'd like. Whether it's Tetris, Super Mario, Civilization, Diablo, Slime Volleyball (remember that?), or just a ball bouncing around on a screen, ..."

Bouncing ball? Bouncing ball, you say? I used to spend loads of time playing Breakout! And it is a lot less trigonometry!

How to add my own spin? Let's give it a cosmic vibe. Here is the story: the ball bounces into the brick, which is a bit like a monolith from 2001: A Space Odyssey, but more specifically, 2010: The Year We Make Contact. Those monoliths increased the mass of Jupiter, turning it into a second sun. How about the bricks "add mass" to the "star", which starts off large and cool (as stars go) and as the ball/star adds monoliths/bricks and bounces off the paddle it increases its velocity and mass, burns hotter, moves faster, until it gets so dense it causes a singularity.

That's my imagination running wild. It's sort of reminding me of the lore around old cartridge games that just couldn't tell the whole story with so little storage. With more time and better math skills I could probably make this a little more grounded in reality. But I'm not an astrophysicist; I'm trying to participate in a hackathon. It is nice to think of those possibilities though. If anything it gets the creative juices going. I can start to see how deciding on features can be so agonizing for game developers.

I looked at what stars do in the color spectrum when they get hotter.

List of subjective colors of stars (cool to hot)

  • faint red glow
  • dark red
  • bright red, slightly orange
  • bright orange
  • pale yellowish orange
  • yellowish white
  • white
  • blue
Source: Wikipedia: Thermal Radiation
Source: Colors of Stars | Astronomy
Source: PHET Blackbody Spectrum

This is great stuff, but the sources listed color spectrum in Kelvin. It turns out it is pretty tricky trying to convert color temperature in Kelvin to hexadecimal. So in the end...it's a best guess for this game. To the Color Picker!

And after too much time, here we go with the colors:

  • faint red glow
  • dark red
  • bright red, slightly orange
  • bright orange
  • pale yellowish orange
  • yellowish white
  • white
  • blue

So here we are. I have a game that works. The "sun" gets hotter and denser. It will wink out of existence if it gets too "dense" (< 1 pixel). The boring part was that the initial trajectory was set, so I randomized the trajectory setting in a way that adds variation without making wild changes. There is some refining and tweaking I can do, but at this time I have a game that I like playing, and that is pretty cool. The JS file (yes, one!) is long, but not outrageously so, and I've added enough notes that I think it should be pretty readable.

This exercise has been a lot of fun in that it illustrated just how much of an impact small modifications can make in gameplay. Bump up the speed a bit or set a different trajectory and suddenly you've either made your existing platform way more challenging, or way less fun, or more stimulating. I'm also glad to have done it in as basic a way as I could. It is a retro game and it is made in a retro way. This was like working on a 2-stroke bike. It was dirty, obsolete, and yet a joy.

If I pick this back up I'd like to make it more like a version that was on the second-gen iPod Nano, and do it in a way that allows bricks to be hit three times before disappearing. I'd also like to implement levels, but for what I have after a week (technically less, I suppose), I'm happy to put this out there.

I hope you have fun!

Richard Sandrok

Bugs

  • Scoreboard shifts -X direction when redrawing after the drawSingularity() function

TODO

  1. Move the scoreboard off the canvas
  2. Create directional reflection on sections of the paddle
  3. ???
  4. Profit