In lib/game/view.ts
, we will render the game. We start with importing types that we defined earlier:
import { State, Level, Object, Wall, Side, Menu } from "./model"; import { Picture, Pictures, Translate, Scale, Rotate, Rectangle, Line, Circle, Color, Text, Empty } from "../framework/picture";
We will store the font name in a variable, so we can easily change it later:
const font = "Arial";
In draw, we will render the game. For now, that means only drawing the level. Later on, we will add a menu to the game:
export function draw(state: State, width: number, height: number) { drawLevel(state.level, width, height), }
We render the level in drawLevel
. We calculate the size of all objects with the size of the grid and the canvas:
function drawLevel(level: Level, width: number, height: number) { const scale = Math.min(width / (level.width + 1), height / (level.height + 1));
We scale
and center
the whole level with this calculated...