I'm learining JS. I have prepared a simple color flooding game, like this one: http://www.windowscentral.com/windows-phone-game-quick-look-pixelatedPixelated.
My code - live example: http://codepen.io/anon/pen/MeKaZG?editors=0010 (Please note that I'm asking to check just theThe engine -below works, though scoring is not yet implemented).
Please Please help me find out how this code could be made better, more JS-specificidiomatic JavaScript, or more efficient... HTML code:
<!DOCTYPE html> <html> <body> <canvas id="game" width="280" height="400"></canvas> <script type="text/javascript" src="game.js"></script> </body> </html> JS code:
// 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>// 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); 
