Falling object puzzle game made with HTML5 and JavaScript Full code

This is a book that lists and explains all the codes for a falling object puzzle game similar to “Tetris” and “Puyo Puyo.” Developed fully from scratch using HTML5 + JavaScript. A falling object puzzle game called “Cthulhu Drop” is included as a sample.

This is a technical book that allows you to check out the contents of a falling object puzzle game that you can actually play. The code is simple and easy to understand.

We will also introduce the sample game “Cthulhu Drop”. Blocks fall in 2 rows horizontally and 1 to 3 rows vertically. Falling objects can rotate clockwise or counterclockwise.

After falling, the block will fall according to gravity. And if there are 3 or more blocks in a row vertically, horizontally and diagonally, it can be erased. Also, blocks of the same type adjacent to the disappeared block will also disappear. They will continue to disappear until the chain ends.

I hope that you will be able to grasp the key points of game development through this book.

● Simplified table of contents

Chapter 1 Overall picture
Chapter 2 HTML, CSS, main.js, etc.
Chapter 3 Title Scene
Chapter 4 Drop Scene
Chapter 5 Drawing processing
Chapter 6 Game Processing
Chapter 7 Game Basic Functions
Chapter 8. Resource management functions

● Detailed table of contents

Chapter 1 Overall picture
・1-1 Specifications for the “falling object puzzle game”
・1-2 key operation
・1-3 File structure
・1-4 Rough classification
・1-5 js-game/nest.js
・1-6 Scene file structure

Chapter 2 HTML, CSS, main.js, etc.
・2-1 index.html
・2-2 css/main.css
・2-3 js-main/main.js

Chapter 3 Title Scene
・3-1 js-main/scn.titile.js

Chapter 4 Drop Scene
・4-1 js-main/scn.drop.js

Chapter 5 Drawing processing
・5-1 js-main/draw-core.js
・5-2 js-main/draw-dropping.js
・5-3 js-main/draw-ef.js
・5-4 js-main/screenshot.js

Chapter 6 Game Processing
・6-1 js-main/drop-core.js
・6-2 js-main/drop-input.js
・6-3 js-main/drop-utl.js
・6-4 js-main/drop-stuff.js
・6-5 js-main/drop-erase.js
・6-6 js-main/drop-erase-search.js
・6-7 js-main/drop-erase-expand.js

Chapter 7 Game Basic Functions
・7-1 js-game/game.core.js
・7-2 js-game/game.anim.js
・7-3 js-game/game.canvas.js
・7-4 js-game/game.view.js
・7-5 js-game/game.ui.js

Chapter 8. Resource management functions
・8-1 js-game/resource.image.js
・8-2 js-game/resource.font.js
・8-3 js-game/resource.sound.js

Download Link