【響應式編程的思惟藝術】（4）從打飛機遊戲理解併發與流的融合

時間 2019-11-16

原文原文鏈接

本文是 Rxjs 響應式編程-第三章: 構建併發程序這篇文章的學習筆記。
示例代碼託管在：http://www.github.com/dashnowords/blogscss

更多博文：《大史住在大前端》原創博文目錄html

一. 劃重點

儘可能避免外部狀態前端

在基本的函數式編程中，純函數能夠保障構建出的數據管道獲得確切的可預測的結果，響應式編程中有着一樣的要求，博文中的示例能夠很清楚地看到，當依賴於外部狀態時，多個訂閱者在觀察同一個流時就容易互相影響而引起混亂。git

當不一樣的流之間出現共享的外部依賴時，通常的實現思路有兩種：github
- 將這個外部狀態獨立生成一個可觀察對象，而後根據實際邏輯需求使用正確的流合併方法將其合併。
- 將這個外部狀態獨立生成一個可觀察對象，而後使用Subject來將其和其餘邏輯流聯繫起來。
管道的執行效率
在上一節中經過compose運算符組合純函數就能夠看到，容器相關的方法幾乎全都是高階函數，這樣的作法就使得管道在構建過程當中並不不會被啓用，而是緩存組合在了一塊兒（從上一篇的IO容器的示例中就能夠看到延緩執行的形式），當它被訂閱時纔會真正啓動。編程
Subject類canvas

Subject同時具有Observable和observer的功能，可訂閱消息，也可產生數據，通常做爲流和觀察者的代理來使用，能夠用來實現流的解耦。爲了實現更精細的訂閱控制，Subject還提供瞭如下幾種方法。segmentfault
- AsyncSubject
  AsyncSubject觀察的序列完成後它纔會發出最後一個值，並永遠緩存這個值，以後訂閱這個AsyncSubject的觀察者都會馬上獲得這個值。數組
- BehaviorSubject
  Observer在訂閱BehaviorSubject時，它接收最後發出的值，而後接收後續發出的值，通常要求提供一個初始值，觀察者接收到的消息就是距離訂閱時間最近的那個數據以及流後續產生的數據。緩存
- ReplaySubject
  ReplaySubject會緩存它監聽的流發出的值，而後將其發送給任何較晚的Observer，它能夠經過在構造函數中傳入參數來實現緩衝時間長度的設定。

二. 從理論到實踐

原文中提供了一個很是詳細的打飛機遊戲的代碼，但我仍然建議你在熟悉了其基本原理和思路後本身將它實現出來，而後去和原文中的代碼做對比，好搞清楚哪些東西是真的理解了，哪些只是你覺得本身理解了，接着找一些很明顯的優化點，繼續使用響應式編程的思惟模式來試着實現它們，起初不知道從何下手是很是正常的（固然也多是筆者的自我安慰），但這對於培養響應式編程思惟習慣大有裨益。筆者在本身的實現中又加入了右鍵切換飛船類型的功能，必須得說開發遊戲的確比寫業務邏輯要有意思。

因爲沒有精確計算雪碧圖的座標，因此在碰撞檢測時會有一些誤差。

三. 問題及反思

關於canvas的尺寸問題

建議經過如下方式來設置:

<!--推薦方式1-->
<canvas height="300" width="400"></canvas>

//推薦方式2
canvas = document.getElementById('canvas');
canvas.height = 300;
canvas.width = 300;

須要避免的幾種方式（都是隻改變畫板尺寸，不改變畫布尺寸，會形成繪圖被拉伸）：

//1.CSS設置
#mycanvas{
   height:300px;
   width:300px;
}

//2.DOM元素API設置
canvas = document.getElementById('canvas');
canvas.style.height = 300;
canvas.style.width= 300;
//3.Jquery設置
$('#mycanvas').width(300);

同時須要注意canvas的寬高不支持百分比設定。

Rx.Observable.combineLatest之後總體的流不自動觸發了
combineLatest這個運算符須要等全部的流都emit一次數據之後纔會開始emit數據，由於它須要爲整合在一塊兒的每個流保持一個最新值。因此自動啓動的方法也很簡單，爲那些不容易觸發首次數據的流添加一個初始值就能夠了，就像筆者在上述實現右鍵來更換飛船外觀時所實現的那樣，使用startWith運算符提供一個初始值後，在鼠標移動時combineLatest生成的飛船流就會開始生產數據了。另一點須要注意的就是combineLatest結合在一塊兒後，其中任何一個流產生數據都會致使合成後的流產生數據，因爲圖例數據的座標是在繪製函數中實現的，因此被動的觸發可能會打亂原有流的預期頻率，使得一些舞臺元素的位置或形狀變化更快，這種狀況可使用sample( )運算符對合並後的流進行取樣操做來限制數據觸發頻率。

一段愈來愈快的流

筆者本身在生成敵機的時候，第一次寫出這樣一段代碼:

