A Block Blast game using HTML Canvas and JS, with no libraries used outside of the HTML canvas! The gameplay is essentially the same as the mobile game, but simplified with no ads. There is game over detection, combos, and a simple scoring system. This was my second attempt using canvas!
My second ship is ready! This is an HTML canvas version of the mobile game Block Blast. This was my second time using canvas, and I learned a ton! My goal was to create a mobile game only using canvas with no outside libraries, and I think it was a success!
The game is very simple: literally just drag the blocks onto the board. If a row or column is completed, it will clear, just like in Tetris. When there are no more spaces to put blocks, the game ends.
I fixed the gamecheck system one more time, finally setting the placed property at the correct time. I cleaned up some code and did some minor UI improvements, and wrote a final README.
Log in to leave a comment
First, I fixed a critical bug that was returning game over when there were still possible spaces because I forgot to set the blocks placed value back to false. Next, I created an animated play screen!
Log in to leave a comment
I created a simple combo system that makes the score increase much faster when active, and I made animations for when blocks disappear, using opacity and size changes.
Log in to leave a comment
I created a game over detection system. It loops through all possible positions of each available block, and if it finds no solutions, the game over code is activated. I also created a simple game over UI that I will improve on later. All core game mechanics are complete now, and I can add my own flair tomorrow!
Log in to leave a comment
First, I fixed a bug that allowed the user to place one block multiple times. Then, I created a new UI overhaul with glow effects, pastel colors, and a dynamic sized container for the grid.
Log in to leave a comment
I created the system that allows multiple squares to be in one piece. First, I created an array containing all of the shapes, and then I updated the mouse detection script and the grid snapping system. I now detect the position of all squares in a shape for each function / test. Lastly, I changed the colors to make it look nicer.
Log in to leave a comment
I created a score detection system and display by looping through each row and column and detecting when one or more rows / columns are full. Right now, the score just adds one per completed row or column.
Log in to leave a comment
I created a snapping system so that dragged blocks snap to the grid. The blocks now change the color of the detected grid square and snap to grid. Next, I would like to figure out how I can make multiple blocks drag together and randomize block generation.
Log in to leave a comment
I created a draggable block system using mouse up and down event listeners. The black boxes can be dragged separately and have an offset so that they don’t lock to the center of the mouse. These will eventually be the blocks you place on the board. Next, I will have to create a detection system for placing the blocks on the board.
Log in to leave a comment
I created a canvas and slider in HTML and coded a basic grid system in JS. I used math to make the grid self centering regardless of height or width, and made a slider to demo this system. Lastly, I created a click handler using event listeners to cycle through and detect when any block is clicked and change the color (this is mainly just proof-of-concept.)
Log in to leave a comment