はじめに
Angular5を使ってテトリスを作成しました。👇のGitHub Pagesで実際に遊べます。
https://l08084.github.io/angular-tetris/
操作方法:
キーボードの矢印キーでブロックの移動、スペースキーでブロックの回転ができます。なお、PC専用でChrome以外の動作確認を行なっていません
ソースコードは👇です
開発環境
Angular: 5.2.3
TypeScript: 2.5.3
angular/cli: 1.6.5
OS: darwin x64
Node: 8.1.4
このテトリスについて
下記サイト様のJavaScript版テトリスを参考に作成しました
Angular感のあるところ
基本的に👆サイト様のコードと同じになってしまってるんですが、HTML5要素のcanvasを使用している部分と、キーボードイベントを取得している所をAngular風に書き直しています。
Angularによるcanvas参照
ViewChild
アノテーションでcanvasタグのIDを指定すると、canvas要素を参照することができます。
@Component({ selector: 'app-root', template: `<canvas #campas width='300' height='600'></canvas> <div class="how-control"> <h1 class="title">- HOW TO PLAY-</h1> <p class="detail">ブロックの操作: keybord(←→↓)</p> <p class="detail">回転: keybord(space)</p> </div>`, styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, AfterViewInit, OnDestroy { private context: CanvasRenderingContext2D; @ViewChild('campas') campas; ngAfterViewInit() { const canvas = this.campas.nativeElement; this.context = canvas.getContext('2d'); // 30ミリ秒ごとに状態を描画する関数を呼び出す setInterval(() => this.render(), 30); }
Angularによるキーボードイベント取得
form以外からのイベント取得ってどうやるのかわかんねえなと思ったんですが、Observableを使うのが今時っぽい。
import { Component, ViewChild, AfterViewInit, OnInit, OnDestroy } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; import 'rxjs/add/observable/fromEvent'; @Component({ selector: 'app-root', template: `<canvas #campas width='300' height='600'></canvas> <div class="how-control"> <h1 class="title">- HOW TO PLAY-</h1> <p class="detail">ブロックの操作: keybord(←→↓)</p> <p class="detail">回転: keybord(space)</p> </div>`, styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, AfterViewInit, OnDestroy { private subscription: Subscription; ngOnInit() { this.newGame(); this.subscription = Observable.fromEvent(document, 'keydown').subscribe((e: KeyboardEvent) => { this.keyPress(e); }); } ngOnDestroy() { this.subscription.unsubscribe(); }
初めてのGithub Pages
angular-cli-ghpages
というライブラリを使ってGithub Pagesにあげることができます。
# インストールしていなければ $ npm i -g angular-cli-ghpages # "https://USERNAME.github.io/REPOSITORY/" $ ng build --prod --base-href "https://l08084.github.io/angular-tetris/" $ angular-cli-ghpages
参考サイト
Angular + Reduxでテトリスを作ってみた...に続く予定です