let enemyShipStream = Rx.Observable.interval(1500)
.scan((prev)=>{//敵機信息須要一個數組來記錄，因此經過scan運算符將隨機出現的敵機信息聚合
     prev.push({
        shape:[238,178,120,76],
        x:parseInt(Math.random() * canvas.width,10),
        y:50
     });
     return prev
},[])
.flatMap((enemies)=>{
   return Rx.Observable.interval(40).map(()=>{
       enemies.forEach(function (enemy) {
           enemy.y = enemy.y + 2;
       });
       return enemies;
   })
});

運行的時候發現敵機的速度變得愈來愈快，很詭異，若是你看不出問題在哪，建議畫一下大理石圖，看看flatMap匯聚的總的數據流是如何構成的，就很容易看到隨着時間推移，多個流都在操做最初的源數據，因此座標自增的頻率愈來愈快。

限制scan操做符聚合結果的大小
本身寫代碼時多處使用scan操做符對產生的數據進行聚合，若是聚合的形式是集合形式的，其所佔空間就會隨着時間推移愈來愈大，解決的辦法就是在scan操做符接收的回調函數中利用數組的filter方法對聚合結果進行過濾，生成新的數組並返回，以此來控制聚合結果的大小。
碰撞檢測的實現思路
碰撞檢測是即時生效的，因此每一幀都須要進行，最終彙總的流每次發射數據時均可以拿到全部待繪製元素的座標信息，此時便是實現碰撞檢測的時機，當檢測到碰撞時，只須要在座標數據中加個標記，而後在最初的scan的聚合方法中將符合標記的數據清除掉就能夠了，檢測碰撞的邏輯和碰撞發生後的數據清除以及繪製判斷是編寫在不一樣地方的，在筆者提供的示例中就能夠看到。

四. 參考代碼及Demo說明

demo中的 index.html是學習原文時拷貝的代碼，mygame中的代碼是筆者寫的，有須要的讀者自行使用便可。

myspace.js-星空背景流

/**
 * 背景
 * 擴展思考：如何融入全屏resize事件來自動調整星空
 */
