O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing the view

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required