bassguitarbill/top-down-action-adventure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DVD game

Browse Source
This commit is contained in:
Bill Rossi 2025-06-01 15:54:55 -04:00
parent ec9a4c24fc
commit aa59cd0e92
5 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>Zelder</title> <title>Zelder</title>
<script src="src/index.js" type="module"></script> <script src="src/index.js" type="module"></script>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<canvas id="game-canvas" height="600" width="800"> <canvas id="game-canvas" height="600" width="800">

13
src/actor.js Normal file
View File

@ -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")
}
}

33
src/dvd.js Normal file
View File

@ -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()
}
}

15
src/game.js
View File

@ -1,8 +1,12 @@
import Dvd from "./dvd.js"
export default class Game { export default class Game {
constructor(canvas) { constructor(canvas) {
this.canvas = canvas this.canvas = canvas
this.ctx = canvas.getContext("2d") this.ctx = canvas.getContext("2d")
this.timestamp = 0 this.timestamp = 0
this.actors = []
this.actors.push(new Dvd(this, 200, 200))
} }
start() { start() {
@ -19,16 +23,13 @@ export default class Game {
} }
tick(dt) { tick(dt) {
console.log(dt) this.actors.forEach(actor => actor.tick(dt))
} }
draw() { draw() {
const { canvas, ctx } = this const { canvas, ctx } = this
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "#222"
ctx.beginPath() ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillColor = "#FF0000" this.actors.forEach(actor => actor.draw(ctx))
ctx.rect(200, 100, 80, 50)
ctx.fill()
ctx.closePath()
} }
} }

3
style.css Normal file
View File

@ -0,0 +1,3 @@
body {
background-color: #666;
}