Issues with my minesweeper minigame - Developers

[CODE] <!doctype html> <html> <head> <title>Minesweeper</title> <meta name="description" content="A Simple Minesweeper game"> <style> * { padding: 0; margin: 0; font-family: sans-serif; } #logo { display: inline-block; float: left; margin: 27px 50px 0 50px; } canvas { display: inline-block; float: left; margin: 30px auto; border: 2px solid black; border-radius: 5px; } </style> </head> <body> <img id="logo" src="logo.png"> <canvas id="MyCanvas" width="640" height="640"></canvas> <script> var canvas = document.getElementById("MyCanvas"); var ctx = canvas.getContext("2d"); var Game = {}; // 0 revealed not a bomb // 1 is revealed bomb // 2 is hidden not a bomb // 3 is hidden bomb var blocks = {}; var blockNum = 25; var bombs = 5; var isRevealed = false; var isPlaying = true; Game.reveal = function(x, y) { if(x < 128) { if(y < 128) { if(blocks[0] == 2) { blocks[0] = 0; } else if(blocks[0] == 3) { blocks[0] == 1; } } else if(y < 256) { if(blocks[5] == 2) { blocks[5] = 0; } else if(blocks[5] == 3) { blocks[5] == 1; } } else if(y < 384) { if(blocks[10] == 2) { blocks[10] = 0; } else if(blocks[10] == 3) { blocks[10] == 1; } } else if(y < 512) { if(blocks[15] == 2) { blocks[15] = 0; } else if(blocks[15] == 3) { blocks[15] == 1; } } else if(y < 640) { if(blocks[20] == 2) { blocks[20] = 0; } else if(blocks[20] == 3) { blocks[20] == 1; } } } else if(x < 256) { if(y < 128) { if(blocks[1] == 2) { blocks[1] = 0; } else if(blocks[1] == 3) { blocks[1] == 1; } } else if(y < 256) { if(blocks[6] == 2) { blocks[6] = 0; } else if(blocks[6] == 3) { blocks[6] == 1; } } else if(y < 384) { if(blocks[11] == 2) { blocks[11] = 0; } else if(blocks[11] == 3) { blocks[11] == 1; } } else if(y < 512) { if(blocks[16] == 2) { blocks[16] = 0; } else if(blocks[16] == 3) { blocks[16] == 1; } } else if(y < 640) { if(blocks[21] == 2) { blocks[21] = 0; } else if(blocks[21] == 3) { blocks[21] == 1; } } } else if(x < 384) { if(y < 128) { if(blocks[2] == 2) { blocks[2] = 0; } else if(blocks[2] == 3) { blocks[2] == 1; } } else if(y < 256) { if(blocks[7] == 2) { blocks[7] = 0; } else if(blocks[7] == 3) { blocks[7] == 1; } } else if(y < 384) { if(blocks[12] == 2) { blocks[12] = 0; } else if(blocks[12] == 3) { blocks[12] == 1; } } else if(y < 512) { if(blocks[17] == 2) { blocks[17] = 0; } else if(blocks[17] == 3) { blocks[17] == 1; } } else if(y < 640) { if(blocks[22] == 2) { blocks[22] = 0; } else if(blocks[22] == 3) { blocks[22] == 1; } } } else if(x < 512) { if(y < 128) { if(blocks[3] == 2) { blocks[3] = 0; } else if(blocks[3] == 3) { blocks[3] == 1; } } else if(y < 256) { if(blocks[8] == 2) { blocks[8] = 0; } else if(blocks[8] == 3) { blocks[8] == 1; } } else if(y < 384) { if(blocks[13] == 2) { blocks[13] = 0; } else if(blocks[13] == 3) { blocks[13] == 1; } } else if(y < 512) { if(blocks[18] == 2) { blocks[18] = 0; } else if(blocks[18] == 3) { blocks[18] == 1; } } else if(y < 640) { if(blocks[23] == 2) { blocks[23] = 0; } else if(blocks[23] == 3) { blocks[23] == 1; } } } else if(x < 640) { if(y < 128) { if(blocks[4] == 2) { blocks[4] = 0; } else if(blocks[4] == 3) { blocks[4] == 1; } } else if(y < 256) { if(blocks[9] == 2) { blocks[9] = 0; } else if(blocks[9] == 3) { blocks[9] == 1; } } else if(y < 384) { if(blocks[14] == 2) { blocks[14] = 0; } else if(blocks[14] == 3) { blocks[14] == 1; } } else if(y < 512) { if(blocks[19] == 2) { blocks[19] = 0; } else if(blocks[19] == 3) { blocks[19] == 1; } } else if(y < 640) { if(blocks[24] == 2) { blocks[24] = 0; } else if(blocks[24] == 3) { blocks[24] == 1; } } } } canvas.addEventListener('mousedown', function(e) { console.log("Pressed"); Game.reveal(e.clientX, e.clientY); }); Game.setup = function() { console.log("Seting up"); for(i = 0; i < blockNum; i++) { blocks[i] = 2; } for(i = 0; i < bombs; i++) { var randomNumber = Math.floor(Math.random() * (blockNum)) //+ 1 while(blocks[randomNumber] == 3) { randomNumber = Math.floor(Math.random() * (blockNum)) //+ 1 } blocks[randomNumber] = 3; } for(i = 1; i < blockNum + 1; i++) { console.log(blocks[i-1] + " "); if(i % 5 == 0) { console.log(""); } } } Game.draw = function() { var q = 0; for(y = 0; y < blockNum/5; y++) { for(x = 0; x < blockNum/5; x++) { ctx.beginPath(); ctx.strokeStyle = "#c3c3c3" ctx.strokeRect(x * 128, y * 128, 128, 128); ctx.closePath(); ctx.closePath(); ctx.beginPath(); ctx.rect(x * 128, y * 128, 128, 128); ctx.fillStyle = "#fff"; if(isRevealed) { if(blocks[q] == 0 || blocks[q] == 2) { ctx.fillStyle = "#fff"; } else if(blocks[q] == 1 || blocks[q] == 3){ ctx.fillStyle = "#000"; } } else if(isPlaying) { if(blocks[q] == 0) { ctx.fillStyle = "#c3c3c3"; } else if(blocks[q] == 1) { ctx.fillStyle = "#000"; } else if(blocks[q] == 2) { ctx.fillStyle = "#fff"; } else if(blocks[q] == 3) { ctx.fillStyle = "#fff;" } } ctx.fill(); ctx.closePath(); q++; } } q = 0; } Game.update = function() { } Game.setup(); Game.run = function() {Game.update(); Game.draw()} Game._intervalID = setInterval(Game.run, 100 / 60); </script> </body> </html> [/CODE] It was all working fine until i tried to reveal tiles when they are clicked :/ The wrong tiles are revealed when i click... Any Ideas? Thanks so much in advance :)

