Skip to content

Latest commit

 

History

History
167 lines (121 loc) · 5.75 KB

README.md

File metadata and controls

167 lines (121 loc) · 5.75 KB
Raw

🧱TetriLight - JS 3-player Tetris on the same monitor

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

TetriLight screenshot

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

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

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

When a player clears 3 (RULES.pentominoesRowsCountMin) 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 (it's called Pentominoes/Trominoes mode).

The game is lost when a new shape can't be placed !_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 🇫🇷 ꓱꓛꓠꓵꓳꓭ ꓕꓠꓱꓛꓠꓲꓥ

𝕏 @VincentBounce | YouTube @VincentBounce | Instagram @VincentBounce

TetriLight v0.4 edited in 2011, 2020 and 2024