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

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

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

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

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

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

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

管道的執(zhí)行效率

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

Subject類

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

AsyncSubject

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

BehaviorSubject

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

ReplaySubject

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

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

由于沒有精確計(jì)算雪碧圖的坐標(biāo)，所以在碰撞檢測時(shí)會(huì)有一些偏差。

關(guān)于canvas的尺寸問題

建議通過以下方式來設(shè)置:

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

需要避免的幾種方式（都是只改變畫板尺寸，不改變畫布尺寸，會(huì)造成繪圖被拉伸）：

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

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

同時(shí)需要注意canvas的寬高不支持百分比設(shè)定。

Rx.Observable.combineLatest以后整體的流不自動(dòng)觸發(fā)了

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

一段越來越快的流

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

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

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

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

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

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

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

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

myspace.js-星空背景流

/**
 * 背景
 * 擴(kuò)展思考：如何融入全屏resize事件來自動(dòng)調(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";

//生成星空
//每個(gè)數(shù)據(jù)點(diǎn)希望得到的數(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){
    /*此處是默寫時(shí)的難點(diǎn)，靜態(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){
    //暴力清屏，如果不清除則上次的星星不會(huì)被擦除
    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-我方飛船流

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

//鼠標(biāo)移動(dòng)流
let mouseMoveStream = Rx.Observable.fromEvent(window, "mousemove")
.distinct() //位置發(fā)生變化時(shí)觸發(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();

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


//鼠標(biāo)左鍵流-實(shí)現(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 //標(biāo)記是否已經(jīng)擊中某個(gè)飛船
   });
   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-敵機(jī)流

/**
 * 敵方飛船
 */

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

//每2秒在隨機(jī)橫向位置產(chǎn)生一個(gè)敵機(jī)
let enemyShipStream = Rx.Observable.interval(2000)
.scan((prev)=>{//敵機(jī)信息需要一個(gè)數(shù)組來記錄，所以通過scan運(yùn)算符將隨機(jī)出現(xiàn)的敵機(jī)信息聚合   
     let newEnemy = {
        shape:[238,178,120,76],
        x:parseInt(Math.random() * canvas.width,10),
        y:50,
        isDead:false,//標(biāo)記敵機(jī)是否被擊中
        bullets:[]
     }

     //定時(shí)生成子彈
     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) {
       //繪制時(shí)增量改變敵機(jī)坐標(biāo)
       enemy.y = enemy.y + 3;
       enemy.x = enemy.x + parseInt(Math.random()*8 - 4,10);
       //繪制時(shí)增量改變敵機(jī)子彈坐標(biāo)
       enemy.bullets.forEach(function(bullet){bullet.y = bullet.y + 16;});
       //如果敵機(jī)沒掛則繪制飛機(jī)
       if (!enemy.isDead) {
         ctx.save();
         ctx.translate(enemy.x, enemy.y);
         ctx.rotate(Math.PI);
         //繪制敵機(jī)
         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) { 
            //檢查是否擊中了敵機(jī)
            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ī)避鼠標(biāo)移動(dòng)事件過快觸發(fā)導(dǎo)致坐標(biāo)數(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("被擊中了");
     }
}

//訂閱所有匯總的流來啟動(dòng)游戲
let gameSubscription = gameStream.subscribe(paintAll);