https://github.com/chrum/ngx-snake
angular snake component
https://github.com/chrum/ngx-snake
angular education snake
Last synced: about 2 months ago
JSON representation
angular snake component
- Host: GitHub
- URL: https://github.com/chrum/ngx-snake
- Owner: chrum
- Created: 2021-08-06T18:28:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-03T17:58:08.000Z (about 4 years ago)
- Last Synced: 2025-09-30T12:54:02.508Z (6 months ago)
- Topics: angular, education, snake
- Language: TypeScript
- Homepage: http://chrum.it/pages/ngx-snake/
- Size: 561 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://chrum.it/pages/ngx-snake)
## Using it:
#### Install:
```bash
npm install ngx-snake
```
#### Import
```javascript
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {NgxSnakeModule} from 'ngx-snake';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgxSnakeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
#### Add/Connect to your fancy control interface
```html
Start
Stop
Reset
Up
Left
Right
Down
```
#### 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:
```html
Rotate
```
```typescript
...
export class SnakeContainingComponent {
@ViewChild(NgxSnakeComponent)
private _snake: NgxSnakeComponent;
public onRotateButtonPressed() {
this._snake.actionRotate();
}
}
```
OR
```html
Rotate
```
### Styling
To change colors and tiles (to **black and white** for example) define styles with colors like
```scss
ngx-snake {
ngx-snake-tile {
background: #ffffff;
&.free {
div {
background: #ffffff;
}
}
}
}
```
for full example (and all class names) [go here](https://github.com/chrum/ngx-snake/blob/master/projects/ngx-snake-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.