The Tetris game, created using JavaScript, and The HTML5 canvas.

Download the starter template, and follow the tutorial on youtube step by step.

Tutorial link : https://www.youtube.com/watch?v=HEsAr2Yt2do

#Implemented Tasks

Pause Menu – 3h

● Part of the interruption logic already existed in the main loop, making implementation easier.

● The UI was simple and reused existing game elements. Progressive Level and Speed Increase – 5h

● Fine-tuning the timing of falling pieces.

● Bugs appeared with abrupt acceleration at higher levels. Soundtrack and Sound Effects – 7h

● Used a simple audio system based on the Web Audio API already mastered by the developer.

● Sound effects reused the same audio player.

High Scores Table – 8h

● Additional adjustments for sorting and persistence.

● Name entry screen required more visual refinement.

Game Over Screen – 3h

● Reused part of the structure created for the pause menu.

● Simple design facilitated implementation.

Different Visual Themes – 3h

● CSS variables enabled quick theme switching without recreating elements.

● Three predefined themes were sufficient, reducing art workload.

Next Piece Preview – 9h

● Mini-rendering required individually adjusting coordinates.

● Synchronization with the piece buffer was more labor-intensive.

Lines Cleared Counter – 3h

● Counting logic was already integrated with the scoring routine.

● Only needed to be displayed and updated.

Simple Start Screen – 2h

● Straightforward: title + button + preload.

Mute Button – 3h

● The existing audio system facilitated integration.

● On/off toggle logic was simple.

Line Clear Animation – 8h

● Performance adjustments were required to avoid gameplay stutter.

● Testing with multiple line clears required refinement.

Controls Display – 3h

● Reused the layout from the start screen.

● Concise content without complex interactivity.