diff --git a/common.ts b/common.ts index 3a0edf1..e6fdea3 100644 --- a/common.ts +++ b/common.ts @@ -69,7 +69,7 @@ export function drawCircle(ctx: CanvasRenderingContext2D, center: Point, radius: ctx.save(); ctx.beginPath(); ctx.arc(center.x, center.y, radius, 0, 2*Math.PI); - ctx.strokeStyle = `#${color.toString(16)}` + ctx.strokeStyle = rgbToString(color); ctx.lineWidth = 5; ctx.stroke(); ctx.restore(); @@ -79,7 +79,7 @@ export function fillCircle(ctx: CanvasRenderingContext2D, center: Point, radius: ctx.save(); ctx.beginPath(); ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI); - ctx.fillStyle = `#${color.toString(16)}`; + ctx.fillStyle = rgbToString(color); ctx.fill(); ctx.restore(); } @@ -88,13 +88,17 @@ export function drawLine(ctx: CanvasRenderingContext2D, start: Point, end: Point ctx.save(); ctx.beginPath(); if (dashed) ctx.setLineDash([5, 5]); - ctx.strokeStyle = `#${color.toString(16)}` + ctx.strokeStyle = rgbToString(color); ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke(); ctx.restore(); } +function rgbToString(color: number) { + return `#${color.toString(16).padStart(6, '0')}`; +} + export function drawDashedLine(ctx: CanvasRenderingContext2D, start: Point, end: Point, color: number) { drawLine(ctx, start, end, color, true); } diff --git a/snake.ts b/snake.ts index bf6341b..0f55541 100644 --- a/snake.ts +++ b/snake.ts @@ -8,7 +8,6 @@ const SEGMENT_SPACING = SNAKE_RADIUS + SNAKE_PADDING; const HEAD_COLOR = 0xf43f5e; const TAIL_COLOR = 0xf4c3cc; const APPLE_COLOR = 0x58f474; -const APPLE_COLOR_2 = 0x0a6f4b4; const DIRECTIONS = { up: new Vec2d(0, -1), @@ -17,8 +16,11 @@ const DIRECTIONS = { right: new Vec2d(1, 0) } +function initSnake(pos: Vec2d, len: number) { + return Array.from({ length: len }, (_, i) => pos.add(DIRECTIONS.left.scale(i * SEGMENT_SPACING))); +} // state -let snake = [new Vec2d(100, 100), new Vec2d(100 - SEGMENT_SPACING, 100), new Vec2d(100 - SEGMENT_SPACING * 2, 100)]; +let snake = initSnake(new Vec2d(200, 200), 10); let apple: Vec2d | undefined = undefined; let velocity: Vec2d = new Vec2d(0, 0); // unit vector let speed = 200; // px/s @@ -48,6 +50,17 @@ function drawSnake(ctx: CanvasRenderingContext2D, bounds: Vec2d) { fillCircle(ctx, tail, SNAKE_RADIUS / 2, TAIL_COLOR) } +function drawSnakeTube(ctx: CanvasRenderingContext2D, pts: Vec2d[]) { + ctx.beginPath(); + ctx.moveTo(pts[0].x, pts[0].y); + for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y); + ctx.strokeStyle = "#f43f5e"; + ctx.lineWidth = SNAKE_RADIUS * 2; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + ctx.stroke(); +} + function update(ctx: CanvasRenderingContext2D, time: number) { if (lastTime == null) lastTime = time; const dt = (time - lastTime) / 1000; // s @@ -65,7 +78,8 @@ function update(ctx: CanvasRenderingContext2D, time: number) { const dist = delta.length(); if (dist > SEGMENT_SPACING) { const unit = delta.scale(1 / dist); // unit vector in direction of delta - snake[i] = leader.sub(unit.scale(SEGMENT_SPACING)); + const target = leader.sub(unit.scale(SEGMENT_SPACING)); + snake[i] = target; } } diff --git a/tsconfig.json b/tsconfig.json index 9e19d86..6cbb255 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ /* Language and Environment */ - "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + "target": "es2017", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "jsx": "preserve", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */