michael/webai
1
0
Fork 0
generated from michael/webpack-base
Code Issues Pull Requests Packages Projects Releases Wiki Activity

function name cleanup

Browse Source
This commit is contained in:
Michael Peters 2024-08-02 12:05:32 -07:00
parent 8ece068331
commit b7c7589eaa
2 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/snake/canvas.ts
View File

@ -3,8 +3,17 @@ import { Engine, Keys, randint, UI, Vec2, vec2 } from './game-engine';
const BOARD_SIZE = 600; // px const BOARD_SIZE = 600; // px
const SQUARE_SIZE = 30; // px const SQUARE_SIZE = 30; // px
const CENTER_X = BOARD_SIZE / 2;
const CENTER_Y = BOARD_SIZE / 2;
const BOARD_SQUARES = BOARD_SIZE / SQUARE_SIZE; const BOARD_SQUARES = BOARD_SIZE / SQUARE_SIZE;
interface SnakeGameState {
dead: boolean;
snake: Vec2[];
apple: Vec2;
}
export default function runCanvas(canvas: HTMLCanvasElement) { export default function runCanvas(canvas: HTMLCanvasElement) {
const ui = new UI(canvas); const ui = new UI(canvas);
const keys = new Keys(); const keys = new Keys();
@ -21,7 +30,7 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
return 1000 / (5 + snakeLength) return 1000 / (5 + snakeLength)
} }
function resetState() { function resetState(): SnakeGameState {
let dead = false; let dead = false;
const snake = [vec2(1, 1), vec2(2, 1)]; const snake = [vec2(1, 1), vec2(2, 1)];
let apple = getRandApplePos(); let apple = getRandApplePos();
@ -43,7 +52,6 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
return; return;
} }
let dir = snake[snake.length - 1]!.sub(snake[snake.length - 2]!); let dir = snake[snake.length - 1]!.sub(snake[snake.length - 2]!);
const keyDirMap = { const keyDirMap = {
w: vec2(0, -1), w: vec2(0, -1),
@ -86,17 +94,16 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
} }
// rendering --------------------------------------------------------------- // rendering ---------------------------------------------------------------
function clearCanvas() {
ui.rect(0, 0, canvas.width, canvas.height);
}
function drawSquare(pos: Vec2) { function drawSquare(pos: Vec2) {
ui.rect(pos.x * SQUARE_SIZE, pos.y * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE); ui.fillRect(pos.x * SQUARE_SIZE, pos.y * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE);
} }
function render() { function render() {
const { dead, snake, apple } = state; const { dead, snake, apple } = state;
ui.setFillStyle('#333333'); ui.setFillStyle('#333333');
clearCanvas(); ui.clearCanvas();
ui.setFillStyle('#277edb'); ui.setFillStyle('#277edb');
for (const square of snake.slice(0, snake.length - 1)) { for (const square of snake.slice(0, snake.length - 1)) {
@ -109,8 +116,20 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
drawSquare(apple); drawSquare(apple);
if (dead) { if (dead) {
ui.setFillStyle('#ff0000'); const text = 'You Died'
ui.text('You Died', 60, 60); ui.setFont('40px sans-serif');
const m = ui.measureText(text);
const rw = m.width + 20;
const rh = 40 + 20;
ui.setFillStyle('#222222')
ui.fillRect(CENTER_X - rw / 2, CENTER_Y - rh / 2, rw, rh)
ui.setFillStyle('#cc0000');
ui.setTextAlign('center');
ui.setTextBaseline('middle');
ui.fillText('You Died', BOARD_SIZE / 2, BOARD_SIZE / 2);
} }
} }

30
src/components/snake/game-engine.ts
View File

@ -113,29 +113,51 @@ export class Keys {
} }
export class UI { export class UI {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
camera = vec2(0, 0); camera = vec2(0, 0);
constructor(canvasElement: HTMLCanvasElement) { constructor(canvas: HTMLCanvasElement) {
const ctx = canvasElement.getContext('2d'); const ctx = canvas.getContext('2d');
if (ctx === null) throw Error('unable to get 2d canvas context'); if (ctx === null) throw Error('unable to get 2d canvas context');
this.canvas = canvas;
this.ctx = ctx; this.ctx = ctx;
} }
setFont(font: string) {
this.ctx.font = font;
}
setTextAlign(textAlign: CanvasTextAlign) {
this.ctx.textAlign = textAlign;
}
setTextBaseline(textBaseline: CanvasTextBaseline) {
this.ctx.textBaseline = textBaseline;
}
setFillStyle(style: string) { setFillStyle(style: string) {
this.ctx.fillStyle = style; this.ctx.fillStyle = style;
} }
rect(x: number, y: number, w: number, h: number) { fillRect(x: number, y: number, w: number, h: number) {
const c = this.camera; const c = this.camera;
this.ctx.fillRect(x - c.x, y - c.y, w, h); this.ctx.fillRect(x - c.x, y - c.y, w, h);
} }
text(text: string, x: number, y: number) { fillText(text: string, x: number, y: number) {
const c = this.camera; const c = this.camera;
this.ctx.fillText(text, x - c.x, y - c.y); this.ctx.fillText(text, x - c.x, y - c.y);
} }
measureText(text: string) {
return this.ctx.measureText(text);
}
clearCanvas() {
this.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
} }
export class Engine { export class Engine {