/* All Completed! Tell me if there's any bug that I didn't find. :) '18/05/13 Flandre Scarlet(雨宮桜) New features: - Goal noticeable - Left-front, Right-front direction - Visible walls: Front:5, Side:1 '18/05/14 Modified: - Modify wall-sizes with math News: - It's the 13th of trending codes! '18/05/15 New features: - All side ways can be seen Modified: - New method to create walls - Walls can be increased easily - Move most things from HTML and CSS to JS Bug to be fixed: - Walls on side ways disappear(fixed) - Sometimes out of index(fixed) News: - Top 10 on Trending!!!(ﾉ>ω<)ﾉ♡ '18/05/16 New features: - Walls markable ※ only the walls at right, left and front are touchable ※ only seeable on main way Modified: - Direction buttons enlarged Problems: - JS codes are too long so that my cellphone runs very slow... '18/05/17 New features: - All marked walls seeable - 8 wall-marking colors useable, paint the walls as you like - Ceiling color changed to yellow '18/05/22 */ window.onload = function(){ welcome(); walls = 10; // any number can be input createAll() setup(); startGame(); //0: maze, 1: sol alert ("goal: "+goal); present(); } function welcome(){ alert("Welcome to my Maze Game!"); /*alert("Enter the size of the maze"+ " you want, and a maze will be"+ " automatically generated.");*/ /*alert("All mazes start at top left"+ " and end at bottom right.");*/ alert("At the top of screen is your"+ " position and direction, which may"+ " help you find your way."); /*alert("To play it, tap the triangles"+ " at different directions, yellow"+ " ones for moving, and the blue ones"+ " for just turning left or right.");*/ alert("Now, enjoy yourself!o(｡>ω<｡)o"); } function test(){ for(var testN=walls;testN>0;testN--){ closeWall("left",testN); openWall ("left",testN); closeWall("right",testN); openWall ("right",testN); closeDoor(testN); openDoor (testN); } setHidden("tleft",true); setHidden("tright",true); } //////////////////////////////////////// ///////////setup before start/////////// //////////////////////////////////////// function createAll(){ // modify invalid number if(typeof(walls)!="number"||walls<3) walls = 3; walls = Math.floor(walls); sides = Math.ceil(walls/2); document.getElementById("ceil").style .height= 180*(1-2/(2*walls+1)) + "px"; document.getElementById("floor").style .height= 270*(1-2/(2*walls+1)) + "px"; createWalls(); createBtns(); } function createWalls(){ for(var p=walls; p>0; p--){ createWall(p); } wallsModify(); } function createBtns(){ var bg=document.getElementById("bg"); var btns = ["back","left","right", "lfront","rfront","front", "ffront","fleft","fright", "tleft","tright"]; for(var p=0; p<11; p++){ var el = document .createElement("div"); el.id = btns[p]; els = el.style; els.width = "0"; els.height = "0"; els.background = "transparent"; els.position = "absolute"; bg.appendChild(el); } } function createWall(n){ var bg=document.getElementById("bg"); for(var s=sides; s>1; s--){ var lf = document .createElement("div"); lf.id = "left" +s +n; lf.style.background="transparent"; lf.style.position = "absolute"; var rf = document .createElement("div"); rf.id = "right" +s +n; rf.style.background="transparent"; rf.style.position = "absolute"; var ls = document .createElement("div"); ls.id = "lefts" +s +n; ls.style.background="transparent"; ls.style.position = "absolute"; var rs = document .createElement("div"); rs.id = "rights" +s +n; rs.style.background="transparent"; rs.style.position = "absolute"; bg.appendChild(ls); bg.appendChild(rs); bg.appendChild(lf); bg.appendChild(rf); } var w = document .createElement("div"); w.id = "wall" + n; w.style.background = "transparent"; w.style.position = "absolute"; w.style.borderLeft="1px black solid"; w.style.borderRight="1px black solid"; var l = document .createElement("div"); l.id = "left" + n; l.style.background = "grey"; l.style.position = "absolute"; var r = document .createElement("div"); r.id = "right" + n; r.style.background = "grey"; r.style.position = "absolute"; var lf = document .createElement("div"); lf.id = "leftf" + n; lf.style.background = "transparent"; lf.style.position = "absolute"; var rf = document .createElement("div"); rf.id = "rightf" + n; rf.style.background = "transparent"; rf.style.position = "absolute"; var ls = document .createElement("div"); ls.id = "lefts" + n; ls.style.background = "transparent"; ls.style.position = "absolute"; var rs = document .createElement("div"); rs.id = "rights" + n; rs.style.background = "transparent"; rs.style.position = "absolute"; bg.appendChild(ls); bg.appendChild(rs); bg.appendChild(lf); bg.appendChild(rf); bg.appendChild(l); bg.appendChild(r); bg.appendChild(w); // marking walls var fm = document .createElement("div"); fm.id = "fm"; fm.style.background = "transparent"; fm.style.position = "absolute"; fm.style.width = "230px"; fm.style.height = "300px"; fm.style.left = "56.5px"; fm.style.bottom = "90px"; fm.addEventListener("click",markFront); var lm = document .createElement("div"); lm.id = "lm"; lm.style.background = "transparent"; lm.style.position = "absolute"; lm.style.width = "57.5px"; lm.style.height = "360px"; lm.style.left = "0"; lm.style.bottom = "90px"; lm.addEventListener("click",markLeft); var rm = document .createElement("div"); rm.id = "rm"; rm.style.background = "transparent"; rm.style.position = "absolute"; rm.style.width = "57.5px"; rm.style.height = "360px"; rm.style.right = "0"; rm.style.bottom = "90px"; rm.addEventListener("click",markRight); bg.appendChild(lm); bg.appendChild(rm); bg.appendChild(fm); } function wallsModify(){ for(var p=2; p<=walls; p++){ var k = 2/(2*p+1); var wNs = document.getElementById ("wall"+p).style; wNs.width = (345*k)+"px"; wNs.height = (450*k) + "px"; wNs.bottom = .6*450*(1-k) + "px"; wNs.left = (.5*345*(1-k)-1)+"px"; var lNs = document.getElementById ("left"+p).style; lNs.width = 345*k/(2*p-1) + "px"; lNs.height = (450*k) + "px"; lNs.bottom = .6*450*(1-k) + "px"; lNs.left=345*(.5*(1-k)-k/(2*p-1)) + "px"; var rNs = document.getElementById ("right"+p).style; rNs.width = 345*k/(2*p-1) + "px"; rNs.height = (450*k) + "px"; rNs.bottom = .6*450*(1-k) + "px"; rNs.right=345*(.5*(1-k)-k/(2*p-1)) + "px"; for(var S=1; S<=sides; S++){ var wll = (.5*345*(1-k-2*S*k)-1); var x = (S==1)?"f":S; var y = (S==1)?"":S; var lfNs = document.getElementById ("left"+x+p).style; lfNs.height = (450*k) + "px"; lfNs.bottom = .6*450*(1-k) + "px"; if(345*k+wll>0) lfNs.borderRight = "1px solid black"; if(wll>0){ lfNs.width = (345*k-1)+"px"; lfNs.left = wll + "px"; lfNs.borderLeft = "1px solid black"; }else{ lfNs.width = (345*k+wll)+"px"; lfNs.left = "0"; } var rfNs = document.getElementById ("right"+x+p).style; rfNs.height = (450*k) + "px"; rfNs.bottom = .6*450*(1-k) + "px"; if(345*k+wll>0) rfNs.borderLeft="1px solid black"; if(wll>0){ rfNs.width = (345*k-1)+"px"; rfNs.right = wll + "px"; rfNs.borderRight = "1px solid black"; }else{ rfNs.width = (345*k+wll)+"px"; rfNs.right = "0"; } var side=345*(.5-(2*S+1)/(2*p-1)); var width = 690/(4*p*p-1)*(2*S+1); var mod = side<0?1+side/width:1; var bbt = 1080/(4*p*p-1)*mod; var lsNs = document.getElementById ("lefts"+y+p).style; lsNs.height = 450*k + "px"; lsNs.borderLeft = width*mod +"px grey solid"; lsNs.left = (side>0?side:0) +"px"; lsNs.bottom=(270*(1-k)-bbt)+"px"; lsNs.borderBottom = bbt +"px transparent solid"; lsNs.borderTop = bbt*2/3 +"px transparent solid"; var rsNs = document.getElementById ("rights"+y+p).style; rsNs.height = 450*k + "px"; rsNs.borderRight = width*mod + "px grey solid"; rsNs.right = (side>0?side:0)+"px"; rsNs.bottom=(270*(1-k)-bbt)+"px"; rsNs.borderBottom = bbt +"px transparent solid"; rsNs.borderTop = bbt*2/3 +"px transparent solid"; } } } function setup(){ pos = [0,0]; //start grid direc = 0; //0S↓, 1E→, 2N↑, 3W← d = ["S↓", "E→", "N↑", "W←"]; colors = ["grey","red","orange", "green","skyblue","purple", "orchid","white","black"]; goal = [0,1]; sides = 1; searchSpeed = 500; leadSpeed = 200; //var maze; solvingStop = true; document.getElementById("ffront"). addEventListener("click",ffront); document.getElementById("front"). addEventListener("click",front); document.getElementById("lfront"). addEventListener("click",lfront); document.getElementById("rfront"). addEventListener("click",rfront); document.getElementById("back"). addEventListener("click",back); document.getElementById("fleft"). addEventListener("click",fleft); document.getElementById("left"). addEventListener("click",left); document.getElementById("tleft"). addEventListener("click",tleft); document.getElementById("fright"). addEventListener("click",fright); document.getElementById("right"). addEventListener("click",right); document.getElementById("tright"). addEventListener("click",tright); document.getElementById("new"). addEventListener("click",newGame); } function secSetUp(){ document.getElementById("sol"). addEventListener("click",answer); document.getElementById("lm"). addEventListener("click",markLeft); document.getElementById("rm"). addEventListener("click",markRight); document.getElementById("fm"). addEventListener("click",markFront); } function show(){ p=document.getElementById("position"); p.innerHTML = "goal:(" + goal + ") pos:("+pos +") "+ d[direc]; } function winGame(){ stopSolve(); delete maze; delete memo; alert ('Congratulations!'); if(window.confirm ("Play one more game?")){ startGame(); present();} else{ closeWall("left",1,true); closeWall("right",1,true); closeDoor(1,true); setHidden("tleft",false); setHidden("tright",false); alert("Thank you for "+ "playing my game (ﾉ>ω<)ﾉ♡"); } } //////////////////////////////////////// /////these are for walls open/close///// //////////////////////////////////////// function getC(grid, dir){ return colors[memo[grid[0]] [grid[1]][dir]]; } function closeWall(side, number, goal=false){ if(number==1){ if(side=="left"){ setHidden("lm",true); }else{ setHidden("rm",true); }} var wall = document.getElementById (side+number); var W = getComputedStyle(wall); if(W.width!="0px"){ // do nothing if already closed var front = document.getElementById ("wall"+(number-1)); var b =parseInt(W.bottom.slice(0,-2)); var fb = parseInt(getComputedStyle (front).bottom.slice(0,-2)); var w = parseInt(W.width.slice(0,-2)); wall.style.background = "transparent"; wall.style.width = "0"; if(side=="left") wall.style.borderLeft = w + "px solid " + ((goal)?"magenta": getC(getGrid(pos,direc,number-1) ,(direc+1)%4)); else wall.style.borderRight = w + "px solid " + ((goal)?"magenta": getC(getGrid(pos,direc,number-1) ,(direc+3)%4)); wall.style.borderTop = (b-fb)*2/3 + "px transparent solid"; wall.style.borderBottom = (b-fb) + "px transparent solid"; wall.style.bottom = fb +"px"; } else if(side=="left") wall.style.borderLeftColor = (goal)?"magenta": getC(getGrid(pos,direc,number-1) ,(direc+1)%4); else wall.style.borderRightColor = (goal)?"magenta": getC(getGrid(pos,direc,number-1) ,(direc+3)%4); } function openWall(side, number, goal=false, next=false){ if(number==1){ if(side=="left"){ setHidden("lm",false); }else{ setHidden("rm",false); } } var wall = document.getElementById (side+number); if(getComputedStyle(wall) .width=="0px"){ //do nothing if already open var b =parseInt(getComputedStyle(wall) .bottom.slice(0,-2)); var bbw=parseInt(getComputedStyle(wall) .borderBottomWidth.slice(0,-2)); wall.style.borderTop = ""; wall.style.borderBottom = "0"; wall.style.bottom = (b+bbw) +"px"; if(side == "left"){ var blw = getComputedStyle(wall) .borderLeftWidth.slice(0,-2); wall.style.width = blw + "px"; wall.style.borderLeft= ""; } else{ var brw = getComputedStyle(wall) .borderRightWidth.slice(0,-2); wall.style.width = brw + "px"; wall.style.borderRight = ""; } } wall.style.background = (next)?"transparent":(goal)?"magenta": getC(getGrid(getGrid(pos,direc,number-1), (direc+((side=="left")?1:3))%4),direc); } function closeDoor(number, goal=false){ var wall = document.getElementById ("wall"+number); wall.style.background = (goal)?"magenta": getC(getGrid(pos,direc,number-1) ,direc); if(number==1){ setHidden("fm",true); } } function openDoor(number){ var wall = document.getElementById ("wall"+number); wall.style.background = "transparent"; if(number==1){ setHidden("fm",false); } } ///////////////////////////////////////// ////button events (mainly directions)//// ///////////////////////////////////////// function move(posi,n){ switch(n){ case 0: posi[0]++; break; case 1: posi[1]++; break; case 2: posi[0]--; break; case 3: posi[1]--; break; } } function getGrid(pos,dir=-1,num=1){ switch(dir){ case -1: return [pos[0],pos[1]]; case 0: return [pos[0]+num,pos[1]]; case 1: return [pos[0],pos[1]+num]; case 2: return [pos[0]-num,pos[1]]; case 3: return [pos[0],pos[1]-num]; } } function avail(grid, dir){ if(isGoal(grid)&&dir==2) return false; else switch(dir){ case 0: case 1: return maze[0][grid[0]] [grid[1]][dir]==0; case 2: return grid[0]>0 &&maze[0] [grid[0]-1][grid[1]][0]==0; case 3: return grid[1]>0 &&maze[0] [grid[0]][grid[1]-1][1]==0; } } function same(grid1, grid2){ return grid1[0]==grid2[0] && grid1[1]==grid2[1]; } function isGoal(grid, dir=-1){ var t = [grid[0], grid[1]]; if(dir>-1) t = getGrid(t, dir); return same(goal, t); } function setHidden(item, val){ document.getElementById(item).style .display = (val)?"block":"none"; } function setAllHidden(){ setHidden("back",false); setHidden("left",false); setHidden("right",false); setHidden("fleft",false); setHidden("fright",false); setHidden("ffront",false); setHidden("front",false); setHidden("lfront",false); setHidden("rfront",false); } function checkSide(grid,side,number,dir){ var secdir =(dir+((side=="left")?1:3))%4; if(avail(grid,secdir)){ var sidegrid =getGrid(grid,secdir) var sfAvail =avail(sidegrid, dir); openWall(side,number, isGoal(sidegrid),sfAvail); if(number==1) setHidden(side,true); else if(number==2) setHidden("f"+side,true); var wallN = number+1; while(sfAvail && wallN<=walls){ var sf =getGrid(sidegrid,dir); var sfs = document.getElementById (side+"f"+wallN).style; sfs.background = (isGoal(sf))?"magenta": (avail(sf,dir))?"transparent": getC(sf,dir); var sss= document.getElementById (side+"s"+wallN).style; if(side=="left") sss.borderLeftColor= (isGoal(sf))?"magenta": (avail(sf,secdir))? "transparent": getC(sf,secdir); else sss.borderRightColor= (isGoal(sf))?"magenta": (avail(sf,secdir))? "transparent": getC(sf,secdir); if(avail(sf,secdir)){ checkSSide(getGrid (sf,secdir),side, 2,wallN,dir); } sidegrid = sf; sfAvail = avail(sidegrid,dir); wallN++; } }else{ closeWall(side,number,isGoal(grid)); } } function checkSSide(grid,side, sideN,wallN,dir){ var secdir =(dir+((side=="left")?1:3))%4; var ssf = document.getElementById (side+sideN+wallN); if(avail(grid,dir)){ ssf.style.background = "transparent"; var sWallN = wallN; var sGrid = grid; while(avail(sGrid,dir) && sWallNnow[0]) direc=0; else if(next[1]>now[1]) direc=1; else if(next[0]~<"); maze = startGame();} else if( m<4||n<4){ alert("That is too small!!"); maze = startGame(); } else{ alert ("Maze size is "+m+"*"+n); map = CreateMap(m,n); //alert (map[5][7]); sol = CreatePuzzle(map, m, n); soll = sol.length -1; end = [m-1,n-1]; while(!same(sol[soll--],end))sol.pop(); map[m-1][n] = [1,1]; goal = [m-1,n]; sol[soll+1] = goal; show(); maze = [map,sol]; memo = createMemoMap(m,n); return maze; } } // create the size function CreateMap(m, n){ gamemap = []; for(var p=0; p

[Game] Maze