152/210

RxJSとはなんぞや？⑧　サイコロ連打の記録に挑戦④(大事な事は)

色々RxJSのfromEventからのObservable作成をして見ました。

面白い所では、クリップボードを使ったイベントも使えました。

const copie$ = fromEvent<ClipboardEvent>(document, "copy");

copie$.subscribe(console.log);

ただ、<MouseEvent>や<KeyboardEvent>は多分使えそうですが、データバインディングされたHTML要素あるいは変数の変更を補足する方法はまるで分らない。

データバインディングが可能な以上は、同様の方法で補足しているとは思うのですが、現時点で理解しようというのはすぐには難しそうです。

Angularの変更検知について(subscribeを使用しているようです)

https://qiita.com/maechabin/items/bb565045b124a33be191#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%A8

となると、そういう方法以外に解決方法があるか？という事です。

プログラミングは、何らかの技術を使うのが目的じゃないですからね。

(とはいえ知ることが出来るなら、それに越したことは無いです)

大事な事は必要な機能を今のスキルで達成する事！

安心確実な方法は、『カウンターから observable を作成する』で例えば100分の1秒単位で変数チェックすれば出来そうです。

DBへの記録の前に、以下のようにサイコロを振りまくるプログラムを作りました。

・画面には以下の項目を表示

　試行回数

　2つのサイコロの出目

　開始と停止の二つのボタン

　経過時間

・100分の1秒ごとに、サイコロを100回振って回数と経過時間を書き換える

・停止ボタンを押すか上の処理を1000回行えば終了

1秒間に1万回サイコロを振り、それを10秒間続けるプログラムです。

"home.page.html"

---------------------------------------------------------------

<ion-content [fullscreen]="true">

回数：{{numClick}}

<ion-button id="my-element2" (click)="fnRecordDice()">Start</ion-button>

<ion-button id="my-element2" (click)="fnStopDice()">Stop</ion-button>

{{diffTime/1000}} seconds

</ion-content>

---------------------------------------------------------------

"home.page.ts"

---------------------------------------------------------------

import { Component } from '@angular/core';

//追加

import { interval } from 'rxjs';

@Component({

　selector: 'app-home',

　templateUrl: 'home.page.html',

　styleUrls: ['home.page.scss'],

})

export class HomePage {

　//クリック回数

　numClick=0

　//サイコロ１の目

　Dice1Value = "1";

　//サイコロ２の目

　Dice2Value = "1";

　//停止フラグ

　flgStop=true

　//開始終了経過時間

　startTime :number

　endTime :number

　diffTime=0;

　constructor() {

　　this.numClick=0;　

　}

　 //サイコロの目

　fnDiceVal() {

　　return (Math.floor(Math.random()*1000) % 6) + 1;

　}

　//開始ボタンクリック

　fnRecordDice(){

　　//停止フラグオンならば処理しない

　　if(!this.flgStop){

　　　return;

　　}

　　this.flgStop=false;

　　this.startTime=Date.now()

　　const TimerCounter = interval(10);　//100分の1秒ごと

　　const subscribeTimer=TimerCounter.subscribe((n)=>{

　　　if(!this.fnSubscribed(n)){　//終了条件達成時

　　　　subscribeTimer.unsubscribe();

　　　　this.flgStop=true;

　　　　this.endTime=Date.now();

　　　　this.diffTime=this.endTime-this.startTime;

　　　}});

　　return;

　}

　//終了ボタンクリック

　fnStopDice(){

　　this.flgStop=true;

　}

　//１００分の１秒ごとの処理

　fnSubscribed(n :number):boolean{

　　if(n>=1000 || this.flgStop){

　　　return false;

　　}

for(let i=0;i<100;i++){

　　　//サイコロを振った

　　　let Dice1 = this.fnDiceVal();

　　　let Dice2 = this.fnDiceVal();

　　　this.Dice1Value = String(Dice1);

　　　this.Dice2Value = String(Dice2);

　　　let Dice3 = Dice1 + Dice2;

　　　this.numClick++;

　　}

　　//経過時間書き換え

　　this.endTime=Date.now();

　　this.diffTime=this.endTime-this.startTime;

　　return true;

　}

---------------------------------------------------------------

走らせてみると、これはなかなか面白い。

弾幕シューティング等にも使えそう？

当初の予定とはだいぶ変わりましたが、RxJSの扱い方(少なくとも一例)が判った気もします。

(重要な事は、何をストリームと考えるか？だと思います)

次回、これにサイコロの出目の統計記録をStorageに記録するコードを付け加えて、RxJSについてを終わらせますね。

投稿

RxJSとはなんぞや？⑧ サイコロ連打の記録に挑戦④(大事な事は)

RxJSとはなんぞや？⑧　サイコロ連打の記録に挑戦④(大事な事は)