Nicely Pointed Mandibles

    ngx-tetris
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    ngx-tetris

    Tetris game as an angular component

    ngx-tetris is actually only the core of the game... YOU need to add everything around it (controls, score...) yourself :)

    Check the demo here

    Using it:

    Install:

    npm install ngx-tetris

    Import

    import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';
    
    import {AppComponent} from './app.component';
    import {TetrisCoreModule} from 'ngx-tetris';
    
    @NgModule({
        declarations: [
            AppComponent,
        ],
        imports: [
            BrowserModule,
            TetrisCoreModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    Add/Connect to your fancy control interface

        <tetris-core #game
            (lineCleared)="onLineCleared()"></tetris-core>
    
            <button (click)="game.actionStart()">Start</button>
            <button (click)="game.actionStop()">Stop</button>
            <button (click)="game.actionReset()">Reset</button>
            <button (click)="game.actionRotate()">Rotate</button>
            <button (click)="game.actionLeft()">Left</button>
            <button (click)="game.actionRight()">Right</button>
            <button (click)="game.actionDown()">Down</button>

    Inputs

    Name Default Type Description
    tileSize 25px css unit Size to use when rendering single tile. Can be in 'px' or in 'em' or any(probably) other css unit
    initialSpeed 500 integer Miliseconds (ms) time between falling cycles (lower number -> faster game)
    start boolean Flag that toggled from false to true starts the game
    stop boolean Flag that toggled from false to true stops the game
    reset boolean Flag that toggled from false to true resets the game
    moveLeft boolean Flag that toggled from false to true moves current piece to the left
    moveRight boolean Flag that toggled from false to true moves current piece to the right
    moveDown boolean Flag that toggled from false to true moves piece down (falls faster)
    rotate boolean Flag that toggled from false to true rotates current piece

    Outputs

    Name Description
    lineCleared Called whenever a line was completely filled and got cleared
    gameOver :( player was flooded with pieces and didn't make it (remember about reset button)

    Public methods

    • actionStart
    • actionStop
    • actionReset
    • actionLeft
    • actionDown
    • actionRight
    • actionRotate

    which can be used like:

    <button (click)="onRotateButtonPressed()">Rotate</button>
    ...
    export class TetrisContainingComponent {
        @ViewChild(TetrisCoreComponent)
        private _tetris: TetrisCoreComponent;
    
        public onRotateButtonPressed() {
            this._tetris.actionRotate();
        }
    }

    OR

    <tetris-core #game>
        </tetris-core>
    <button (click)="game.actionRotate()">Rotate</button>

    Styling

    To change colors and tiles (to black and white for example) define styles with colors like

    tetris-core {
        tile {
            background: white;
            &.color-box {
              background: #000000;
            }
        }
    }

    for full example (and all class names) go here

    Development

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Authors

    Chrystian Ruminowicz

    Licence

    This project is licensed under the MIT license. See the LICENSE file for more info.

    Install

    npm i ngx-tetris

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    271 kB

    Total Files

    42

    Last publish

    Collaborators

    • chrum