added example updates

main.js

@@ -2,9 +2,8 @@ import Game from './src/Game'
 import Entity from './src/Entities/Entity'
 
 const canvas = document.getElementById("canvas")
-const ctx = canvas.getContext("2d")
 
-const flappyGame = new Game(ctx)
+const flappyGame = new Game(canvas)
 
 const e1 = new Entity()
 flappyGame.addEntity(e1)

src/Entities/Entity.js

@@ -1,8 +1,23 @@
-
 class Entity {
+
+  constructor(){
+    this.size = {
+      x: 50,
+      y: 50,
+    }
+    this.pos = {
+      x: 10,
+      y: 10,
+    }
+  }
+
+  update(){
+    this.pos.x += 1;
+  }
+
   render(ctx: CanvasRenderingContext2D){
     ctx.fillStyle = 'rgb(200,0,0)';
-    ctx.fillRect(10, 10, 55, 50);
+    ctx.fillRect(this.pos.x, this.pos.y, this.size.x, this.size.y);
   }
 }
 

src/Game.js

@@ -8,9 +8,13 @@ class Game {
   entities: Array<Entity>
   ctx: CanvasRenderingContext2D
 
-  constructor(_ctx: CanvasRenderingContext2D){
+  constructor(canvas: HTMLElement){
     this.entities = []
-    this.ctx = _ctx
+    this.ctx = canvas.getContext("2d")
+    this.canvasSize = {
+      x: canvas.offsetWidth,
+      y: canvas.offsetHeight,
+    }
   }
 
   start(){
@@ -20,7 +24,11 @@ class Game {
   _draw(){
     setTimeout(() => {
       requestAnimationFrame(() => this._draw())
-      this.entities.forEach(e => e.render(this.ctx))
+      this.ctx.clearRect(0, 0, this.canvasSize.x, this.canvasSize.y)
+      this.entities.forEach(e => {
+        e.update()
+        e.render(this.ctx)
+      })
     }, 1000 / fps)
   }