游戏循环

作者 @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 文件
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>

使用到的操作符