var canvas, ctx; //class Tile function Tile(m) { this.mine = m; this.flagged = false; this.revealed = false; this.mineNeighbors = 0; } function get(x, y) { if (x < 0 || x >= field[0].length || y < 0 || y >= field.length) { var t = new Tile(false); t.revealed = true; return t; } return field[y][x]; } function neighbors(x, y) { function g(dx, dy) { return get(x + dx, y + dy); } return [ g(1, 0), g(1, 1), g(0, 1), g(-1, 1), g(-1, 0), g(-1, -1), g(0, -1), g(1, -1) ]; } function reveal(x, y) { if (x < 0 || x >= field[0].length || y < 0 || y >= field.length || showMines) { return; } if (field[y][x].revealed || field[y][x].flagged || field[y][x].mine === undefined) { return; } if (field[y][x].mine) { lose(); return; } var t = field[y][x]; t.revealed = true; var n = neighbors(x, y); var m = n.filter(function(v) { return v.mine }).length; if (m === 0) { reveal(x + 1, y); reveal(x + 1, y + 1); reveal(x, y + 1); reveal(x - 1, y + 1); reveal(x - 1, y); reveal(x - 1, y - 1); reveal(x, y - 1); reveal(x + 1, y - 1); } } var mines = 0; var flagged = 0; function createField(w, h, M) { var m = []; //create matrix of Tiles for (let y = 0; y < h; y++) { m[y] = []; for (let x = 0; x < w; x++) { m[y][x] = new Tile(false); } } //set number of Tiles to a mine for (let i = 0; i < M; i++) { let x = Math.floor(Math.random() * w); let y = Math.floor(Math.random() * h); while (m[y][x].mine) { x = Math.floor(Math.random() * w); y = Math.floor(Math.random() * h); } m[y][x].mine = true; } //tileWidth = canvas.width / w //tileHeight = canvas.height / h mines = M; return m; } function snapToGrid(x, y) { var gridX = Math.floor((x + camX) / tileWidth); var gridY = Math.floor((y + camY) / tileHeight); //console.log(gridX); //console.log(gridY); return {x: gridX, y: gridY}; } function btn_reset() { var w = document.getElementById("gamewidth").value; var h = document.getElementById("gameheight").value; var m = document.getElementById("gamemines").value; field = createField(w, h, m); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++ ){ field[y][x].mineNeighbors = neighbors(x, y).filter(function(v) { return v.mine }).length; } } document.getElementById("flagged").innerHTML = (mines - flagged).toString(); showMines = false; camX = 0; camY = 0; } var tileWidth = 30, tileHeight = 30, field; var camX = 0, camY = 0; var showMines = false; function lose() { showMines = true; } function init() { canvas = document.getElementById("game"); ctx = canvas.getContext("2d"); btn_reset(); var lastTouchX = 0; var lastTouchY = 0; var touchMoved = false; var lastTouchTime = 0; //keyboard controls canvas.addEventListener("mousedown", function(event) { mouse.down = true; mouse.x = event.pageX - canvas.offsetLeft; mouse.y = event.pageY - canvas.offsetTop; var s = snapToGrid(mouse.x, mouse.y); if (event.shiftKey && !showMines) { var t = get(s.x, s.y); if (!t.revealed) { t.flagged = !t.flagged; } } else { reveal(s.x, s.y); } }); canvas.addEventListener("mouseup", function(event) { mouse.down = false; }); window.addEventListener("mousemove", function(event) { mouse.x = event.pageX - canvas.offsetLeft; mouse.y = event.pageY - canvas.offsetTop; }); window.addEventListener("keydown", function(event) { event.preventDefault(); keys[event.keyCode] = true; }); window.addEventListener("keyup", function(event) { keys[event.keyCode] = false; }); //touch controls canvas.addEventListener("touchstart", function(event) { event.preventDefault(); mouse.down = true; mouse.x = event.touches[0].pageX - canvas.offsetLeft; mouse.y = event.touches[0].pageY - canvas.offsetTop; lastTouchX = mouse.x; lastTouchY = mouse.y; lastTouchTime = Date.now(); }); canvas.addEventListener("touchend", function(event) { mouse.down = false; if (!touchMoved) { var s = snapToGrid(mouse.x, mouse.y); console.log(Date.now() - lastTouchTime); if (Date.now() - lastTouchTime > 500 && !showMines) { var t = get(s.x, s.y); if (!t.revealed) { t.flagged = !t.flagged; } } reveal(s.x, s.y); } touchMoved = false; }); canvas.addEventListener("touchmove", function(event) { event.preventDefault(); if (touchMoved) { mouse.x = event.touches[0].pageX - canvas.offsetLeft; mouse.y = event.touches[0].pageY - canvas.offsetTop; } camX -= mouse.x - lastTouchX; camY -= mouse.y - lastTouchY; if (Math.abs(event.touches[0].pageX - canvas.offsetLeft - lastTouchX) >= 2 || Math.abs(event.touches[0].pageY - canvas.offsetTop - lastTouchY) >= 2) { touchMoved = true; } lastTouchX = mouse.x; lastTouchY = mouse.y; }); function animate() { update(); requestAnimationFrame(animate); } animate(); } var keys = []; var mouse = { x: 0, y: 0, down: false }; var colors = [ null, "green", "#0060f0", "#f60", "#f00", "#f3f", "purple", "gray", "black" ] function update() { flagged = 0 //bg ctx.fillStyle = "black"; ctx.fillRect(0, 0, canvas.width, canvas.height); //draw field ctx.font = tileWidth / 2 + "px Monospace" ctx.textBaseline = "center" for (let y = 0; y < field.length; y++) { for (let x = 0; x < field[y].length; x++) { if (field[y][x].revealed) { ctx.strokeStyle = "gray"; ctx.fillStyle = "white"; } else { if (field[y][x].flagged) { ctx.strokeStyle = "black"; ctx.fillStyle = "red"; flagged++; } else { ctx.strokeStyle = "black"; ctx.fillStyle = "#ffcc00"; } } if (showMines && field[y][x].mine) { ctx.fillStyle = "gray" } ctx.fillRect(x * tileWidth - camX, y * tileHeight - camY, tileWidth, tileHeight); ctx.strokeRect(x * tileWidth - camX, y * tileHeight - camY, tileWidth, tileHeight); var n = field[y][x].mineNeighbors if (n > 0 && field[y][x].revealed) { ctx.fillStyle = colors[n] ctx.fillText(n.toString(), (x * tileWidth) - camX, (y * tileHeight + tileHeight / 2) - camY); } } } document.getElementById("flagged").innerHTML = (mines - flagged).toString(); //camera if (keys[39]) { camX += 5; } if (keys[37]) { camX -= 5; } if (keys[40]) { camY += 5; } if (keys[38]) { camY -= 5; } } window.onload = init;

minesweeper