https://github.com/chrum/ngx-tetris
angular tetris component
https://github.com/chrum/ngx-tetris
angular education tetris
Last synced: about 2 months ago
JSON representation
angular tetris component
- Host: GitHub
- URL: https://github.com/chrum/ngx-tetris
- Owner: chrum
- Created: 2018-09-07T09:15:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:49:38.000Z (about 3 years ago)
- Last Synced: 2023-12-26T16:16:03.195Z (over 2 years ago)
- Topics: angular, education, tetris
- Language: TypeScript
- Homepage: http://chrum.it/pages/ngx-tetris
- Size: 1 MB
- Stars: 18
- Watchers: 5
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://chrum.it/pages/ngx-tetris)
## Using it:
#### Install:
```bash
npm install ngx-tetris
```
#### Import
```javascript
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
```html
Start
Stop
Reset
Rotate
Left
Right
Down
Drop
```
#### 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)
drop | | boolean | Flag that toggled from false to true moves piece down (instantly drops)
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`
- `actionDrop`
which can be used like:
```html
Rotate
```
```typescript
...
export class TetrisContainingComponent {
@ViewChild(TetrisCoreComponent)
private _tetris: TetrisCoreComponent;
public onRotateButtonPressed() {
this._tetris.actionRotate();
}
}
```
OR
```html
Rotate
```
### Styling
To change colors and tiles (to **black and white** for example) define styles with colors like
```scss
tetris-core {
tile {
background: white;
&.color-box {
background: #000000;
}
}
}
```
for full example (and all class names) [go here](https://github.com/chrum/ngx-tetris/blob/master/projects/ngx-tetris-app/src/styles.scss)
## 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](http://chrum.it)
## Licence
This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.