摘要：本文是響應式編程第三章構(gòu)建并發(fā)程序這篇文章的學習筆記。筆者在自己的實現(xiàn)中又加入了右鍵切換飛船類型的功能，必須得說開發(fā)游戲的確比寫業(yè)務邏輯要有意思。由于沒有精確計算雪碧圖的坐標，所以在碰撞檢測時會有一些偏差。

本文是Rxjs 響應式編程-第三章: 構(gòu)建并發(fā)程序這篇文章的學習筆記。
示例代碼托管在：http://www.github.com/dashnowords/blogs
更多博文：《大史住在大前端》原創(chuàng)博文目錄

盡量避免外部狀態(tài)

在基本的函數(shù)式編程中，純函數(shù)可以保障構(gòu)建出的數(shù)據(jù)管道得到確切的可預測的結(jié)果，響應式編程中有著同樣的要求，博文中的示例可以很清楚地看到，當依賴于外部狀態(tài)時，多個訂閱者在觀察同一個流時就容易互相影響而引發(fā)混亂。

當不同的流之間出現(xiàn)共享的外部依賴時，一般的實現(xiàn)思路有兩種：

將這個外部狀態(tài)獨立生成一個可觀察對象，然后根據(jù)實際邏輯需求使用正確的流合并方法將其合并。

將這個外部狀態(tài)獨立生成一個可觀察對象，然后使用Subject來將其和其他邏輯流聯(lián)系起來。

管道的執(zhí)行效率

在上一節(jié)中通過compose運算符組合純函數(shù)就可以看到，容器相關(guān)的方法幾乎全都是高階函數(shù)，這樣的做法就使得管道在構(gòu)建過程中并不不會被啟用，而是緩存組合在了一起（從上一篇的IO容器的示例中就可以看到延緩執(zhí)行的形式），當它被訂閱時才會真正啟動。

Subject類

Subject同時具備Observable和observer的功能，可訂閱消息，也可產(chǎn)生數(shù)據(jù)，一般作為流和觀察者的代理來使用，可以用來實現(xiàn)流的解耦。為了實現(xiàn)更精細的訂閱控制，Subject還提供了以下幾種方法。

AsyncSubject

AsyncSubject觀察的序列完成后它才會發(fā)出最后一個值，并永遠緩存這個值，之后訂閱這個AsyncSubject的觀察者都會立刻得到這個值。

BehaviorSubject

Observer在訂閱BehaviorSubject時，它接收最后發(fā)出的值，然后接收后續(xù)發(fā)出的值，一般要求提供一個初始值，觀察者接收到的消息就是距離訂閱時間最近的那個數(shù)據(jù)以及流后續(xù)產(chǎn)生的數(shù)據(jù)。

ReplaySubject

ReplaySubject會緩存它監(jiān)聽的流發(fā)出的值，然后將其發(fā)送給任何較晚的Observer，它可以通過在構(gòu)造函數(shù)中傳入?yún)?shù)來實現(xiàn)緩沖時間長度的設定。

原文中提供了一個非常詳細的打飛機游戲的代碼，但我仍然建議你在熟悉了其基本原理和思路后自己將它實現(xiàn)出來，然后去和原文中的代碼作對比，好搞清楚哪些東西是真的理解了，哪些只是你以為自己理解了，接著找一些很明顯的優(yōu)化點，繼續(xù)使用響應式編程的思維模式來試著實現(xiàn)它們，起初不知道從何下手是非常正常的（當然也可能是筆者的自我安慰），但這對于培養(yǎng)響應式編程思維習慣大有裨益。筆者在自己的實現(xiàn)中又加入了右鍵切換飛船類型的功能，必須得說開發(fā)游戲的確比寫業(yè)務邏輯要有意思。

由于沒有精確計算雪碧圖的坐標，所以在碰撞檢測時會有一些偏差。

關(guān)于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以后整體的流不自動觸發(fā)了

