🧱TetriLight /// 3-player Tetris on 1 keyboard

HTML5/JavaSript/Canvas | Resizable | Animated | Offline | 100% coded (no framework, no API, no library)

Tested on 2024-03-06: Chrome 122✅ | Edge 122✅ | Brave 1.63✅ | Opera 106✅ | Firefox 123✅ | Safari 17.3✅.

Fits ECMAScript 6 (2015) + HTML5 Canvas + JS Standard Style + Airbnb style | Music Tayga Minila by JC`zic.

---

---

---

🕹Play here /// Tetraminoes ↔️ Pentominoes-Triominoes

Open https://vincentbounce.github.io/TetriLight/

Alternative: download the source code and run index.html locally

⌨️Controls

Use keys WASD, IJKL, and <∧∨> respectively for players 1, 2, and 3. If you're less than 3 players, just let zombie games lose.

When you have 1 or 2 players remaining, to add a new player, click on the upper-left corner of the page with the mouse.

Press P to pause, and P again to resume.

📏Rules

Clearing penalty

When a player clears 2 or more lines together, then he drops the same quantity of bad grey lines to other players. (2 is set in the variable RULES.transferRowsCountMin)

Pentominoes mode (5-block shapes)

When a player clears 3 or more lines together, then he has 1 to 3 blocks per shape, and other players have 5 blocks per shape, during 15 or 20 seconds. (3 is set in the variable RULES.pentominoesRowsCountMin)

Pentominoes were first considered by Alexey Pajitnov, the original creator of Tetris (Wikipedia source)

He became inspired to convert pentomino tiling puzzles to the computer after he bought a pentomino puzzle set from a store and played with it in his office. […] He felt that the game would be needlessly complicated with the twelve different shapes of pentominoes, so he scaled the concept down to tetrominoes, of which there are only seven shapes.

End of game

The game is lost when a new shape can't be placed (variable !_fallingShape.canMoveToPlaced).

Score

• The level starts from 0 and increments +1 every 10 rows cleared.
• Hard drops double traveled cells count.
• Cleared rows count formula is 40 for 1, 100 for 2, 300 for 3, 1200 for 4, 6600 for 5 at level 0, then * (level + 1)
• The combos rows count formula is the same * 50%.
• The bonus is the same as 2 rows when all is cleared (a perfect clear).

🔤Wording

to clear = to sweep, cleared = swept
a row = a line
a cell = a slot = a box
sprites = graphics = gfx
pivot = orientation

---

---

---

🛠️Code

Github

remote

• tetrilight-github instead origin

branches

• canvas canvas dev (playable)
• svg SVG dev (dev not finished)
• main started canvas dev here (archived, to merge with canvas)
• es5-fit-ie11 latest version compatible [JS ES5=ECMAScript 2009] to fit Internet Explorer 11 (archived)
• async trial using async functions (archived)

Graphic choice

Canvas (currently used)

• each canvas element is obscured in Elements Explorer
• blur because window.devicePixelRatio !== 1 1.75 for example in 4K screen
• move without calculation
• computing page resize zoom with JS explicit code
• window.devicePixelRatio read-only, ratio 1.75 on my 4K LCD === physical px / px independant device

DIV
    _htmlElement: DIV
    _htmlElement: CANVAS
        _drawingContext2D: CanvasRenderingContext2D (choose smooth)
            globalAlpha, imageSmoothingEnabled, imageSmoothingQuality

SVG (not finished)

• each SVG element is visible in Elements Explorer
• gradient possible on fonts
• small blur because sizes in %
• calculate render on each move
• implicit built-in page resize zoom

WebGL (not developed)

Naming convention

• #DEBUG to track bug
• $$$ to check or fix later
• $function used to track bug
• GLOBAL_VARIABLE_OR_CONSTANT global variable to handle a class or a global constant
• MyClass public class with first letter uppercase (Pascal Case)
• _privateVariable private variable accessible only by class
• privateMethod_ private method accessible only by class
• privateMethodBody_ private method body called only by 1 method
• publicMethod public method (Lower Camel Case)
• publicVariable public variable (Lower Camel Case)
• destroyMyClass class destructor function
• let myVariable is the local variable in the function
• let x, y are positions on browser, in pixels (x -> right, y -> down)
• let i, j are positions of blocks in the grid (i -> right, j -> up)
• let o is a generic object
• let p is a variable to browse in the object
• let item is a generic item: object or array or string boolean number
• forEach( (myVar)=>{ return myVar++; } );

Animation sequences

Events program, reacts to

• timeouts after animations, after the drop period on each slot
• keys pressed
• mouse clicks

Queuing new actions, new exclusive animations when

• (hardDrop > quake)0-1 > (clearRows > hardDrop > quake)0-* riseGreyBlocks actions are stuck
• (riseGreyBlocks)1-* > (hitShape > (clearRows > hardDrop > quake)0-* )0-1 > fallingShape is stuck
• messages and scores anims are not exclusive, each new one replace previous one
• 0-1 means iterating from 0 to 1 time. 0-* from 0 to x times
• pauseOrResume stops every timers, music. It lets FX finish. It blocks controls.

Classes

MainMenu [1 instance]
    MAIN_MENU._domNode: DomNode [1 instance]
    SPRITES: TetrisSpritesCreation [1 instance]
        SpriteObj: sprite objects
    GAME: TetrisGame [1 instance]
        _gameEventsQueue
        PentominoesBriefMode
        TetrisGrid [x instance]
            _playedPolyominoesType
            _playerKeysSet
            _animsStack
            _anims: all grid anims
            _gridEventsQueue
            _gridMessagesQueue
            lose()
            _lockedBlocks: [] of Blocks
            _lockedShapes: [] of Shapes: Blocks: Node
            _fallingShape: Shape
            _nextShape: Shape
            TetrisScore
                _score
                _level

---

---

---

😉Author 🇫🇷 Vincent ᗱƆᑌᑎϹᗴ 👾

𝕏 @VincentBounce | YouTube @VincentBounce | Instagram @VincentBounce

TetriLight v0.4 edited in 2011, 2020 and 2024