xxxxxxxxxx438
class Map{ constructor(r, c, g){ this.r = r, this.c = c; if(g !== undefined && Array.isArray(g)) this.g = g.slice().map(x => x.slice()); else this.g = new Array(r).fill(0).map(x => new Array(c).fill("000")); }write(color, pos, checkLevelComplete = true){ if(Array.isArray(pos[0])){ pos.forEach(x => this.write(color, x, false)); }else this.g[pos[0]][pos[1]] = color; if(checkLevelComplete) this.checkLevelComplete(); return this; }checkLevelComplete(){ let col = this.g[0][0]; if(col === "000") return false; /*To be removed?*/ for(let i = 0; i < this.r; i++){ for(let j = 0; j < this.c; j++){ if(this.g[i][j] !== col) return false; } }if(maxLevel <= level) maxLevel = level + 1; button_next_level.disabled = false; return (levelComplete = true); }}function newMap(r, c = r){ return new Map(r, c);}function cloneMap(map){ return new Map(map.r, map.c, map.g);}class Brush{ constructor(color, i, j = i, state = "draw", stateUnlocked = true, canDelete = false, guiid){ if(guiid === undefined) this.guiid = ++levelGuiid; else this.guiid = guiid; this.type = "brush"; this.color = color; this.state = state; this.stateUnlocked = stateUnlocked; this.canDelete = canDelete; this.pos = Array.isArray(i) ? i : [i, j]; this.selected = false; }action(_key = key){ let moved; switch(_key){ case "Delete": if(this.canDelete){ this._delete = true; if(this.selected) selectedObjInd = null, this.selected = false; //moved = true; }break; case "ArrowUp": case "w": if(this.pos[0] > 0) moved = this.tryMove(this.pos[0] - 1, this.pos[1] ); break; case "ArrowDown": case "s": if(this.pos[0] < levelObj.map.r - 1) moved = this.tryMove(this.pos[0] + 1, this.pos[1] ); break; case "ArrowLeft": case "a": if(this.pos[1] > 0) moved = this.tryMove(this.pos[0], this.pos[1] - 1); break; case "ArrowRight": case "d": if(this.pos[1] < levelObj.map.c - 1) moved = this.tryMove(this.pos[0], this.pos[1] + 1); break; case "Enter": case " ": if(this.stateUnlocked){ if(this.state === "draw") this.state = "erase"; else this.state = "draw"; /*moved = */this.tryMove(this.pos[0], this.pos[1]); } default: return; }if(moved) undoStackLog(); }tryMove(i, j){ if(levelObj.objs.some(x => !x._delete && (x.guiid !== this.guiid && x.pos[0] === i && x.pos[1] === j))) return false; const cell = levelObj.map.g[i][j]; let newColor = ""; if(this.state === "draw") for(let i = 0; i < 3; i++){ if(this.color[i] === "1" && cell[i] === "1") return false; else newColor += (+cell[i] + +this.color[i]); }else for(let i = 0; i < 3; i++){ if(this.color[i] === "1" && cell[i] === "0") return false; else newColor += (+cell[i] - +this.color[i]); } this.pos = [i, j]; levelObj.map.write(newColor, [i,j]); return true; }onSelect(){ this.selectedFrames = -1; this.tryMove(this.pos[0], this.pos[1]); }render(){ if(this._delete) return; strokeWeight(3); let _STROKE; if(this.state === "erase") fill(colors[this.color][1]), _STROKE = colors[this.color][0]; else fill(colors[this.color][0]), _STROKE = colors[this.color][1]; let _objScl = levelScl; if(this.selected){ this.selectedFrames++; _STROKE = (colors[this.color][2].map((x,ind) => colors[this.color][1][ind] + crop((x - ind) * Math.cos(this.selectedFrames * Math.PI / 32), 0, Infinity))); _objScl = levelScl * (60+4*Math.abs(Math.cos(this.selectedFrames * Math.PI / 32)))/64; }stroke(_STROKE); if(this.stateUnlocked) circle(levelScl * (this.pos[1] + 1/2), levelScl * (this.pos[0] + 1/2), _objScl/2); else square(levelScl * (this.pos[1] + 1/2) - _objScl/4, levelScl * (this.pos[0] + 1/2) - _objScl/4, _objScl/2); if(this.canDelete) fill(_STROKE), noStroke(), ellipse(levelScl * (this.pos[1] + 1/2), levelScl * (this.pos[0] + 1/2), _objScl/12); }}function newBrush(color, i, j = i, state = "draw", stateUnlocked = true, canDelete = false){ return new Brush(color, i, j, state, stateUnlocked, canDelete);}function cloneBrush(brush){ const nbrush = new Brush(brush.color, brush.pos[0], brush.pos[1], brush.state, brush.stateUnlocked, brush.canDelete, brush.guiid); nbrush.selected = brush.selected; nbrush.selectedFrames = brush.selectedFrames; nbrush._delete = brush._delete; return nbrush;}function cloneObj(obj){ if(obj.type === "brush") return cloneBrush(obj);}const colors = { "000": [[0, 0, 0 ], [55, 55, 55 ], [55, 55, 55 ], [55, 55, 55 ], ], //black "100": [[255, 0, 0 ], [175, 0, 0 ], [255, 55, 55 ], [175, 55, 55 ], ], //red "110": [[255, 255, 0 ], [175, 175, 0 ], [255, 255, 55 ], [175, 175, 55 ], ], //yellow "010": [[0, 255, 0 ], [0, 175, 0 ], [55, 255, 55 ], [55, 175, 55 ], ], //green "011": [[0, 255, 255], [0, 175, 175], [55, 255, 255], [55, 175, 175], ], //cyan "001": [[0, 0, 255], [0, 0, 175], [55, 55, 255], [55, 55, 175], ], //blue "101": [[255, 0, 255], [175, 0, 175], [255, 55, 255], [175, 55, 175], ], //magenta "111": [[255, 255, 255], [175, 175, 175], [255, 255, 255], [175, 175, 175], ] //white};const levels = { 0: ()=>({ //Level 0 map: newMap(6, 6).write("100", [2,2], false), objs: [newBrush("100", 2, 2, "draw", false)], disp: "<p>Left click to select a brush or to deselect one.<br>WASD/Arrow keys to move selected brush.<br>Color the whole grid one color to win!</p>" }), 1: ()=>({ //Level 1 map: newMap(6, 6).write("100", [[1,2], [4,3]], false), objs: [newBrush("100", 1, 2, "draw", false), newBrush("100", 4, 3, "draw", false)], }), 2: ()=>({ //Level 2 map: newMap(6, 6).write("100",[[0,0], [0,4], [1,1], [1,2], [2,1], [3,1]], false), objs: [newBrush("100", 0, 0, "draw", false), newBrush("100", 0, 4, "draw", false)] }), 3: ()=>({ //Level 3 map: newMap(6, 6).write("100", [1,1], false), objs: [newBrush("100", 1, 1, "draw", false), newBrush("100", 2, 3, "erase", false, true), newBrush("100", 3, 2, "erase", false, true)], disp: "<p>Dark brushes erase instead of drawing.<br>Delete key (while selected) or middle click to destroy a destructible brush (marked by a dot in its center).</p>" }), 4: ()=>({ //Level 4 map: newMap(6, 6).write("100", [ [1,0], [1,1], [1,2], [1,3], [1,4], [2,0], [2,1], [2,2], [2,3], [3,0], [3,1], [3,2], [3,3], [3,4] ], false), objs: [newBrush("100", 2, 1, "draw", false), newBrush("100", 2, 4, "erase", false, true)], }), 5: ()=>({ //Level 5 map: newMap(6, 6).write("100", [[1,1], [1,2], [1,3], [2,1], [2,2], [2,3], [3,1], [3,2], [3,3]], false), objs: [newBrush("100", 2)], disp: "<p>Circular brushes can draw and erase.<br>Space key, Enter key, or right click to switch modes of a selected circular brush.</p>" }), 6: ()=>({ //Level 6 map: newMap(6, 6).write("100", [1,1], false).write("001", [4,4], false), objs: [newBrush("100", 1, 1, "draw", false), newBrush("001", 4, 4, "draw", false)], disp: "<p>Colors!</p>" }), 7: ()=>({ //Level 7 map: newMap(6, 6).write("100", [ [0,5], [1,4], [1,5], [2,5], [3,2], [3,3], [3,5], [4,3], [4,4], [4,5], [5,3], [5,4], [5,5] ], false).write("001", [ [0,0], [0,1], [1,0], [1,1], [2,0], [2,3], [3,0], [3,1], [4,0], [4,1], [5,0], [5,1] ], false).write("101", [ [0,4], [2,1], [2,4], [3,4], [4,2], [5,2], [5,5] ]), objs: [newBrush("100", 2, 1, "draw", false), newBrush("001", 2, 4, "draw", false)] }), 8: ()=>({ //Level 8 map: newMap(6, 6).write("100", [[3,1], [3,2], [2,2], [2,4], [3,4]], false).write("101", [1,2], false), objs: [newBrush("101", 1, 2, "draw", true, true), newBrush("100", 2, 3, "erase", false)], }), 9: ()=>({ //Level 9 map: newMap(6, 6).write("010", [ [1,1], [1,3], [2,2], [2,4], [3,1], [3,3], [4,2], [4,4] ], false), objs: [ newBrush("010", 1, 1, "draw", false), newBrush("010", 1, 3, "draw", false), newBrush("010", 2, 2, "draw", false), newBrush("010", 2, 4, "draw", false), newBrush("010", 3, 1, "draw", false), newBrush("010", 3, 3, "draw", false), newBrush("010", 4, 2, "draw", false), newBrush("010", 4, 4, "draw", false) ] }), 10(){ // Level 10 const lvl = { map: newMap(6, 6), objs: [] }; for(let i = 0; i < 6; i++){ for(let j = 0; j < 6; j++){ let col, sum = (i + j) % 6; if(sum === 0) col = "100"; else if(sum === 2) col = "010"; else if(sum === 4) col = "001"; else continue; lvl.map.write(col, [i, j], false); lvl.objs.push(new Brush(col, i, j, "draw", false, true)); } }return lvl; }, 11: ()=>({ //Win Level map: newMap(7, 7).write("100", [1,1], false).write("010", [3,3], false).write("001", [5,5], false), objs: [newBrush("100", 1), newBrush("010", 3), newBrush("001", 5)], disp: "You Win! (no more levels added yet)" }), "-17": ()=>({ //Test Level 1 map: newMap(6, 6), objs: [newBrush("000", 2), newBrush("100", 4)], disp: "Test Level 1 (black brushes?)<br>Using the existing code (with a slight modification to make the black brush visible while not selected), black brushes appear to be able to draw/erase any grid space, having no effect, regardless of their colors (this makes sense, since they have no RGB components to modify the color with).<br>Currently, I have coded the game to prevent clearing a level when all of the grid spaces are colored black, even though they are the same color, but this may be used later to complete a level by erasing everything?" })};let maxLevel = 0;let level, levelObj, levelScl, levelRot, levelTransX, levelTransY, levelWidth, levelHeight, levelGuiid, levelComplete;let undoStack, undoPtr;function cloneObjs(objs){ const nobjs = []; objs.forEach(x => nobjs.push(cloneObj(x))); return nobjs;}function undoStackLog(){ const state = [levelComplete, cloneMap(levelObj.map), cloneObjs(levelObj.objs), selectedObjInd]; undoPtr++; undoStack[undoPtr] = state; if(canRedo()){ undoStack.splice(undoPtr + 1); } button_undo.disabled = !canUndo(); button_redo.disabled = !canRedo(); //console.log(undoStack, undoPtr);}function canUndo(){ return undoPtr > 0;}function canRedo(){ return undoPtr < undoStack.length - 1;}function cloneUndoState(state){ return [state[0], cloneMap(state[1]), cloneObjs(state[2]), state[3]];}function loadUndoState(state){ levelComplete = state[0]; levelObj.map = cloneMap(state[1]); levelObj.objs = cloneObjs(state[2]); selectedObjInd = state[3]; if(levelComplete) noLoop(); else loop(); //console.log(undoStack, undoPtr);}function undoStackUndo(){ if(!canUndo()) return console.log("Failed attempt to undo."); undoPtr--; loadUndoState(cloneUndoState(undoStack[undoPtr])); button_undo.disabled = !canUndo(); button_redo.disabled = false; //console.log(undoStack, undoPtr);}function undoStackRedo(){ if(!canRedo()) return console.log("Failed attempt to redo."); undoPtr++; const state = cloneUndoState(undoStack[undoPtr]); loadUndoState(state); button_undo.disabled = false; button_redo.disabled = !canRedo(); //console.log(undoStack, undoPtr);}let selectedObjInd = null;function selectedObj(){ return selectedObjInd === null ? null : levelObj.objs[selectedObjInd];}function selectObj(ind){ let selObj = selectedObj(); if(selObj != null) selObj.selected = false; selectedObjInd = ind, selObj = selectedObj(), selObj.selected = true; if(selObj.onSelect) selObj.onSelect(); undoStackLog();}function deselect(){ let selObj = selectedObj(); if(selObj != null) selObj.selected = false, selectedObjInd = null, undoStackLog();}function startLevel(ind = level, force = false){ input_level.value = ""; if(isNaN(+ind) || ind === "" || !levels[ind]) return false; ind = +ind; levelGuiid = -1; if(ind > maxLevel && !force) return false; level = ind; levelObj = levels[level](); input_level.placeholder = "Level " + level; button_next_level.disabled = maxLevel <= level; button_previous_level.disabled = level < 1; span_level_disp.innerHTML = levelObj.disp || ""; //TODO: Allow for non-square sized canvases levelRot = levelObj.map.r > levelObj.map.c; if(levelRot){ levelScl = height / levelObj.map.r; levelTransX = (width - levelObj.map.c * levelScl)/2, levelTransY = 0; levelWidth = levelObj.map.c * levelScl, levelHeight = height; }else{ levelScl = width / levelObj.map.c; if(levelObj.map.r === levelObj.map.c) levelTransX = levelTransY = 0; else levelTransY = (height - levelObj.map.r * levelScl)/2, levelTransX = 0; levelWidth = width, levelHeight = levelObj.map.r * levelScl; } levelComplete = false, selectedObjInd = null; undoStack = [], undoPtr = -1; undoStackLog(); loop();}function setup() { __canvas = createCanvas(512, 512); //console.log(__canvas.elt); if(window.defaultCanvas0) window.defaultCanvas0.oncontextmenu = ()=>false; startLevel(0);}function draw() { background(220); translate(levelTransX, levelTransY); stroke(128); strokeWeight(1); if(levelComplete) noStroke(), deselect(); levelObj.map.g.forEach((row, i)=>{ row.forEach((cell, j) => { fill(colors[cell][0]); rect(j * levelScl, i * levelScl, levelScl, levelScl); }); }); levelObj.objs.forEach(obj => { if(obj && !obj._delete && obj.render) obj.render(); }); if(levelComplete) noLoop();}/*function restartUndo(){ loadUndoState(cloneUndoState(undoStack[undoPtr = 0])); button_undo.disabled = true; button_redo.disabled = false; }*/function keyPressed(){ if(key === "r") return startLevel(level, true); if(key === "z" && canUndo()) return undoStackUndo(); if(key === "y" && canRedo()) return undoStackRedo(); if(levelComplete) return; let selObj = selectedObj(); if(selObj == null) return; if(selObj.action) selObj.action(); //return false;}function mousePressed(){ if(levelComplete) return; if(mouseX < levelTransX || mouseX > width - levelTransX || mouseY < levelTransY || mouseY > height - levelTransY) return true; const mj = Math.floor((mouseX - levelTransX) / levelWidth * levelObj.map.c), mi = Math.floor((mouseY - levelTransY) / levelHeight * levelObj.map.r); let flag = true; levelObj.objs.forEach((obj,ind) => { if(!obj._delete && obj.pos[0] === mi && obj.pos[1] === mj && !obj.selected) flag = false, selectObj(ind); }); if(flag && mouseButton === LEFT) deselect(); let selObj = selectedObj(); if(mouseButton === RIGHT && selObj != null && selObj.action) selObj.action("Enter"); if(mouseButton === CENTER && selObj != null && selObj.action){ selObj.action("Delete"); if(!selObj._delete) deselect(); } //TODO: undoStackLog only if something changed? return false;}function crop(x, min, max){ return Math.max(min, Math.min(x, max));}