combineLatest這個運算符需要等所有的流都emit一次數(shù)據(jù)以后才會開始emit數(shù)據(jù)，因為它需要為整合在一起的每一個流保持一個最新值。所以自動啟動的方法也很簡單，為那些不容易觸發(fā)首次數(shù)據(jù)的流添加一個初始值就可以了，就像筆者在上述實現(xiàn)右鍵來更換飛船外觀時所實現(xiàn)的那樣，使用startWith運算符提供一個初始值后，在鼠標移動時combineLatest生成的飛船流就會開始生產(chǎn)數(shù)據(jù)了。另外一點需要注意的就是combineLatest結(jié)合在一起后，其中任何一個流產(chǎn)生數(shù)據(jù)都會導致合成后的流產(chǎn)生數(shù)據(jù)，由于圖例數(shù)據(jù)的坐標是在繪制函數(shù)中實現(xiàn)的，所以被動的觸發(fā)可能會打亂原有流的預期頻率，使得一些舞臺元素的位置或形狀變化更快，這種情況可以使用sample( )運算符對合并后的流進行取樣操作來限制數(shù)據(jù)觸發(fā)頻率。

一段越來越快的流

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

let enemyShipStream = Rx.Observable.interval(1500)
.scan((prev)=>{//敵機信息需要一個數(shù)組來記錄，所以通過scan運算符將隨機出現(xiàn)的敵機信息聚合
     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;
   })
});

運行的時候發(fā)現(xiàn)敵機的速度變得越來越快，很詭異，如果你看不出問題在哪，建議畫一下大理石圖，看看flatMap匯聚的總的數(shù)據(jù)流是如何構(gòu)成的，就很容易看到隨著時間推移，多個流都在操作最初的源數(shù)據(jù)，所以坐標自增的頻率越來越快。

限制scan操作符聚合結(jié)果的大小

自己寫代碼時多處使用scan操作符對產(chǎn)生的數(shù)據(jù)進行聚合，如果聚合的形式是集合形式的，其所占空間就會隨著時間推移越來越大，解決的辦法就是在scan操作符接收的回調(diào)函數(shù)中利用數(shù)組的filter方法對聚合結(jié)果進行過濾，生成新的數(shù)組并返回，以此來控制聚合結(jié)果的大小。

碰撞檢測的實現(xiàn)思路

碰撞檢測是即時生效的，所以每一幀都需要進行，最終匯總的流每次發(fā)射數(shù)據(jù)時都可以拿到所有待繪制元素的坐標信息，此時即是實現(xiàn)碰撞檢測的時機，當檢測到碰撞時，只需要在坐標數(shù)據(jù)中加個標記，然后在最初的scan的聚合方法中將符合標記的數(shù)據(jù)清除掉就可以了，檢測碰撞的邏輯和碰撞發(fā)生后的數(shù)據(jù)清除以及繪制判斷是編寫在不同地方的，在筆者提供的示例中就可以看到。

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

myspace.js-星空背景流

/**
 * 背景
 * 擴展思考：如何融入全屏resize事件來自動調(diào)整星空
 */
//將全屏初始化為畫布舞臺
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";

//生成星空
//每個數(shù)據(jù)點希望得到的數(shù)據(jù)形式是[{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){
    /*此處是默寫時的難點，靜態(tài)生成的數(shù)組流需要一直保持
    *后續(xù)的結(jié)果都是在此之上不斷累加的
    */
    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-我方飛船流

/**
 * 自己的飛船
 * 擴展思考：如何實現(xiàn)右鍵點擊時更換飛船類型?
 */

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

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

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


//鼠標左鍵流-實現(xiàn)子彈發(fā)射
let mouseClickStream = Rx.Observable.fromEvent(canvas, "click")
.sample(200)
.scan((prev,cur)=>{
   prev.push({
       x:cur.clientX,
       y:canvas.height - 50,
       used:false //標記是否已經(jīng)擊中某個飛船
   });
   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-敵機流

/**
 * 敵方飛船
 */

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

//每2秒在隨機橫向位置產(chǎn)生一個敵機
let enemyShipStream = Rx.Observable.interval(2000)
.scan((prev)=>{//敵機信息需要一個數(shù)組來記錄，所以通過scan運算符將隨機出現(xiàn)的敵機信息聚合   
     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) {//被擊中的敵人不再產(chǎn)生子彈
            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-碰撞檢測

// 輔助函數(shù)
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;
            };
            //檢查是否被擊中，被擊中則游戲結(jié)束
            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函數(shù)來規(guī)避鼠標移動事件過快觸發(fā)導致坐標數(shù)據(jù)更新過快

//繪制所有元素
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);