【响应式编程的思维艺术】 （4）从打飞机游戏理解并发与流的融合

/**
 * 背景
 * 扩展思考：如何融入全屏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); 　
    });
}

/**
 * 自己的飞船
 * 扩展思考：如何实现右键点击时更换飞船类型?
 */

//鼠标移动流
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);
    });
}

/**
 * 敌方飞船
 */

//辅助函数-判断是否超出画布范围
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();
   });
}

// 辅助函数
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;
}

/**
 * 集合所有流
 */

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);