diff --git a/main.js b/main.js index 776d32a..331dc76 100644 --- a/main.js +++ b/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) diff --git a/src/Entities/Entity.js b/src/Entities/Entity.js index 670e9e6..d3891b5 100644 --- a/src/Entities/Entity.js +++ b/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); } } diff --git a/src/Game.js b/src/Game.js index ca0a2b7..3cfb295 100644 --- a/src/Game.js +++ b/src/Game.js @@ -8,9 +8,13 @@ class Game { entities: Array 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) }