游戏状态

作为一种代码风格，也为了帮你模块你的代码，我推荐在游戏循环里像这样组织你的代码：

  1. //Set the game state
  2. state = play;
  4. //Start the game loop
  5. app.ticker.add(delta => gameLoop(delta));
  7. function gameLoop(delta){
  9.   //Update the current game state:
  10.   state(delta);
  11. }
  13. function play(delta) {
  15.   //Move the cat 1 pixel to the right each frame
  16.   cat.vx = 1
  17.   cat.x += cat.vx;
  18. }

你会看到gameLoop每秒60次调用了state函数。state函数是什么呢？它被赋值为 play。意味着play函数会每秒运行60次。

下面的代码告诉你如何用这个新模式来重构上一个例子的代码：

  1. //Define any variables that are used in more than one function
  2. let cat, state;
  4. function setup() {
  6.   //Create the `cat` sprite
  7.   cat = new Sprite(resources["images/cat.png"].texture);
  8.   cat.y = 96;
  9.   cat.vx = 0;
  10.   cat.vy = 0;
  11.   app.stage.addChild(cat);
  13.   //Set the game state
  14.   state = play;
  16.   //Start the game loop
  17.   app.ticker.add(delta => gameLoop(delta));
  18. }
  20. function gameLoop(delta){
  22.   //Update the current game state:
  23.   state(delta);
  24. }
  26. function play(delta) {
  28.   //Move the cat 1 pixel to the right each frame
  29.   cat.vx = 1
  30.   cat.x += cat.vx;
  31. }

是的，我知道这有点儿 head-swirler! 但是，不要害怕，花几分钟在脑海中想一遍这些函数是如何联系在一起的。正如你将在下面看到的，结构化你的游戏循环代码，会使得切换游戏场景和关卡这种操作变得更简单。