Workshop › Bomberman-style Arena › Step 9 of 42
The player is an object with a position in tiles (x column, y row) and a target for later. It starts in the
top-left corner and is drawn as a white circle in the middle of its tile.
```js
let player // { x, y, target: null or { r, c } }
player = { x: 1, y: 1, target: null }
function drawCircle(m, color, radius) {
ctx.fillStyle = color
ctx.beginPath()
ctx.arc(m.x * TILE + TILE / 2, TOP + m.y * TILE + TILE / 2, radius, 0, Math.PI * 2)
ctx.fill()
}
drawCircle(player, '#f8fafc', 12)
```{ x: 1, y: 1, target: null } is an object; null means "nothing": no target yet.drawCircle(m, color, radius) paints a circle in the middle of whatever m is on: m.x * TILE + TILE / 2 is the
center in pixels.beginPath, arc(x, y, radius, 0, Math.PI * 2) (a full turn), then fill.let grid write let player; in reset, under makeGrid(), write the player line.function draw() { write drawCircle.draw, after the loops, write the drawCircle(player, ...) line.Skills: Game states, Drawing on a canvas
← Keep the corners clear Keys being held →