This commit is contained in:
Chris Wanstrath 2025-09-28 19:50:08 -07:00
parent e4464f5e46
commit 2c200d6d11
2 changed files with 22 additions and 22 deletions

View File

@ -96,23 +96,23 @@ export function update(_delta: number, input: InputState) {
if (ball.y > ROWS * CELL + 100) dead = true if (ball.y > ROWS * CELL + 100) dead = true
} }
export function draw(ctx: GameContext) { export function draw(game: GameContext) {
ctx.clear("#6C6FF6") game.clear("#6C6FF6")
const boardW = COLS * CELL const boardW = COLS * CELL
const boardH = ROWS * CELL + 100 const boardH = ROWS * CELL + 100
const offsetX = (ctx.width - boardW) / 2 const offsetX = (game.width - boardW) / 2
const offsetY = (ctx.height - boardH) / 2 const offsetY = (game.height - boardH) / 2
const c = ctx.ctx const c = game.ctx
c.save() c.save()
c.translate(offsetX, offsetY) c.translate(offsetX, offsetY)
// background // background
ctx.rectfill(0, 0, boardW, boardH, "black") game.rectfill(0, 0, boardW, boardH, "black")
// paddle // paddle
ctx.rectfill( game.rectfill(
paddleX, paddleX,
ROWS * CELL + 60, ROWS * CELL + 60,
paddleX + PADDLE_W * CELL, paddleX + PADDLE_W * CELL,
@ -121,23 +121,23 @@ export function draw(ctx: GameContext) {
) )
// ball // ball
ctx.circfill(ball.x, ball.y, 6, "red") game.circfill(ball.x, ball.y, 6, "red")
// bricks // bricks
for (const b of bricks) { for (const b of bricks) {
if (b.alive) { if (b.alive) {
const color = pickColor(b.x, b.y) const color = pickColor(b.x, b.y)
ctx.rectfill(b.x, b.y, (b.x + (CELL * 2)) - .5, (b.y + CELL) - .5, color) game.rectfill(b.x, b.y, (b.x + (CELL * 2)) - .5, (b.y + CELL) - .5, color)
} }
} }
// score! // score!
ctx.text(`Score: ${score}`, 5, boardH - 18, "cyan", 12) game.text(`Score: ${score}`, 5, boardH - 18, "cyan", 12)
c.restore() c.restore()
// ya dead // ya dead
if (dead) { if (dead) {
ctx.centerTextX("GAME OVER", boardH + 30, "red", 24) game.centerTextX("GAME OVER", boardH + 30, "red", 24)
} }
} }

View File

@ -54,29 +54,29 @@ export function update(_delta: number, input: InputState) {
} }
} }
export function draw(ctx: GameContext) { export function draw(game: GameContext) {
ctx.clear() game.clear()
ctx.rectfill(0, 0, ctx.width, ctx.height, "black") game.rectfill(0, 0, game.width, game.height, "black")
const boardW = WIDTH * CELL const boardW = WIDTH * CELL
const boardH = HEIGHT * CELL const boardH = HEIGHT * CELL
// move board center → canvas center // move board center → canvas center
const offsetX = (ctx.width - boardW) / 2 const offsetX = (game.width - boardW) / 2
const offsetY = (ctx.height - boardH) / 2 const offsetY = (game.height - boardH) / 2
console.log("X", offsetX) console.log("X", offsetX)
console.log("Y", offsetY) console.log("Y", offsetY)
const c = ctx.ctx const c = game.ctx
c.save() c.save()
c.translate(offsetX, offsetY) c.translate(offsetX, offsetY)
// board background (now local 0,0 is board top-left) // board background (now local 0,0 is board top-left)
ctx.rectfill(0, 0, boardW, boardH, "green") game.rectfill(0, 0, boardW, boardH, "green")
// food // food
ctx.rectfill( game.rectfill(
food.x * CELL, food.y * CELL, food.x * CELL, food.y * CELL,
(food.x + 1) * CELL, (food.y + 1) * CELL, (food.x + 1) * CELL, (food.y + 1) * CELL,
"lime" "lime"
@ -84,7 +84,7 @@ export function draw(ctx: GameContext) {
// snake // snake
for (const s of snake) { for (const s of snake) {
ctx.rectfill( game.rectfill(
s.x * CELL, s.y * CELL, s.x * CELL, s.y * CELL,
((s.x + 1) * CELL) + .5, ((s.y + 1) * CELL) + .5, ((s.x + 1) * CELL) + .5, ((s.y + 1) * CELL) + .5,
"magenta" "magenta"
@ -92,11 +92,11 @@ export function draw(ctx: GameContext) {
} }
// score! // score!
ctx.text(`Score: ${snake.length - 1}`, 5, boardH - 18, "cyan", 12) game.text(`Score: ${snake.length - 1}`, 5, boardH - 18, "cyan", 12)
c.restore() c.restore()
if (dead) { if (dead) {
ctx.centerText("GAME OVER", "red", 50) game.centerText("GAME OVER", "red", 50)
} }
} }