Your code is very disgusting, but a quick fix is adding x -= 125 y -= 33 at the beginning of your Game.reveal function. Although, I highly suggest rewritting your game. Hardcoded values are bad.

[QUOTE=PigeonPatrol;49034981]Your code is very disgusting, but a quick fix is adding x -= 125 y -= 33 at the beginning of your Game.reveal function. Although, I highly suggest rewritting your game. Hardcoded values are bad.[/QUOTE] I don't know what im doing wrong :/

The problem with your code is all those if statements and redundancy (what do all these magic numbers represent).

[QUOTE=BOT Ferris;49035173]I don't know what im doing wrong :/[/QUOTE] several things 1. that giant if-block is an abomination 2. you have to offset the mouse position to align with the grid, by adding the difference between the topleft of the page (which is 0, 0) and the topleft of the canvas 3. you had a == instead of = 4. having a constant variable containing a number that is often repeated in code (like 128) is a good idea and improves readibility if you ever find yourself copy and pasting the same code over and over with only small differences, look for patterns. code should never have to be ugly. [code] const GRID_SIZE = 128; Game.reveal = function(x, y) { var gridX = Math.floor(x / GRID_SIZE); var gridY = Math.floor(y / GRID_SIZE); var i = (gridY * 5) + gridX; if(blocks[i] == 2) { blocks[i] = 0; } else if(blocks[i] == 3) { blocks[i] = 1; } } canvas.addEventListener('mousedown', function(e) { console.log("Pressed"); Game.reveal(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); });[/code]