JavaScript Syntax highlighter

This is the source code for my game Scramble.
I'm using it as an example for my JavaScript syntax highlighter.

let canvas, c, w, h, scale, game, tileSize, moves, status const init = () => { moves = 0 tileSize = 96 createGame(3) canvas = document.createElement('canvas') updateCanvas() const options = document.createElement('div') const scrambleBtn = document.createElement('button') scrambleBtn.innerText = "Scramble" scrambleBtn.addEventListener('click', () => scramble(Math.floor(Math.random()*100))) const cubeSize = document.createElement('select') for(let i = 3; i < 6; i++){ const opt = document.createElement('option') opt.value = i opt.innerText = i cubeSize.appendChild(opt) } cubeSize.addEventListener('change', function(){ const value = parseInt(this.value) tileSize = 96 - (value-3) * 16 createGame(value) updateCanvas() scramble(100) }) status = document.createElement('div') status.id = 'status' options.appendChild(cubeSize) options.appendChild(scrambleBtn) document.body.appendChild(status) document.body.appendChild(canvas) document.body.appendChild(options) scramble(1000) } const updateCanvas = () => { scale = window.devicePixelRatio w = game[0].length * tileSize h = game.length * tileSize canvas.width = w * scale canvas.height = h * scale canvas.style.width = `${w}px` canvas.style.height = `${h}px` c = canvas.getContext('2d') c.scale(scale, scale) c.textAlign = "center" c.textBaseline = "middle" const fontSize = 24 c.font = `${fontSize}px Arial` canvas.addEventListener('click', move) } const createGame = num => { game = Array(num).fill().map(_ => Array(num).fill(0)) for(let i = 0; i < num; i++){ for(let j = 0; j < num; j++){ game[i][j] = (i * num + j + 1) % (num*num) } } } const getPos = e => {return {x: Math.floor(e.offsetX / tileSize), y: Math.floor(e.offsetY / tileSize)}} const draw = () => { c.clearRect(0,0,w,h) c.strokeStyle = "black" for(let i = 0; i < game.length; i++){ for(let j = 0; j < game[0].length; j++){ const piece = game[i][j] if(!piece) continue const x = j * tileSize const y = i * tileSize c.fillStyle = "white" c.fillRect(x, y, tileSize, tileSize) c.strokeRect(x, y, tileSize, tileSize) c.fillStyle = "black" c.fillText(piece, x+tileSize/2, y+tileSize/2) } } } const findEmptyPos = () => { for(let i = 0; i < game.length; i++){ for(let j = 0; j < game[0].length; j++){ if(!game[i][j]){ return {x: j, y: i} } } } } const checkInvalid = (x, y, i, j) => (y+i < 0 || y+i > game.length-1 || x+j < 0 || x+j > game[0].length-1 || i+j === 0 || i === j) const getNeighbour = pos => { let n = [] for(let i = -1; i < 2; i++){ for(let j = -1; j < 2; j++){ if(checkInvalid(pos.x, pos.y, i, j)) continue if(game[pos.y+i][pos.x+j]) n.push({x: pos.x+j, y: pos.y+i}) } } return n } const scramble = (num = 1) => { moves = 0 for(let i = 0; i < num; i++){ const emptyPos = findEmptyPos() const n = getNeighbour(emptyPos) const move = n[Math.floor(Math.random() * n.length)] tradePos(move, emptyPos) } draw() if(!checkGameWin()){ status.innerText = '' } } const lookEmptyPos = pos => { for(let i = -1; i < 2; i++){ for(let j = -1; j < 2; j++){ if(checkInvalid(pos.x, pos.y, i, j)) continue if(!game[pos.y+i][pos.x+j]) return {x: pos.x+j, y: pos.y+i} } } return null } const tradePos = (pos, newPos) => { if(!newPos) return game[newPos.y][newPos.x] = game[pos.y][pos.x] game[pos.y][pos.x] = 0 } const checkGameWin = () => { for(let i = 0; i < game.length * game[0].length - 1; i++){ const x = i % game[0].length const y = Math.floor( i / game[0].length ) if(game[y][x] != i+1) return false } return true } const move = e => { const pos = getPos(e) const newPos = lookEmptyPos(pos) tradePos(pos, newPos) status.innerText = checkGameWin() ? `Win - ${moves} moves` : '' draw() moves += 1 } init()