added flow and basic game

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015"],
+  "presets": ["es2015", "flow"],
   "plugins": []
 }

main.js

@@ -1,16 +1,12 @@
-var canvas = document.getElementById("canvas")
+import Game from './src/Game'
-var ctx = canvas.getContext("2d")
+import Entity from './src/Entities/Entity'
 
+const canvas = document.getElementById("canvas")
+const ctx = canvas.getContext("2d")
 
-ctx.fillStyle = 'rgb(200,0,0)';
+const flappyGame = new Game(ctx)
-ctx.fillRect(10, 10, 55, 50);
 
+const e1 = new Entity()
+flappyGame.addEntity(e1)
 
-var fps = 30; 
+flappyGame.start()
-function draw() { 
-  setTimeout(function() {
-    requestAnimationFrame(draw); 
-    // Drawing code goes here 
-
-  }, 1000 / fps); 
-}

package.json

@@ -17,6 +17,7 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-flow": "^6.23.0",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"
   }

src/Entities/Entity.js

@@ -0,0 +1,9 @@
+
+class Entity {
+  render(ctx: CanvasRenderingContext2D){
+    ctx.fillStyle = 'rgb(200,0,0)';
+    ctx.fillRect(10, 10, 55, 50);
+  }
+}
+
+export default Entity

src/Game.js

@@ -0,0 +1,33 @@
+// @flow
+import type Entity from './Entities/Entity'
+
+const fps = 30
+
+class Game {
+
+  entities: Array<Entity>
+  ctx: CanvasRenderingContext2D
+
+  constructor(_ctx: CanvasRenderingContext2D){
+    this.entities = []
+    this.ctx = _ctx
+  }
+
+  start(){
+    this._draw()
+  }
+
+  _draw(){
+    setTimeout(() => {
+      requestAnimationFrame(() => this._draw())
+      this.entities.forEach(e => e.render(this.ctx))
+    }, 1000 / fps)
+  }
+
+  addEntity(e: Entity){
+    this.entities.push(e)
+  }
+
+}
+
+export default Game

yarn.lock

@@ -290,6 +290,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -458,6 +462,13 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1:
     babel-runtime "^6.22.0"
     regexpu-core "^2.0.0"
 
+babel-plugin-transform-flow-strip-types@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-regenerator@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
@@ -500,6 +511,12 @@ babel-preset-es2015@^6.24.1:
     babel-plugin-transform-es2015-unicode-regex "^6.24.1"
     babel-plugin-transform-regenerator "^6.24.1"
 
+babel-preset-flow@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
 babel-register@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"