just announcing that i’ve decided to start hosting some of my old coding projects on this site! i’ve started with one — just my old “breakout” clone, written in pretty shoddy JS. but cool to see it revitalized. i find that i was most productive and creative when i was in school still; feeling mildly in a slump right now, so touching up some old stuff. i hope you can find the joy i did when i made it if you fiddle around with it!
i’d like to revisit it more… add a leaderboard system so you can brag about your score, or add mobile support/onscreen controls. if i don’t get around to it you can yell at me forever
on a technical level it’s pretty simple, at least from what i recall (and quite GROSS too if you look at the source, which i should also expose! another item for the todo):
- load all “elements” — the ball, the paddle, the bricks. movement is handled by updating their css x, y positions on a timer
- start timer when start game button is pressed. use this timer value to incrementally speed up the game as time goes on (the ticks themselves physically get faster)
- detect collisions by using css bounding boxes of html elements
- if the ball and bricks have an overlap, hide the brick and invert the y-movement direction, and apply a random impulse in the x direction. this makes it LOOK like it’s bounced, but it’s obviously not reflective of real physics
- same deal for paddle and ball. the only thing that’s actually “bounced” is the y-movement direction
- if all bricks are cleared, toggle them all visible again and continue (also give player +1 life). if ball hits bottom of the game area, lose a life, and reset ball to starting position.
okay, that’s all i’ve got for this update. been writing a big yappy post, so hopefully i’ll finish that up soon. gotta ride this creative spark until it gives up the ghost or i do