diff --git a/index.html b/index.html index 1b5908c..5d567a9 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Zelder + diff --git a/src/actor.js b/src/actor.js new file mode 100644 index 0000000..275b8ca --- /dev/null +++ b/src/actor.js @@ -0,0 +1,13 @@ +export default class Actor { + constructor(game) { + this.game = game + } + + tick(dt) { + console.log("Ticking an abstract actor") + } + + draw(ctx) { + console.log("Drawing an abstract actor") + } +} diff --git a/src/dvd.js b/src/dvd.js new file mode 100644 index 0000000..177a31c --- /dev/null +++ b/src/dvd.js @@ -0,0 +1,33 @@ +import Actor from "./actor.js" + +export default class Dvd extends Actor { + constructor(game, x, y) { + super(game) + this.x = x + this.y = y + this.width = 80 + this.height = 50 + this.xVel = 2 + this.yVel = 2 + this.color = "#F69" + } + + tick(dt) { + if (this.x + this.xVel < 0) this.xVel = -this.xVel + if (this.x + this.width + this.xVel > this.game.canvas.width) this.xVel = -this.xVel + + if (this.y + this.yVel < 0) this.yVel = -this.yVel + if (this.y + this.height + this.yVel > this.game.canvas.height) this.yVel = -this.yVel + + this.x += this.xVel + this.y += this.yVel + } + + draw(ctx) { + ctx.beginPath() + ctx.fillStyle = this.color + ctx.rect(this.x, this.y, this.width, this.height) + ctx.fill() + ctx.closePath() + } +} diff --git a/src/game.js b/src/game.js index 269ddfd..09685fa 100644 --- a/src/game.js +++ b/src/game.js @@ -1,8 +1,12 @@ +import Dvd from "./dvd.js" + export default class Game { constructor(canvas) { this.canvas = canvas this.ctx = canvas.getContext("2d") this.timestamp = 0 + this.actors = [] + this.actors.push(new Dvd(this, 200, 200)) } start() { @@ -19,16 +23,13 @@ export default class Game { } tick(dt) { - console.log(dt) + this.actors.forEach(actor => actor.tick(dt)) } draw() { const { canvas, ctx } = this - ctx.clearRect(0, 0, canvas.width, canvas.height) - ctx.beginPath() - ctx.fillColor = "#FF0000" - ctx.rect(200, 100, 80, 50) - ctx.fill() - ctx.closePath() + ctx.fillStyle = "#222" + ctx.fillRect(0, 0, canvas.width, canvas.height) + this.actors.forEach(actor => actor.draw(ctx)) } } diff --git a/style.css b/style.css new file mode 100644 index 0000000..4e8eca4 --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +body { + background-color: #666; +}