ASMR Programming - Tetris Game With JavaScript - No Talking

Hi everyone 🖐
In this tutorial you will learn How to Build Tetris Game in JavaScript 🔥🔥🔥
🎮 Dive into the world of game development with our comprehensive JavaScript Tetris tutorial! 🧩
In this in-depth tutorial, you'll learn:
🔹 Setting up the development environment for JavaScript game development.
🔹 Creating the game board and defining the Tetris pieces.
🔹 Implementing game mechanics like piece rotation, movement, and collision detection.
🔹 Managing game states and keeping track of the player's score.
🔹 Fine-tuning the gameplay for a smooth and enjoyable experience.
Whether you're a beginner looking to learn JavaScript or an experienced developer wanting to explore game development, this tutorial is perfect for you. We break down complex concepts into simple, easy-to-follow steps, making it accessible to developers of all levels.
At the end of this tutorial, you will have a fully functional Tetris game that you can customize and share with your friends or even publish on your website😁.
Stay tuned for more exciting coding tutorials and game development projects! 🌟
❌ Don't forget to like, subscribe, and share this video with fellow developers.❌
You can follow more similar videos in this playlist :
• JavaScript Game
=============================================
Video Contents :
00:00 - Intro
00:48 - Warming fingers
00:56 - Create Project Files
01:14 - Main codes
02:17 - HTML Coding
06:10 - Main Styles
07:03 - Program Style
12:09 - JavaScript Coding
12:53 - Level function
(returns the drop interval for Tetris pieces based on the selected difficulty level.)
14:14 - createMatrix function
(creates a two-dimensional array (matrix) with specified width and height, filled with zeros.)
14:48 - createPiece function
(returns a Tetris piece matrix based on the specified type (e.g., "I", "L", "J") with corresponding block patterns.)
17:33 - drawMatrix function
( function draws a matrix of colored blocks on the canvas at a specified offset.)
19:17 - merge function
(combines the current player's piece with the game arena when it reaches the bottom or collides with other pieces.)
20:09 - rotate function
(rotates a given matrix by 90 degrees in the specified direction (clockwise or counterclockwise))
21:35 - collide function
(checks if the current player's piece collides with the game arena or other pieces, returning true if there is a collision.)
24:41 - startGame function
(initializes or restarts the Tetris game, resetting the player's position, score, and clearing the game board for a new game.)
26:25 - pauseGame function
(toggles the game between paused and resumed states, updating the button text accordingly, and canceling or resuming the game animation.)
27:33 - stopGame function
(stops the Tetris game, clearing the canvas, resetting the game state, and disabling the pause button.)
29:23 - playerReset function
(initializes the player's position and selects a random Tetris piece for the next move, resetting the game if there's a collision at the initial position.)
31:29 - updateScore function
(updates the displayed score on the webpage based on the player's current score.)
33:06 - update function
(manages the game's animation loop, controlling the drop rate of Tetris pieces and continuously updating the game state and canvas rendering.)
33:54 - playerMove function
(moves the player's piece horizontally (left or right) within the game grid, checking for collisions and preventing out-of-bounds movement.)
34:22 - playerDrop function
(function moves the player's piece downward, handling collisions and game logic.)
35:15 - gameOver function
(ends the game, displays a game over alert with the player's score, and allows for restarting the game.)
35:57 - playerRotate function
(rotates the player's piece within the game grid, ensuring it doesn't collide with the game arena or go out of bounds.)
37:08 - arenaSweep function
(clears complete rows in the game arena and updates the player's score.)
38:53 - draw function
( updates the game canvas.)
39:59 - Debugging
44:40 - Final result
=============================================
🔴Subscribe → / @devhubasmr ❤️
Don't re-upload or edit the videos on your channel.
Source code :
github.com/devhubasmr/Tetris-...
=============================================
Previous videos :
Unit Converter :
• ASMR Programming - Uni...
Text To Hash :
• ASMR Programming - Tex...
Dictionary App :
• ASMR Programming - Dic...
Speech To Text :
• ASMR Programming - Spe...
Sidebar Menu :
• ASMR Programming - Res...
Image Slider :
• ASMR Programming - Ima...
ToDo List App :
• ASMR Programming - Awe...
=============================================
devhubasmr
devhub asmr
dev hub asmr
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming

[@DevHubAsmr]

Your likes and comments give me energy ;)

[@AsmrProg]

Very very amazing video, Nice job 😮👍❤️

[@DevHubAsmr]

Thanks brother 🙏 💙

[@instates7114]

awesome !!

[@DevHubAsmr]

Thanks for your comment bro 🙏

[@nasi__ks]

WoW😍❤️👏🏻

[@DevHubAsmr]

Thanks lovm ❤

[@raponduty]

Wow awesome, I am going to download the source code and play it!

[@DevHubAsmr]

😁😁 Enjoy the game

[@jojo-gg1iz]

Beautiful work! Subbed 👍

[@DevHubAsmr]

Thanks for your comment and subscribe bro 🙏

[@teletvbis]

bro took "trust the process" too serious

[@DevHubAsmr]

😂😂😂👍👍

[@teletvbis]

@@DevHubAsmr ur a nice designer, the same design would take 2h (mainly due to flex things)

[@DevHubAsmr]

Thank you brother I try to show the viewers the most information in the shortest time so that they get the best results and don't get bored.

[@thiagot7706]

Whats this keyboard

[@DevHubAsmr]

Mechanical Gaming keyboard Model BK002