项目作者: chrum

项目描述 :
angular snake component
高级语言: TypeScript
项目地址: git://github.com/chrum/ngx-snake.git
创建时间: 2021-08-06T18:28:44Z
项目社区:https://github.com/chrum/ngx-snake

开源协议:

下载


ngx-snake

Snake game as an angular component

ngx-snake 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:

  1. npm install ngx-snake

Import

  1. import {BrowserModule} from '@angular/platform-browser';
  2. import {NgModule} from '@angular/core';
  3. import {AppComponent} from './app.component';
  4. import {NgxSnakeModule} from 'ngx-snake';
  5. @NgModule({
  6. declarations: [
  7. AppComponent,
  8. ],
  9. imports: [
  10. BrowserModule,
  11. NgxSnakeModule
  12. ],
  13. providers: [],
  14. bootstrap: [AppComponent]
  15. })
  16. export class AppModule {
  17. }

Add/Connect to your fancy control interface

  1. <ngx-snake #game></ngx-snake>
  2. <button (click)="game.actionStart()">Start</button>
  3. <button (click)="game.actionStop()">Stop</button>
  4. <button (click)="game.actionReset()">Reset</button>
  5. <button (click)="game.actionUp()">Up</button>
  6. <button (click)="game.actionLeft()">Left</button>
  7. <button (click)="game.actionRight()">Right</button>
  8. <button (click)="game.actionDown()">Down</button>

Inputs

Name Default Type Description
boardHeight 10 number Board height
boardWidth 10 number Board width

Outputs

Name Description
foodEaten Called whenever our sweet snake gained some weight ;)
gameOver :( collision! snake didn’t make it (remember about reset button)

Public methods

  • actionStart
  • actionStop
  • actionReset
  • actionUp
  • actionRight
  • actionDown
  • actionLeft

which can be used like:

  1. <button (click)="onRotateButtonPressed()">Rotate</button>
  1. ...
  2. export class SnakeContainingComponent {
  3. @ViewChild(NgxSnakeComponent)
  4. private _snake: NgxSnakeComponent;
  5. public onRotateButtonPressed() {
  6. this._snake.actionRotate();
  7. }
  8. }

OR

  1. <ngx-snake #game></ngx-snake>
  2. <button (click)="game.actionRotate()">Rotate</button>

Styling

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

  1. ngx-snake {
  2. ngx-snake-tile {
  3. background: #ffffff;
  4. &.free {
  5. div {
  6. background: #ffffff;
  7. }
  8. }
  9. }
  10. }

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.