I'm learining JS. I have prepared a simple color flooding game, like [_Pixelated_](http://www.windowscentral.com/windows-phone-game-quick-look-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.
<!-- begin snippet: js hide: false console: true -->
<!-- language: lang-js -->
// 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);
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<canvas id="game" width="280" height="400"></canvas>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
<!-- end snippet -->