//將全屏初始化爲畫布舞臺
let canvas = document.getElementById('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.style.backgroundColor = 'black';
let ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FFFFFF';
let spaceShipImg = new Image();
    spaceShipImg.src = 'plane2.png';

//生成星空
//每一個數據點但願獲得的數據形式是[{x:1,y:1,size:1},{}]
let starStream = Rx.Observable.range(1,250)
.map(function(data){
   return {
      x:Math.ceil(Math.random()*canvas.width),
      y:Math.ceil(Math.random()*canvas.height),
      size: Math.ceil((Math.random()*4))
   }
})
.toArray()
.flatMap(function(stars){
    /*此處是默寫時的難點，靜態生成的數組流須要一直保持
    *後續的結果都是在此之上不斷累加的
    */
    return Rx.Observable.interval(40).map(function () {
        stars.forEach(function (star) {
            star.y = (star.y+2)  % canvas.height; 
        });
        return stars;
    })
})

//繪製星空
function paintStar(stars){
    //暴力清屏，若是不清除則上次的星星不會被擦除
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#FFFFFF';
    //繪製星星
    stars.forEach(function (star) {  
        ctx.fillRect(star.x, star.y, star.size, star.size); 　
    });
}

myship.js-我方飛船流

/**
 * 本身的飛船
 * 擴展思考：如何實現右鍵點擊時更換飛船類型?
 */

//鼠標移動流
let mouseMoveStream = Rx.Observable.fromEvent(window, 'mousemove')
.distinct() //位置發生變化時觸發
.map(function (data) {
    return {
        x:data.clientX,
        y:canvas.height - 100
    }
});

//飛船類型靜態流
let shipTypeStream = Rx.Observable.from([
       [0,0,130,90],
       [135,0,130,100],
       [265,0,126,100],
       [0,170,110,100]
    ]).toArray();

//鼠標右鍵流-實現類型切換,每次生成一個序號，而後從靜態飛船流中拿出圖形數據
let mouseRightStream = Rx.Observable.fromEvent(window, 'contextmenu')
.map(function (event) {
    event.preventDefault();//禁止右鍵彈出菜單
})
.scan(count=>count+1,0)//記錄點擊次數
.map(count=>count % 4).startWith(0);//將次數轉換爲飛船類型序號


//鼠標左鍵流-實現子彈發射
let mouseClickStream = Rx.Observable.fromEvent(canvas, 'click')
.sample(200)
.scan((prev,cur)=>{
   prev.push({
       x:cur.clientX,
       y:canvas.height - 50,
       used:false //標記是否已經擊中某個飛船
   });
   return prev.filter((bullet)=>{return bullet.y || !bullet.used});
},[])
.startWith([{x:0,y:0}]);

//玩家飛船流
let myShipStream = Rx.Observable.combineLatest(mouseMoveStream,
                                               shipTypeStream,
                                               mouseRightStream,
                                               mouseClickStream,
                                               function(pos,typeArr,typeIndex,bullets){
                                                  return {
                                                    x:pos.x,
                                                    y:pos.y,
                                                    shape:typeArr[typeIndex],
                                                    bullets:bullets
                                                  }
                                               });

//繪製飛船
function paintMyShip(ship) {
    //繪製飛船
    ctx.drawImage(spaceShipImg,ship.shape[0],ship.shape[1],ship.shape[2],ship.shape[3], ship.x - 50, ship.y, ship.shape[2],ship.shape[3]);
    //繪製本身子彈
    ship.bullets.forEach(function (bullet) {  
         bullet.y = bullet.y - 10;
         ctx.drawImage(spaceShipImg, ship.shape[0],ship.shape[1],ship.shape[2],ship.shape[3], bullet.x , bullet.y, ship.shape[2] / 4 ,ship.shape[3] / 4);
    });
}

enemy.js-敵機流

/**
 * 敵方飛船
 */

//輔助函數-判斷是否超出畫布範圍
function isVisible(obj) {
   return obj.x > -60 && obj.x < canvas.width + 60 && obj.y > -60 && obj.y < canvas.height + 60;
}

//每2秒在隨機橫向位置產生一個敵機
let enemyShipStream = Rx.Observable.interval(2000)
.scan((prev)=>{//敵機信息須要一個數組來記錄，因此經過scan運算符將隨機出現的敵機信息聚合   
     let newEnemy = {
        shape:[238,178,120,76],
        x:parseInt(Math.random() * canvas.width,10),
        y:50,
        isDead:false,//標記敵機是否被擊中
        bullets:[]
     }

     //定時生成子彈
     Rx.Observable.interval(1500).subscribe(()=>{
         if (!newEnemy.isDead) {//被擊中的敵人再也不產生子彈
            newEnemy.bullets.push({ x: newEnemy.x, y: newEnemy.y });
         }
         newEnemy.bullets = newEnemy.bullets.filter(isVisible);
     });
      
     prev.push(newEnemy);
     return prev.filter(isVisible);
},[]);

//繪製飛船
function paintEnemy(enemies) {
   enemies.forEach(function (enemy) {
       //繪製時增量改變敵機座標
       enemy.y = enemy.y + 3;
       enemy.x = enemy.x + parseInt(Math.random()*8 - 4,10);
       //繪製時增量改變敵機子彈座標
       enemy.bullets.forEach(function(bullet){bullet.y = bullet.y + 16;});
       //若是敵機沒掛則繪製飛機
       if (!enemy.isDead) {
         ctx.save();
         ctx.translate(enemy.x, enemy.y);
         ctx.rotate(Math.PI);
         //繪製敵機
         ctx.drawImage(spaceShipImg,enemy.shape[0],enemy.shape[1],enemy.shape[2],enemy.shape[3], 0, 0, enemy.shape[2] * 0.8 ,enemy.shape[3] * 0.8);
         ctx.restore();
       }
       //繪製子彈
       enemy.bullets.forEach(function (bullet) {
          ctx.save();
          ctx.translate(bullet.x, bullet.y);
          ctx.rotate(Math.PI);
          ctx.drawImage(spaceShipImg,enemy.shape[0],enemy.shape[1],enemy.shape[2],enemy.shape[3], 0, 0, enemy.shape[2] / 4,enemy.shape[3] / 4);
          ctx.restore();
       });
       ctx.restore();
   });
}

collision.js-碰撞檢測

// 輔助函數
function isCollision(target1, target2) {
 return (target1.x > target2.x - 50 && target1.x < target2.x + 50) && (target1.y > target2.y - 20 && target1.y < target2.y + 20);
}

//碰撞檢測方法
function checkCollision(myship, enemies) {
    let gameOver = false;
    myship.bullets.forEach(function(bullet) {
        enemies.forEach(function (enemy) { 
            //檢查是否擊中了敵機
            if (isCollision(bullet, enemy)) {
                 bullet.used = true;
                 enemy.isDead = true;
            };
            //檢查是否被擊中，被擊中則遊戲結束
            enemy.bullets.forEach(function (enemyBullet) {
                if (isCollision(myship, enemyBullet)) {
                    gameOver = true;
                }
            })
        })
    });
    return gameOver;
}

combineAll.js-融合最終的遊戲流

/**
 * 集合全部流
 */

let gameStream = Rx.Observable.combineLatest(starStream,
                                            myShipStream,
                                            enemyShipStream,
                                            function (stars,myship,enemies) {
                                             return {
                                                stars,myship,enemies
                                             }
})
.sample(40);//sample函數來規避鼠標移動事件過快觸發致使座標數據更新過快

//繪製全部元素
function paintAll(data) {
     let isGameOver;
     isGameOver = checkCollision(data.myship, data.enemies);//檢查子彈是否擊中敵人
     if (!isGameOver) {
         paintStar(data.stars);
         paintMyShip(data.myship);
         paintEnemy(data.enemies);
     }else{
        gameSubscription.dispose();
        alert('被擊中了');
     }
}

//訂閱全部彙總的流來啓動遊戲
let gameSubscription = gameStream.subscribe(paintAll);