Block Blast Remake

The scoring system is finished . Might be changed later on but this is what i have now:

Points for Placing: You now get base points just for dropping shapes onto the board (1 point per square in the block).

Bigger Multi Line Bonuses: Clearing multiple lines at once now gives a bigger point boost, instead of just a flat rate.

Infinite Combos: Your multiplier will grow endlessly as long as you keep your streak alive, allowing for big scores.

Three turn streak breaker: You have up to 3 turns to clear a line. if you place 3 blocks without a clear, your streak resets to zero.

Saved High Scores: Your high score is saved to your browser.
Basically, the game now rewards multi line clears and long, uninterrupted streaks.

i added UI elements for the score and best score. They are currently only for visuals as i havent properly created the scoring functionality yet, but im working on that right now. The painful thing was placing these correclty because some sizes caused blurriness, so i had to make adjustments. I also had to change some pixels on the spritesheet using piskelapp.com. After all that i finally ended up with a semi finsiehd scoring UI. Lastly i polished the grid by adjusting its positions and sizes so its more centered aswell as adding a background.

This devlog doesnt contain any visual changes, only code cleanup and better asset management.
Basically my code was a bit cluttered with assets and layouts scattered everywhere so i decided to clean it up a bit by separating asset loading, layout and grid positions. This makes it easier to add more UI elements in the future without alot of problems, and modify them in a more readable manner.
My laptop is alright now so heres a video of the game in its current state.

I thought the UI looked a bit plain so i found game assets from freegameassets.net and updated the ui with sprites. It isnt fully implemented yet with some UI inconsistencies plus some values are hard coded. This and the performance will be improved later on.

This took longer than needed. I basically tried mimicking the hand generation algorithm used in the real game and tried and rewrote many times to make it perfect which i am incapable of as of this moment . I tried different algorithms, and could never find the right one. So i have finally landed on one i deem acceptable, and maybe overly complicated, but its alright for now. I added simple scoring and combo system that will improve later. Heres a short summary of the algorithm (which definetly has flaws):

The game needs to give you 3 pieces every round that are playable but not random garbage.

1. Read the board. Count how full it is (fill%) and find rows/columns that are 1-2 cells away from clearing.

2. Pick piece categories using weighted dice. Empty board? Mostly chunks and fillers to build up. Half full? Mix in line pieces. Nearly full? Spam small helpers so you dont die. The weights shift gradually.

3. Generate candidates. Roll 3 pieces from those weights, check each one individually fits somewhere on the board. If yes, score the hand by simulating “what if the player placed each piece in its best spot?” then count how many lines would clear and how many lines get pushed to 6-7/8 filled (setup moves).

4. Pick from the top 3. Do this up to 60 times, keep the 8 best hands, then randomly pick from the top 3.

its not perfect but its better than the complete random algorithm i had before. Also my old laptop gave up on me a little so i couldnt take a screenrecording, but atleast theres a picture .

Created more shapes like diffrerent rotation of the T, L, Z shapes and a new diagonal shape aswell as vertical lines.

I added a highlight feature that shows which rows and columns will be cleared when placing a block.

First i created a temporary grid simulation by copying the current grid and applying the ghost block placement to it. Then i checked which rows and columns would be completely full using the same logic as the clearing function.

Then i created a separate highlightLine function that draws full color blocks on any cell thats part of a clearable row or column.

phewwwww this took a long time . But my big brain did it

I made the game playable. Added recursive hand validation to ensure all pieces are placeable. Also separated the hand logic from blocks.js where it was previously.

Created a function that recursively checks if all 3 pieces in a generated hand can be placed on the grid in some sequence. The function:

• Simulates placement of each piece at every valid position
• Recursively validates remaining pieces can fit on the updated grid
• Ensures generated hands are always solvable (player must find the strategy)
• Triggers game over only when no valid 3-piece combination exists

Right now game over is displayed in the console and nothing happens after. I havent tested every possible bug that can be made, but hopefully there wont be any.

Added a function that clears the rows and columns when all cells are filled. Also just realized i havent shown mobile version so heres a video of the game in its current state on IOS Safari.

In this devlog i created a ghost preview of where the shape is about to be placed on the grid. Lowkey didnt know what to do when starting cuz i have never done this, but then i realized the calculation is more or less the same as placing it on the grid, but instead of placing it you just draw it with an offset.

Solved the problem from previous devlog. Basically when dragging and dropping block shapes onto the grid, certain shapes would place one cell off from where the mouse cursor indicated. Some shapes placed correctly while others didnt. Some would also overlap other blocks already on the grid.

It had two problems:

1. When picking up a shape, the code immediately centered it on the cursor, causing a “jump” effect. The original click position relative to the shapes center wasnt preserved during dragging.

2. The pointerup handler calculated grid placement from the shapes center using Math.floor(shapeSize / 2) offsets. This created inconsistent results. Even sized shapes (2x2, 4x1) center falls between grid cells. Odd sized shapes (3x3, 1x5) center falls on a grid cell using the same offset calculation for both caused the 1 cell placement error. Solved this by calculating from top left instead of center and then rounding with Math.round() giving it a better “snapping” to grud behaviour.

The overlap issue was a because of this misalignment. the shapes would calculate their grid position incorrectly which woulsd bypass the isValid checks intended cell allowing placement on cells that were already filled.

Yeah anyways other than that bloody issue, i added a feature that removes placed shapes from the hand and generates a new hand when the current one runs out.

The shapes are now placable on the grid by dragging them. They should not be able to be placed if the shape is outside the grid or if the shape overlaps other blocks. As you can see in the video it still places the shape as long as the start position is inside the grid. It should only place when the whole shape fits. I will fix this next time.

Finally finished the dragging function it works on both mobile and pc. On mobile the browser started to scroll when dragging the pieces so i used “touch-action: none;” in the css for the Canvas element which solved the problem. I also separated shapes, game config etc into own files so they are better managed.

Just wanted to make a quick devlog. I have made it possible to create a hand of three shapes that generates randomly. Currently im working on making them draggable but that will come in the next devlog so all this time didnt just go into placing them lol.

Worked on the shapes and a function to place them on the grid. Heres a little showcase of some of the shapes like S shape, Z shape, Big small L shapes, corner shapes, squares etc placed on the grid using the new function. You can also look at the console to see how the grid updates.

created the blocks and the glossy effect which was a little more difficult than expected. Also adjusted grid and background color.

Started with the setup of the canvas. Then i created the grid layout for the game. Might change later as perfect styling isnt the priority yet.