diff --git a/dev/main.tsx b/dev/main.tsx index cd918f3..4d76175 100644 --- a/dev/main.tsx +++ b/dev/main.tsx @@ -69,7 +69,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({ adjustGameContainer(gameContainer, width()); - const [currentScale, setCurrentScale] = createSignal(viewport.initialScale); + const [currentScale, setCurrentScale] = createSignal(viewport.scale); const [sceneData, setSceneData] = createSignal(currentScene.data); const [scenes] = createSignal(scenesRaw); const [entities, setEntities] = createSignal( diff --git a/engine/Pointer.ts b/engine/Pointer.ts index 68bd143..11994b2 100644 --- a/engine/Pointer.ts +++ b/engine/Pointer.ts @@ -54,11 +54,11 @@ function adjustPointerPosition( clientX: number, clientY: number, ): void { - const { ctx, translation: position, initialScale } = viewport; + const { ctx, translation: position, scale } = viewport; const clientRect = ctx.canvas.getBoundingClientRect(); - pointer.position.x = (clientX - clientRect.x + position.x) / initialScale; - pointer.position.y = (clientY - clientRect.y + position.y) / initialScale; + pointer.position.x = (clientX - clientRect.x + position.x) / scale; + pointer.position.y = (clientY - clientRect.y + position.y) / scale; } export function listenPointer(): () => void { diff --git a/engine/Viewport.ts b/engine/Viewport.ts index 9ebab2c..055ee42 100644 --- a/engine/Viewport.ts +++ b/engine/Viewport.ts @@ -1,7 +1,7 @@ import { createVector, type Vector } from "#/lib/Vector.ts"; export type Viewport = { - initialScale: number; + scale: number; imageSmoothing: CanvasImageSmoothing; translation: Vector; ctx: CanvasRenderingContext2D; @@ -11,7 +11,7 @@ export type Viewport = { }; export const viewport: Viewport = { - initialScale: 4, + scale: 4, imageSmoothing: { imageSmoothingEnabled: false, imageSmoothingQuality: "low", @@ -45,13 +45,13 @@ export function initViewport(): void { } export function setScale(scale: number): void { - viewport.initialScale = scale; + viewport.scale = scale; self.dispatchEvent(new Event("resize")); } export function resizeCanvas(width: number, height: number): void { const { - initialScale, + scale: initialScale, imageSmoothing, ctx, canvas, diff --git a/entities/hero/entity.ts b/entities/hero/entity.ts index c666ba9..679ae52 100644 --- a/entities/hero/entity.ts +++ b/entities/hero/entity.ts @@ -1,6 +1,7 @@ import charIdle from "#/assets/char-idle.png"; import { createAnimation, playAnimation } from "#/engine/Animation.ts"; import { defineEntity } from "#/engine/Entity.ts"; +import { keyboardInput } from "#/engine/Keyboard.ts"; import { pointer } from "#/engine/Pointer.ts"; import { fromSrc, type Sprite } from "#/lib/Sprite.ts"; @@ -25,4 +26,9 @@ process((entity, delta) => { entity.position.x = pointer.position.x; entity.position.y = pointer.position.y; } + + entity.position.x -= keyboardInput.arrowLeft ? 1 : 0; + entity.position.x += keyboardInput.arrowRight ? 1 : 0; + entity.position.y -= keyboardInput.arrowUp ? 1 : 0; + entity.position.y += keyboardInput.arrowDown ? 1 : 0; }); diff --git a/main.ts b/main.ts index 1b82e53..aa96629 100644 --- a/main.ts +++ b/main.ts @@ -6,6 +6,7 @@ import { resizeCanvas, viewport, } from "#/engine/Viewport.ts"; +import { listenKeyboard } from "./engine/Keyboard.ts"; let then = self.performance.now(); let delta = 0; @@ -32,6 +33,7 @@ function animate(timestamp: number): void { }); listenPointer(); + listenKeyboard(); animate(delta); })();