I'm learining JS. I have prepared a simple color flooding game, like Pixelated.
The engine below works, though scoring is not implemented. Please help me find out how this code could be made better, more idiomatic JavaScript, or more efficient.
// global variables var canvas = document.getElementById("game"); var context = canvas.getContext("2d"); var colors = ["#FF7F34", "#FF4D79", "#FFEF42", "#78E853", "#64C4FF", "#954FFF"]; var squareSize = 20; var canvasSize = 14; var buttonSize = 30; var spaceSize = 15; var board = []; var currentColor = 0; // draw 14x14 board of randomly coloured squares and add each square to 2d array 'board' function drawBoard(colors) { // draw main board for (var i = 0; i < canvasSize; i++) { var boardColumn = []; for (var j = 0; j < canvasSize; j++) { colorId = Math.floor((Math.random() * 6)) + 1; context.fillStyle = colors[colorId - 1]; context.fillRect(i*squareSize, j*squareSize, squareSize, squareSize); if (i == 0 && j == 0) { currentColor = colorId; colorId = 0; } boardColumn.push(colorId); } board.push(boardColumn); } // draw controls colors.forEach(function (value, i) { context.fillStyle = value; context.fillRect(i * (buttonSize + spaceSize) + spaceSize, squareSize * canvasSize + spaceSize, buttonSize, buttonSize); }); expandOcean(currentColor); redrawBoard(); } // click handler function clickToColor(event) { var color = 0; var x = event.x; var y = event.y; x -= canvas.offsetLeft; y -= canvas.offsetTop; var controlsOffsetTop = squareSize * canvasSize + spaceSize; colors.forEach(function(value, i) { if (x > (spaceSize + i * (spaceSize + buttonSize)) && x <= ((i + 1) * (spaceSize + buttonSize)) && y > controlsOffsetTop && y <= (controlsOffsetTop + buttonSize)) color = i + 1; }); if (color != 0 && color != currentColor) { currentColor = color; expandOcean(currentColor); redrawBoard(); } } // flooding with chosen color function expandOcean(color) { var touched = false; board.forEach(function(column, i) { column.forEach(function(value, j) { if (j + 1 < canvasSize && ((column[j] == 0 && column[j+1] == color) || (column[j] == color && column[j+1] == 0))) { board[i][j+1] = 0; board[i][j] = 0; touched = true; } }); }); board.forEach(function(column, i) { column.forEach(function(value, j) { if (i + 1 < canvasSize && ((column[j] == 0 && board[i + 1][j] == color) || (column[j] == color && board[i+1][j] == 0))) { board[i + 1][j] = 0; board[i][j] = 0; touched = true; } }); }); if (touched == true) expandOcean(color); } function redrawBoard() { board.forEach(function(column, i) { column.forEach(function(value, j) { if (board[i][j] == 0) { context.fillStyle = colors[currentColor - 1]; } else { context.fillStyle = colors[board[i][j] - 1]; } context.fillRect(i*squareSize, j*squareSize, squareSize, squareSize); }); }); } drawBoard(colors); canvas.addEventListener('click', clickToColor, false);<!DOCTYPE html> <html> <body> <canvas id="game" width="280" height="400"></canvas> <script type="text/javascript" src="game.js"></script> </body> </html>
<canvas>?\$\endgroup\$