# 8 - Flappy Bird 2021!

- At this point you may be wondering if you can create a game with TIGL ? the answer is yes ! and that's the purpose of this last demo wich is a reboot of the famous Flappy Bird and wich fit in approximativly 300 lines of codes.
- See the full code below to learn more about it.
  # myView.xml

      1
      2
      3
      4
      5
      6
      7
      <Alloy>
        <Window>
          <ActionBar/>
          <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize" onLoop="loop" onTouch="touch"/>
          <WebView/>
        </Window>
      </Alloy>

  # myView.js

        1
        2
        3
        4
        5
        6
        7
        8
        9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93
       94
       95
       96
       97
       98
       99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
      175
      176
      177
      178
      179
      180
      181
      182
      183
      184
      185
      186
      187
      188
      189
      190
      191
      192
      193
      194
      195
      196
      197
      198
      199
      200
      201
      202
      203
      204
      205
      206
      207
      208
      209
      210
      211
      212
      213
      214
      215
      216
      217
      218
      219
      220
      221
      222
      223
      224
      225
      226
      227
      228
      229
      230
      231
      232
      233
      234
      235
      236
      237
      238
      239
      240
      241
      242
      243
      244
      245
      246
      247
      248
      249
      250
      251
      252
      253
      254
      255
      256
      257
      258
      259
      260
      261
      262
      263
      264
      265
      266
      267
      268
      269
      270
      271
      272
      273
      274
      275
      276
      277
      278
      279
      280
      281
      282
      283
      284
      285
      286
      287
      288
      289
      290
      291
      292
      293
      294
      295
      296
      297
      298
      299
      300
      301
      302
      303
      304
      305
      306
      307
      308
      309
      310
      311
      312
      313
      314
      315
      316
      317
      318
      319
      320
      321
      322
      323
      324
      325
      326
      327
      328
      329
      330
      331
      332
      333
      334
      335
      336
      337
      338
      339
      340
      341
      342
      343
      344
      345
      346
      347
      348
      349
      350
      351
      352
      353
      354
      355
      356
      357
      358
      359
      360
      361
      362
      363
      364
      365
      366
      367
      368
      369
      370
      371
      372
      373
      374
      375
      376
      377
      378
      379
      380
      381
      382
      383
      384
      385
      386
      387
      388
      389
      390
      391
      392
      393
      394
      395
      396
      397
      398
      399
      400
      401
      402
      403
      404
      405
      406
      407
      408
      409
      410
      /*
       * Import TIGL manager
       */
      const TIGLManager = require("tiglmanager");

      /*
       * Import Pseudo Random generator
       */
      const Random = require("random");

      /*
       * Import Tween module (https://github.com/tweenjs/tween.js/)
       */
      const Tween = require("tween.cjs");

      /*
       * Some globals vars
       */
      var tm;                         //TIGL Manager
      var gameStage;                  //Current game stage
      var gameStageStartTime = 0;     //Current game stage start time
      var worldSpeed = 0.2;           //World speed units/ms => 200 units/second
      var frameTime = 0;              //Current frame time (ms)
      var lastFrameTime = 0;          //Last frame time (ms)
      var width = 0;                  //View width
      var height = 0;                 //View height
      var ground;                     //Ground sprite
      var ready;                      //Ready! sprite
      var gameover;                   //Gameover sprite
      var bird;                       //Bird sprite
      var gravity = 1750;             //Gravity
      var groundHeight = Alloy.isTablet ? 128 : 64;         //Ground height

      var pipesUp = new Array();      //Pipes pointing up sprites
      var pipesDown = new Array();    //Pipes pointing down sprites
      var miscs = new Array();
      var lastPipeCreateTime = 0;     //Last time game try of creating pipes

      var random = new Random(0);

      /*
       * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
       */
      function init()
      {
          /*
           * Create and initialise TIGL manager
           */
          tm = new TIGLManager(this);

          /*
           * Load Sky
           */
          tm.addSprite({url: "Resources/flappyBird/sky.png", width: 2000, height: 2000, tile: true, layer: 0});

          /*
           * Load Ground
           */
          // ground = tm.addSprite({url: "Resources/flappyBird/ground.png", width: 256*50, height: 256, tile: true, layer: 5});
          ground = tm.addSprite({url: "Resources/flappyBird/ground.png", width: 256*50, height: 256, tile: true, layer: 5});

          /*
           * Load Bird animation
           */
          bird = tm.addSprite({url: "Resources/flappyBird/bird.png", width: 128, height: 128, px: 66, py: 70, x: 100, y: 100, layer: 1});

          /*
           * Load gameover
           */
          gameover = tm.addSprite({url: "Resources/flappyBird/gameover.png", width: 518, height: 164, px: 259, py: 82, y: -500,layer: 10});

          /*
           * Load ready
           */
          ready = tm.addSprite({url: "Resources/flappyBird/ready.png", width: 500, height: 150, px: 250, py: 75, y: -500, layer: 10});

          /*
          * Wait resize at least once to start
          */
          waitToStart();

      }

      /*
       * If view has been resized, start the game
       *  if not wait 100ms and retry
       */
      function waitToStart()
      {
          if(width != 0 && height != 0)
          {
              setGameStage("starting");
              return;
          }
          setTimeout(waitToStart, 100);
      }

      /*
       * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
       */
      function resize(e)
      {
          width = parseInt(e.width);
          height = parseInt(e.height);
          ground.y = height - groundHeight;
      }

      /*
       * Change game stage
       * Here set actions required when game stage is changing
       */
      function setGameStage(newGameStage)
      {
          switch(newGameStage)
          {
              /*
               * Action if current game stage become "starting"
               */
              case "starting":
                  if(gameStage == "gameover")
                  {
                      gameover.x = width/2;
                      gameover.y = -90;

                      for(var n = 0; n < pipesUp.length; n++)
                      {
                          pipesUp[n].remove();
                      }
                      pipesUp = new Array();

                      for(var n = 0; n < pipesDown.length; n++)
                      {
                          pipesDown[n].remove();
                      }
                      pipesDown = new Array();

                      for(var n = 0; n < miscs.length; n++)
                      {
                          miscs[n].remove();
                      }
                      miscs = new Array();
                  }

                  ready.x = width/2;
                  ready.y = (height - groundHeight) / 2;
                  new Tween.Tween(ready)
                  .to({y: -90}, 1000)
                  .easing(Tween.Easing.Elastic.In).delay(1500).start();

                  bird.playAnimation({loop: 0, pingpong: true, duration: 300});
                  random = new Random(1);
              break;

              /*
               * Action if current game stage become "gameover"
               */
              case "gameover":
                  bird.playAnimation({loop: 1, duration: 0});
                  new Tween.Tween(bird)
                              .to({y: bird.y - 200}, 500)
                              .easing(Tween.Easing.Quadratic.Out).chain(new Tween.Tween(bird)
                              .to({y: ground.y}, 500)
                              .easing(Tween.Easing.Quadratic.In)).start();

                  gameover.x = width/2;
                  gameover.y = -90;
                  new Tween.Tween(gameover)
                              .to({x: width/2, y: (height - groundHeight)/2}, 1000)
                              .easing(Tween.Easing.Elastic.Out).delay(1000).start();
              break;
          }
          gameStage = newGameStage;
          gameStageStartTime = Date.now();
      }

      /*
       * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
       * This is called for each frame
       * Here set actions depending on current game stage
       */
      function loop()
      {
          frameTime = Date.now();
          switch(gameStage)
          {

              /*
               * Actions, if current game stage is "starting"
               */
              case "starting" :
                  updateWorld();
                  bird.y = (height - groundHeight) * 0.5;
                  bird.vy = 0;
                  bird.r = 0;
                  if(gameStageDuration() > 3000)
                  {
                      setGameStage("running");
                  }
              break;

              /*
               * Actions, if current game stage is "running"
               */
              case "running" :
                  updateWorld();
                  updateBird();
                  updatePipes();
                  performCollisions();
              break;

          }
          lastFrameTime = frameTime;
          Tween.update(); //Requiered for tweens to be updated
      }

      /*
       * Bird updating when the game is running
       */
      function updateBird()
      {
          bird.vy += gravity * frameDuration();       //Move bird up or down depending on vertical speed
          bird.vy *= 0.99;                            //Some friction
          bird.targetRotate = 45 * bird.vy / 1000;    //Rotate bird dependingon vertical speed
          bird.r += (bird.targetRotate - bird.r) * 0.7;
          bird.y += bird.vy * frameDuration();        //Move bird up or down
      }

      /*
       * World updating  when the game is running
       */
      function updateWorld()
      {
          /*
           * Move ground
           */
          ground.x = - (Date.now() * worldSpeed) % 595;
          ground.y = height - groundHeight;

          /*
           * Move pipes upward
           */
          for(var n = 0; n < pipesUp.length; n++)
          {
              var pipe = pipesUp[n];
              pipe.x = pipe.startX - (Date.now()- pipe.startTime) * worldSpeed;
          }

          /*
           * Move pipes downard
           */
          for(var n = 0; n < pipesDown.length; n++)
          {
              var pipe = pipesDown[n];
              pipe.x = pipe.startX - (Date.now()- pipe.startTime) * worldSpeed;
          }

          /*
           * Move miscs objects
           */
          for(var n = 0; n < miscs.length; n++)
          {
              var misc = miscs[n];
              misc.x = misc.startX - (Date.now()- misc.startTime) * worldSpeed;
          }
      }

      /*
       * Pipes updating  when the game is running
       */
      function updatePipes()
      {
          /*
           * If last update was less than 2s ago, do nothing
           */
         if((Date.now() - lastPipeCreateTime) > 1500)
         {
             /*
              * Compute random height for tube
              * @todo: use a pseudo random number generator to always get same level
              */
              var topPostion = random.nextFloat() * (height - groundHeight) / 2 + (height - groundHeight) / 2;

              /*
               * Get a random value that determine if we create a pipe upward, downward or both
               * @todo: use a pseudo random number generator to always get same level
               */
              var rand = Math.floor(random.nextFloat() * 7);// Math.floor(Math.random() * 7);

              /*
               * Create a pipe upward randomly
               */
              if(rand == 1 || rand == 2 || rand == 3 || rand == 4 || rand == 5)
              {
                  Ti.API.info("pipe 1");
                  var pipe = tm.addSprite({url: "Resources/flappyBird/pipeUp.png", width: 125, x: width + 100, y: topPostion, px: 62});
                  pipe.startX = pipe.x;
                  pipe.startTime = Date.now();
                  pipesUp.push(pipe);

                  var grass = tm.addSprite({url: "Resources/flappyBird/grass.png", x: width + 100, y: height - groundHeight, px: 75, py: 37, layer: 6});
                  grass.startX = grass.x;
                  Ti.API.info("grass.startX = " + grass.startX);
                  grass.startTime = Date.now();
                  miscs.push(grass);
              }

              /*
               * Create a pipe downard randomly
               */
              if(rand == 2 || rand == 3 || rand == 4 || rand == 5 || rand == 6)
              {
                  Ti.API.info("pipe 2");
                  var pipe = tm.addSprite({url: "Resources/flappyBird/pipeDown.png", width: 125, x: width + 100, y: topPostion - 130, px: 62, sy: -1});
                  pipe.startX = pipe.x;
                  pipe.startTime = Date.now();
                  pipesDown.push(pipe);
              }
              lastPipeCreateTime = Date.now();
         }

      }

      /*
       * Test for bird collisions on ground or pipes
       */
      function performCollisions()
      {
          /*
           * Collision on ground ?
           */
          if(bird.y > ground.y - 20)
          {
              setGameStage("gameover");
          }

          /*
           * Collision on pipes upward ?
           */
          for(var n = 0; n < pipesUp.length; n++)
          {
              var pipe = pipesUp[n];
              if(bird.x > pipe.x - 82 && bird.x<pipe.x + 82 && bird.y > pipe.y - 20)
              {
                  setGameStage("gameover");
              }
          }

          /*
           * Collision on pipes downward ?
           */
          for(var n = 0; n < pipesDown.length; n++)
          {
              var pipe = pipesDown[n];
              if(bird.x > pipe.x - 82 && bird.x<pipe.x + 82 && bird.y < pipe.y + 20)
              {
                  setGameStage("gameover");
              }

          }
      }

      /*
       * Return the current frame duration in second
       */
      function frameDuration()
      {
          if(lastFrameTime == 0)
          {
              return 0;
          }
          return (frameTime - lastFrameTime) * 0.001;
      }

      /*
       * Return the current game stage duration in ms
       */
      function gameStageDuration()
      {
          return Date.now() - gameStageStartTime;
      }

      /*
       * Touch must be declared as an attribute of the Alloy tag TIGLView (eg: onTouch="touch")
       * Manage touch events
       */
      function touch(e)
      {
         switch(e.action)
         {
             case "down" :
                  if(gameStage == "running")
                  {
                      bird.vy = -500;
                  }
              break;

              case "up" :
                  if(gameStage == "gameover" && gameStageDuration() > 2000)
                  {
                      setGameStage("starting");
                  }
              break;
         }

      }