Hey you! Yeah you! The one with the face! Do you like falling blocks games? Do you REALLY like 'em? Well then do I have a game for you!
Anyone who has been watching stream lately will know that I’ve been on a bit of a falling blocks kick, so I decided to make a very belated multitasking game jam entry:
This is a collection of four classic falling blocks game that you can now play simultaneously for the first time! Press the menu button to switch between games and of course, if you lose one you lose them all!
This game is also 100% implemented in blocks! I know people were upset that my last implementation of a certain falling tetrominoe block game was JavaScript only, so please feel free to take this code and use it for whatever you want.
Post your high scores!
Controls
game 1:
objective - make solid horizontal lines to clear blocks
left/right - move
down - drop faster
A/B - rotate current piece
game 2:
objective - swap blocks to make vertical/horizontal lines of at least three blocks of the same color to clear them.
left/right/up/down - move cursor
A - swap the left and right blocks under the cursor
game 3:
objective - make continuous groups of at least 4 blobs of the same color to clear
left/right - move
down - drop faster
A/B - rotate current piece
game 4:
objective - make vertical, horizontal, or diagonal lines of at least three gems of the same color to clear
thank you! its still really hard but i find it a lot more difficult in a fun multitasking brain overload kinda way instead of the annoying not being able to interact with the right level in time way
Could you give a general overview of the code techniques you used? I dove into the code but blocks are hard to reverse engineer (at least for me). The tetraminoes for example, you have arrays arrays arrays arrays!
How do you set the timing on the block falls?
I see a lot of tile work, not so much sprites. Can you go into a little bit around why? “Hey I want to make tetris” people would probably very much lean into a sprite (then complications of are they touching… aligned, etc).
Can maybe you go into a little bit about the “render on z-index” block? It seems this is a pretty handy way to make shapes on screen without drawing directly to the background or making a sprite.
I see the use of spriteUtilsonSpriteUpdateInterval (gum drop) which in that function never references the actual temporary sprite, is this just a technique to have an on-update loop? Would a standard onUpdate work just as well?
Are there any other common patterns you use over and over for game designs?
I realize there’s a gob of videos and tutorials I could try to find but I’m more of a read kind of guy and these seem to be more of the advanced side (less “how to code” more “patterns and techniques to make a makecode arcade game”)
Awesome game BTW, and I can’t handle all the things at once!
let’s see… the tetrominoes do indeed have some pretty crazy arrays. the array that defines the tetrominoes is nested like this:
First index is the shape
Second index is the rotation of the shape (each shape has four possible rotations)
Third index is the point in the shape (each shape consists of four points)
Fourth index is the x/y of the point
the points themselves are offsets from the anchor point of the active piece “cursor”.
the next two crazy arrays are the test tables; these contain the data that is used to perform the actual piece rotations when you hit the button. the reason this is all so complicated is because there is a concept of “wall kicks” when rotating pieces, see this page for an explanation (and the source of those data tables). i wanted to make sure i implemented everything in the standard way or else i knew @luke would be furious.
now for your other questions:
each game has two variables used for this: timer and interval. interval is the number of milliseconds between each downwards movement (or upwards for the second game) and timer is a variable that holds the number of milliseconds since the last move. each frame, timer is incremented by the same amount of milliseconds (33 which assumes 30 fps) and if the timer goes over the interval, the piece moves down. there is some extra handling in there for if you hold the down button to make pieces drop faster
tiles are perfect for falling blocks games! everything is nicely aligned to a grid, every game piece is easily addressable by column/row, it’s easy to check for matches, and there are some choice extensions (arcade-tile-util and riknoll/arcade-tile-scanner) that make everything easier. the only sprites actually used in this game are for when pieces start to fall after matches are made, which is also a good reason to use tilemaps because it’s easy to make sure they stop when they hit other pieces (by making those pieces walls)
seems like you have a pretty good grasp of it! render on z-index is a handy way to draw directly to the screen every frame. i use it in pretty much every arcade game i make, but especially in this one. going in, i knew that the tilemap was going to be too big to fit on the screen all at once so i made the decision early on to not use the tilemap at all for rendering the games. instead it only holds the state and i do all the drawing myself in that render on z-index block
yes and yes. since i was basically implementing four games at once, i wanted everything to be neatly separated into functions. the on game update block was just a nifty way to get an on game update that i could nest within a function. this is also why all variables in the game are prefixed; i knew there was going to be a lot of them and i wanted them all to be separated in the variable list
that’s a tough one… a big thing i do in most blocks games is having a lot of variables that are named “tempImage”, “tempSprite”, etc. these are a handy way to cut down on the number of variables; i use them all over the place in all four of the games. the only thing is you need to be very careful to make sure a variable doesn’t get overwritten by another part of your code while you’re using it. best practice is to keep everything synchronous (no blocks from the timers extension) and make sure you don’t call any other functions that might also be using those
