maybe
This commit is contained in:
parent
e4464f5e46
commit
2c200d6d11
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user