Sokoban is fun stuff.
Sokoban level format.
.is goal square
@is player, or
+if the player is on a goal square
$is box, or
*if the box is on a goal square
We have a variable called
outElement is just some
div, and like it’d also work to just do
document.body.appendChild(...) or something, but
outElement is automatically moved to where we’re at when we run some code:
The sprite sheet is a set of 8 sprites. Each sprite is 16×16 pixels.
We’ll create a canvas and put it in the
Then we can get a
CanvasRenderingContext2D and use
drawImage on that.
Also we turn off image smoothing because pixels. Also also, we multiply some numbers by 3, because more pixels.
We’re going to need objects with
y properties for a bunch of stuff. First for positions of sprites. Later for positions in the level and also for directions the player can move in. We make a
vector data structure:
We’ll create an object for keeping track of where in the sprite sheet the different sprites are. Then, by passing a bunch of arguments to
drawImage we can specify coordinates and width/height both for the part of the source image we want to draw and for the destination in the canvas. (The last 4 arguments are “destination” arguments. The ones that are multiplied by