• 游戏循环
    • 示例代码
      • 辅助 js 文件
      • html
  • 使用到的操作符

    游戏循环

    作者 @barryrowe

    本食谱演示了使用组合流来创建游戏循环的一种方式。本食谱旨在突出如何用响应式的方式来重新思考现有问题。在这个示例中，我们将提供整体循环以及自上帧以来的增量时间。与此相结合的是用户输入流，以及当前的游戏状态，我们可以用它来更新我们的对象，并根据每帧的发出来将其渲染到屏幕上。

    游戏循环 - 图1

    示例代码

    (
    StackBlitz
    )

    1. import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    2. import { Observable } from 'rxjs/Observable';
    3. import { of } from 'rxjs/observable/of';
    4. import { fromEvent } from 'rxjs/observable/fromEvent';
    5. import { buffer, bufferCount, expand, filter, map,  share, tap, withLatestFrom } from 'rxjs/operators';
    7. import { IFrameData } from './frame.interface';
    8. import { KeyUtil } from './keys.util';
    9. import { clampMag, runBoundaryCheck, clampTo30FPS } from './game.util';
    11. const boundaries = {
    12.   left: 0,
    13.   top: 0,
    14.   bottom: 300,
    15.   right: 400
    16. };
    17. const bounceRateChanges = {
    18.   left: 1.1,
    19.   top: 1.2,
    20.   bottom: 1.3,
    21.   right: 1.4
    22. }
    23. const baseObjectVelocity = {
    24.   x: 30,
    25.   y: 40,
    26.   maxX: 250,
    27.   maxY: 200
    28. };
    30. const gameArea: HTMLElement = document.getElementById('game');
    31. const fps: HTMLElement = document.getElementById('fps');
    33. /**
    34.  * 这是游戏循环的核心逻辑。每一帧都更新对象和游戏状态。
    35.  * 传入的 `deltaTime` 以秒为单位，我们还给定了当前状态和任意的输入状态。
    36.  * 返回值为更新后的游戏状态。
    37.  */
    38. const update = (deltaTime: number, state: any, inputState: any): any => {
    39.   //console.log("Input State: ", inputState);
    40.   if(state['objects'] === undefined) {
    41.     state['objects'] = [
    42.       { 
    43.         // 变形属性
    44.         x: 10, y: 10, width: 20, height: 30, 
    45.         // 状态属性
    46.         isPaused: false, toggleColor: '#FF0000', color: '#000000', 
    47.         // 移动属性
    48.         velocity: baseObjectVelocity 
    49.       },
    50.       { 
    51.         // 变形属性
    52.         x: 200, y: 249, width: 50, height: 20,
    53.         // 状态属性
    54.         isPaused: false, toggleColor: '#00FF00', color: '#0000FF', 
    55.         // 移动属性
    56.         velocity: {x: -baseObjectVelocity.x, y: 2*baseObjectVelocity.y} }
    57.     ];
    58.   } else {
    60.     state['objects'].forEach((obj) => {
    61.       // 处理输入
    62.       if (inputState['spacebar']) {
    63.         obj.isPaused = !obj.isPaused;
    64.         let newColor = obj.toggleColor;        
    65.         obj.toggleColor = obj.color;
    66.         obj.color = newColor;        
    67.       }
    69.       // 处理游戏循环的更新
    70.       if(!obj.isPaused) {
    72.         // 应用速率运动
    73.         obj.x = obj.x += obj.velocity.x*deltaTime;
    74.         obj.y = obj.y += obj.velocity.y*deltaTime;  
    76.         // 边界检查
    77.         const didHit = runBoundaryCheck(obj, boundaries);    
    78.         // 处理边界调整
    79.         if(didHit){
    80.           if(didHit === 'right' || didHit === 'left') {
    81.             obj.velocity.x *= -bounceRateChanges[didHit];
    82.           } else {
    83.             obj.velocity.y *= -bounceRateChanges[didHit];
    84.           }
    85.         }
    86.       }
    88.       // 如果我们的边界反弹使得我们的速度变得太快，就钳制速度。
    89.       obj.velocity.x = clampMag(obj.velocity.x, 0, baseObjectVelocity.maxX);
    90.       obj.velocity.y = clampMag(obj.velocity.y, 0, baseObjectVelocity.maxY);
    91.     });    
    92.   }
    94.   return state;
    95. }
    97. /**
    98.  * 这是渲染函数。我们接收给定的游戏状态并根据它们的最新属性来渲染页面。
    99.  */
    100. const render = (state: any) => {
    101.   const ctx: CanvasRenderingContext2D = (/*<HTMLCanvasElement>*/gameArea).getContext('2d');
    102.   // 清除 canvas
    103.   ctx.clearRect(0, 0, gameArea.clientWidth, gameArea.clientHeight);
    105.   // 渲染所有对象 (都是简单的矩形)
    106.   state['objects'].forEach((obj) => {
    107.     ctx.fillStyle = obj.color;
    108.     ctx.fillRect(obj.x, obj.y, obj.width, obj.height);
    109.   });  
    110. };
    114. /**
    115.  * 这个函数返回一个 observable，一旦浏览器返回一个动画帧步骤，该 observable 将发出下一个帧。
    116.  * 鉴于前一帧计算得出的增量时间，我们将其钳制至30FPS，以防长帧的出现。
    117.  */
    118. const calculateStep: (prevFrame: IFrameData) => Observable<IFrameData> = (prevFrame: IFrameData) => {
    119.   return Observable.create((observer) => { 
    121.     requestAnimationFrame((frameStartTime) => {      
    122.       // 毫秒转化成秒
    123.       const deltaTime = prevFrame ? (frameStartTime - prevFrame.frameStartTime)/1000 : 0;
    124.       observer.next({
    125.         frameStartTime,
    126.         deltaTime
    127.       });
    128.     })
    129.   })
    130.   .pipe(
    131.     map(clampTo30FPS)
    132.   )
    133. };
    135. /**
    136.  * 这是帧的核心流。我们使用 `expand` 操作符来递归调用上面的 `calculateStep` 函数，
    137.  * 它会基于 `window.requestAnimationFrame` 的调用返回每一个新帧。
    138.  * `expand` 发出被调用函数返回的 observable 的值，并递归调用具有相同发出值的函数。
    139.  * 这非常适合计算我们的帧步骤，因为每个步骤都需要知道上一帧的时间来计算下一帧。
    140.  * 一旦当前请求的帧已经返回，我们还想要求一个新的帧。
    141.  */
    142. const frames$ = of(undefined)
    143.   .pipe(
    144.     expand((val) => calculateStep(val)),
    145.     // expand 发出提供给它的第一个值，
    146.     // 在这里我们只想忽略值为 undefined 的输入帧
    147.     filter(frame => frame !== undefined),
    148.     map((frame: IFrameData) => frame.deltaTime),
    149.     share()
    150.   )
    152. // 这是 keyDown 输入事件的核心流。
    153. // 每次按键后它会发出类似 `{"spacebar": 32}` 的对象
    154. const keysDown$ = fromEvent(document, 'keydown')
    155.   .pipe(
    156.     map((event: KeyboardEvent) => {
    157.       const name = KeyUtil.codeToKey(''+event.keyCode);
    158.       if (name !== ''){
    159.         let keyMap = {};
    160.         keyMap[name] = event.code;
    161.         return keyMap;
    162.       } else {
    163.         return undefined;
    164.       }      
    165.     }),
    166.     filter((keyMap) => keyMap !== undefined)
    167.   );
    169. // 这里我们将 keyDown 流缓冲起来，直到发出新的帧。
    170. // 我们将得到自从上一帧发出后的所有 keyDown 事件。
    171. // 我们将其归并为单个对象。
    172. const keysDownPerFrame$ = keysDown$
    173.   .pipe(
    174.     buffer(frames$),
    175.     map((frames: Array<any>) => {
    176.       return frames.reduce((acc, curr) => {
    177.         return Object.assign(acc, curr);
    178.       }, {});
    179.     })
    180.   );
    182. // 因为每一帧我们都会更新游戏状态，所以可以使用 Observable 作为一系列状态
    183. // 进行追踪，最新的发出值即为当前游戏状态。
    184. const gameState$ = new BehaviorSubject({});
    186. // 这是运行游戏的代码！
    187. // 我们订阅 `frames$` 流以开始，并确保组合了输入流的最新发出，以获取游戏状态更新所
    188. // 必须的数据。
    189. frames$
    190.   .pipe(
    191.     withLatestFrom(keysDownPerFrame$, gameState$),
    192.     // 课后作业: 处理 keyUp 并映射成真正的按键状态变化对象
    193.     map(([deltaTime, keysDown, gameState]) => update(deltaTime, gameState, keysDown)),
    194.     tap((gameState) => gameState$.next(gameState))
    196.   )
    197.   .subscribe((gameState) => {
    198.     render(gameState);
    199.   });
    202. // 平均每10帧计算一下FPS
    203. frames$ 
    204.   .pipe(
    205.     bufferCount(10),
    206.     map((frames) => {
    207.       const total = frames
    208.         .reduce((acc, curr) => {
    209.           acc += curr;
    210.           return acc;
    211.         }, 0);
    213.         return 1/(total/frames.length);
    214.     })
    215.   ).subscribe((avg) => {
    216.     fps.innerHTML = Math.round(avg) + '';
    217.   })
    辅助 js 文件
    • game.util.ts
    • keys.util.ts
    • frame.interface.ts
    html
    1. <canvas width="400px" height="300px" id="game"></canvas>
    2. <div id="fps"></div>
    3. <p class="instructions">
    4.   Each time a block hits a wall, it gets faster. You can hit SPACE to pause the boxes. They will change colors to show they are paused.
    5. </p>

    使用到的操作符

    • buffer
    • bufferCount
    • expand
    • filter
    • fromEvent
    • map
    • share
    • tap
    • withLatestFrom