var can; var c; var CELL_WIDTH = 60; var CELLS_APART = CELL_WIDTH / 20; var CELL_LIT_COLOR = "#FFAF00"; var CELL_HINT_COLOR = "rgba(255, 176, 0, 0.4)"; var INTERACTIVES_MAX_AMOUNT = 25; var INTERACTIVES_AMOUNT; var CURRENT_SEED; var grid; var selected; var solution; var inGame = true; var mouseDown = false; document.addEventListener('touchstart', function(e) { playerCursorInteraction(e); }); document.addEventListener('touchmove', function(e) { playerCursorInteraction(e); }); document.addEventListener('mousedown', function(e) { mouseDown = true; playerCursorInteraction(e); }); document.addEventListener('mouseup', function(e) { mouseDown = false; }); document.addEventListener('mousemove', function(e) { if (mouseDown) { playerCursorInteraction(e); } }); function playerCursorInteraction(e) { var x = (e.clientX || e.targetTouches[0].clientX) - 10; var y = (e.clientY || e.targetTouches[0].clientY) - 90; if (x > 0 && x < can.width && y > 0 && y < can.height) { e.preventDefault(); x = parseInt(x / CELL_WIDTH); y = parseInt(y / CELL_WIDTH); if (!inGame) { if (selected.length == 0) { grid[y][x].isLit = true; selected = [ [x, y] ]; } } if (grid[y][x].isInteractable) { if (grid[y][x].isLit == false && (Math.abs(selected[selected.length - 1][0] - x) + Math.abs(selected[selected.length - 1][1] - y)) == 1) { grid[y][x].isLit = true; selected.push([x, y]); } else if (!inGame) { var selectedContainsValues = false; for (var i = 0; i < selected.length; i++) { if (selected[i][0] == x && selected[i][1] == y) { selectedContainsValues = true; } } if (!selectedContainsValues && (Math.abs(selected[selected.length - 1][0] - x) + Math.abs(selected[selected.length - 1][1] - y)) != 1) { for (var i = 0; i < selected.length; i++) { grid[selected[i][1]][selected[i][0]].isLit = false; } grid[y][x].isLit = true; selected = [ [x, y] ]; } else if (selectedContainsValues) { for (var i = selected.length - 1; i >= 0; i--) { if (x == selected[i][0] && y == selected[i][1]) { break; } else { grid[selected[i][1]][selected[i][0]].isLit = false; selected.splice(i, 1); } } } } else if (grid[y][x].isLit) { for (var i = selected.length - 1; i >= 0; i--) { if (x == selected[i][0] && y == selected[i][1]) { break; } else { grid[selected[i][1]][selected[i][0]].isLit = false; selected.splice(i, 1); } } } } if (!inGame && selected.length != 0) { var seed = ""; seed += "" + selected[0][0] + "," + selected[0][1] + ";"; for (var i = 0; i < selected.length - 1; i++) { var x1 = selected[i][0]; var y1 = selected[i][1]; var x2 = selected[i + 1][0]; var y2 = selected[i + 1][1]; if (x1 == x2) { if (y1 > y2) { seed += "u"; } else { seed += "d"; } } else { if (x1 > x2) { seed += "l"; } else { seed += "r"; } } } document.getElementById("seed").value = seed; CURRENT_SEED = getSeedFromSelected(); } } } window.onload = function() { can = document.getElementById("c"); can.width = 360; can.height = 360; c = can.getContext("2d"); inGame = true; resetRandomLevel(); animate(); } function animate() { c.fillStyle = "#FFFFFF"; c.fillRect(0, 0, can.width, can.height); for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[i].length; j++) { grid[i][j].show(); } } for (var i = 0; i < solution.length - 1; i++) { //displaying hints if (grid[solution[i][1]][solution[i][0]].isHintLit && grid[solution[i + 1][1]][solution[i + 1][0]].isHintLit) { var x1 = solution[i][0]; var y1 = solution[i][1]; var x2 = solution[i + 1][0]; var y2 = solution[i + 1][1]; c.fillStyle = CELL_HINT_COLOR; if (x1 == x2) { if (y1 > y2) { c.fillRect(x1 * CELL_WIDTH + 2 * CELLS_APART, y1 * CELL_WIDTH - 2 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART, 4 * CELLS_APART); } else { c.fillRect(x1 * CELL_WIDTH + 2 * CELLS_APART, y1 * CELL_WIDTH + CELL_WIDTH - 2 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART, 4 * CELLS_APART); } } else { if (x1 > x2) { c.fillRect(x1 * CELL_WIDTH - 2 * CELLS_APART, y1 * CELL_WIDTH + 2 * CELLS_APART, 4 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART); } else { c.fillRect(x1 * CELL_WIDTH + CELL_WIDTH - 2 * CELLS_APART, y1 * CELL_WIDTH + 2 * CELLS_APART, 4 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART); } } } } for (var i = 0; i < selected.length - 1; i++) { //displaying connections between selected Cells c.strokeStyle = CELL_LIT_COLOR; c.lineWidth = CELL_WIDTH - 4 * CELLS_APART; c.setLineDash([]); c.beginPath(); c.moveTo(selected[i][0] * CELL_WIDTH + CELL_WIDTH / 2, selected[i][1] * CELL_WIDTH + CELL_WIDTH / 2); c.lineTo(selected[i + 1][0] * CELL_WIDTH + CELL_WIDTH / 2, selected[i + 1][1] * CELL_WIDTH + CELL_WIDTH / 2); c.stroke(); } for (var i = 0; i < selected.length - 1; i++) { //displaying lines between selected Cells c.strokeStyle = "#FFFFFF"; c.lineWidth = 1.5; c.setLineDash([CELL_WIDTH / 20, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10, CELL_WIDTH / 10]) c.beginPath(); c.moveTo(parseInt(selected[i][0] * CELL_WIDTH + CELL_WIDTH / 2), parseInt(selected[i][1] * CELL_WIDTH + CELL_WIDTH / 2)); c.lineTo(parseInt(selected[i + 1][0] * CELL_WIDTH + CELL_WIDTH / 2), parseInt(selected[i + 1][1] * CELL_WIDTH + CELL_WIDTH / 2)); c.stroke(); } if (inGame && selected.length == INTERACTIVES_AMOUNT) { resetRandomLevel(); } requestAnimationFrame(animate); } function resetRandomLevel() { grid = []; var row = []; for (var y = 0; y < can.height / CELL_WIDTH; y++) { row = []; for (var x = 0; x < can.width / CELL_WIDTH; x++) { row.push(new Cell(x, y)); } grid.push(row); } selected = []; solution = []; CURRENT_SEED = ""; var x = parseInt(Math.random() * (can.width / CELL_WIDTH - 4)) + 2; var y = parseInt(Math.random() * (can.height / CELL_WIDTH - 4)) + 2; grid[y][x].isInteractable = true; grid[y][x].isLit = true; selected.push([x, y]); solution.push([x, y]); CURRENT_SEED += x + "," + y + ";"; for (var i = 0; i < INTERACTIVES_MAX_AMOUNT; i++) { var options = []; if (x != 0) { if (!grid[y][x - 1].isInteractable) { options.push([x - 1, y]); } } if (x != grid[0].length - 1) { if (!grid[y][x + 1].isInteractable) { options.push([x + 1, y]); } } if (y != 0) { if (!grid[y - 1][x].isInteractable) { options.push([x, y - 1]); } } if (y != grid.length - 1) { if (!grid[y + 1][x].isInteractable) { options.push([x, y + 1]); } } if (options.length == 0) { INTERACTIVES_AMOUNT = i + 1; break; } else { INTERACTIVES_AMOUNT = INTERACTIVES_MAX_AMOUNT + 1; } var choosen = options[parseInt(Math.random() * options.length)]; if (x == choosen[0]) { if (y > choosen[1]) { CURRENT_SEED += "u"; } else { CURRENT_SEED += "d"; } } else { if (x > choosen[0]) { CURRENT_SEED += "l"; } else { CURRENT_SEED += "r"; } } x = choosen[0]; y = choosen[1]; grid[y][x].isInteractable = true; solution.push([x, y]); } } function resetInEditMode() { grid = []; var row = []; for (var y = 0; y < can.height / CELL_WIDTH; y++) { row = []; for (var x = 0; x < can.width / CELL_WIDTH; x++) { row.push(new Cell(x, y)); } grid.push(row); } for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[i].length; j++) { grid[i][j].isInteractable = true; } } selected = []; solution = []; var seed = document.getElementById("seed").value; if (seed != "") { seed = seed.split(';'); var start = seed[0]; var steps = seed[1]; start = start.split(','); var x = start[0]; var y = start[1]; selected = [ [x, y] ]; grid[y][x].isInteractable = true; grid[y][x].isLit = true; for (var i = 0; i < steps.length; i++) { if (steps[i] == 'u') { y--; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'd') { y++; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'l') { x--; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'r') { x++; selected.push([x, y]); grid[y][x].isLit = true; } } } } function changeGameMode() { if (inGame) { document.getElementById("changeGameMode").innerHTML = "change to play-Mode"; inGame = false; resetInEditMode(); } else { document.getElementById("changeGameMode").innerHTML = "change to edit-Mode"; inGame = true; resetRandomLevel(); } } function extractSeed() { grid = []; var row = []; for (var y = 0; y < can.height / CELL_WIDTH; y++) { row = []; for (var x = 0; x < can.width / CELL_WIDTH; x++) { row.push(new Cell(x, y)); } grid.push(row); } selected = []; solution = []; INTERACTIVES_AMOUNT = 1; var seed = document.getElementById("seed").value; if (seed != "") { seed = seed.split(';'); var start = seed[0]; var steps = seed[1]; start = start.split(','); var x = parseInt(start[0]); var y = parseInt(start[1]); selected = [ [x, y] ]; solution = [ [x, y] ]; grid[y][x].isInteractable = true; grid[y][x].isLit = true; for (var i = 0; i < steps.length; i++) { if (!isActive(x, y - 1) && steps[i] == 'u') { y--; solution.push([x, y]); grid[y][x].isInteractable = true; INTERACTIVES_AMOUNT++; } else if (!isActive(x, y + 1) && steps[i] == 'd') { y++; solution.push([x, y]); grid[y][x].isInteractable = true; INTERACTIVES_AMOUNT++; } else if (!isActive(x - 1, y) && steps[i] == 'l') { x--; solution.push([x, y]); grid[y][x].isInteractable = true; INTERACTIVES_AMOUNT++; } else if (!isActive(x + 1, y) && steps[i] == 'r') { x++; solution.push([x, y]); grid[y][x].isInteractable = true; INTERACTIVES_AMOUNT++; } else { alert("your seed didn't work out properly try a diffrent one!\n A random Level will be generated."); resetRandomLevel(); inGame = true; return } } } inGame = true; } function isActive(x, y) { //console.log("" + x + ", " + y); try{ return grid[y][x].isInteractable; } catch (TypeError){ return true; } } function giveHint() { var hints = 3; for (var i = 0; i < solution.length; i++) { if (!grid[solution[i][1]][solution[i][0]].isHintLit && hints >= 0) { hints--; grid[solution[i][1]][solution[i][0]].isHintLit = true; } } } function updateEditMode() { if (inGame) { return; } grid = []; var row = []; for (var y = 0; y < can.height / CELL_WIDTH; y++) { row = []; for (var x = 0; x < can.width / CELL_WIDTH; x++) { row.push(new Cell(x, y)); row[x].isInteractable = true; } grid.push(row); } selected = []; solution = []; var seed = document.getElementById("seed").value; if (seed != "") { seed = seed.split(';'); var start = seed[0]; var steps = seed[1]; start = start.split(','); var x = start[0]; var y = start[1]; if (x == undefined || y == undefined || steps == undefined || x == '' || y == '' || steps == '') { return; } CURRENT_SEED = document.getElementById("seed").value; selected = [ [x, y] ]; grid[y][x].isInteractable = true; grid[y][x].isLit = true; for (var i = 0; i < steps.length; i++) { if (steps[i] == 'u') { y--; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'd') { y++; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'l') { x--; selected.push([x, y]); grid[y][x].isLit = true; } else if (steps[i] == 'r') { x++; selected.push([x, y]); grid[y][x].isLit = true; } } } } function outputSeed() { document.getElementById("seed").value = CURRENT_SEED; } function getSeedFromSelected() { var seed = ""; seed += "" + selected[0][0] + "," + selected[0][1] + ";"; for (var i = 0; i < selected.length - 1; i++) { var x1 = selected[i][0]; var y1 = selected[i][1]; var x2 = selected[i + 1][0]; var y2 = selected[i + 1][1]; if (x1 == x2) { if (y1 > y2) { seed += "u"; } else { seed += "d"; } } else { if (x1 > x2) { seed += "l"; } else { seed += "r"; } } } return seed; } function Cell(x, y) { this.x = x; this.y = y; this.isLit = false; this.isHintLit = false; this.isInteractable = false; this.show = function() { if (this.isInteractable) { c.fillStyle = "#DDDDDD"; c.fillRect(this.x * CELL_WIDTH + CELLS_APART, this.y * CELL_WIDTH + CELLS_APART, CELL_WIDTH - 2 * CELLS_APART, CELL_WIDTH - 2 * CELLS_APART); if (this.isHintLit) { c.fillStyle = CELL_HINT_COLOR; c.fillRect(this.x * CELL_WIDTH + 2 * CELLS_APART, this.y * CELL_WIDTH + 2 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART); } if (this.isLit) { c.fillStyle = CELL_LIT_COLOR; c.fillRect(this.x * CELL_WIDTH + 2 * CELLS_APART, this.y * CELL_WIDTH + 2 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART, CELL_WIDTH - 4 * CELLS_APART); } } else { c.fillStyle = "#FFFFFF"; c.fillRect(this.x * CELL_WIDTH, this.y * CELL_WIDTH, CELL_WIDTH, CELL_WIDTH); } } }

Fill || game (with level-editor)