var lScrollVTiles=lScreenHeight/tH;var lScrollHTiles=lScreenWidth/tW;var strPrevPalette="";var strCurBGColor=getPalette(lCurSX*lScreenTileWidth,lCurSY*lScreenTileHeight);lCurXOffset=lCurSX*(lScreenWidth/tW);lCurYOffset=lCurSY*(lScreenHeight/tH);var lPrevXOffset=lCurXOffset;var lPrevYOffset=lCurYOffset;var getElement=function(A){return document.getElementById(A)};var appChild=function(A,B){return A.appendChild(B)};var createElement=function(A){return document.createElement(A)};function init(){var D=createElement("div");D.setAttribute("id","debugBox");appChild(document.body,D);var C=createElement("div");C.setAttribute("id","PADiv");C.style.position="absolute";C.style.left="50%";C.style.top=10;C.style.overflow="hidden";C.style.width=C.width=(lViewportWidth*lScaler);C.style.height=C.height=(lViewportHeight*lScaler);C.style.marginLeft=-((lViewportWidth*lScaler)/2);appChild(document.body,C);var A=createElement("canvas");A.setAttribute("id","cStatusArea");A.style.position="absolute";A.style.left=0;A.style.top=-((lViewportHeight/tH)-lYMADSOffset)*tH;A.style.width=A.width=(lViewportWidth*lScaler);A.style.height=A.height=(lViewportHeight*lScaler);A.style.backgroundColor="#000";A.style.zIndex=100;appChild(C,A);var B=createElement("canvas");B.setAttribute("id","cPlayArea");B.style.position="absolute";B.style.left=0;B.style.top=lYMADSOffset*tH;B.style.width=B.width=lCurPAWidth=(lScreenWidth*lScaler)+(tW);B.style.height=B.height=lCurPAHeight=(lScreenHeight*lScaler)+(tH);B.style.zIndex=1;appChild(C,B);preloadTiles();document.onkeypress=keyHandler;alignDebugBox();debugPrint("Loading...");setTimeout("startIt()",500)}function togBuffer(){if(bShowBuffer){var A=getElement("PADiv");A.style.overflow="hidden";bShowBuffer=false}else{var A=getElement("PADiv");A.style.overflow="visible";bShowBuffer=true}alignDebugBox()}function alignDebugBox(){var C=getElement("debugBox");var B=getElement("PADiv");var A=getElement("cPlayArea");if(bShowBuffer){C.style.top=B.offsetTop+lCurPAHeight+A.offsetTop+2}else{C.style.top=B.offsetTop+B.offsetHeight+2}}function preloadTiles(){for(tCount=1;tCount<lTileCount;tCount++){tileData[tCount]=new Image();if(tileBase64[tCount]){tileData[tCount].src=tileBase64[tCount]}}}function drawTile(E,A,D,C){var B=getElement("cPlayArea").getContext("2d");if(E!=0){B.drawImage(tileData[E],(A*tW)*lScaler,(D*tH)*lScaler,tW*lScaler,tH*lScaler)}}function getPalette(D,C){var B=parseInt(D/lScreenTileWidth);var A=parseInt(C/lScreenTileHeight);return strBGColor[lRBGCData[A][B]]}function drawRect(F,D,B,E,A){var C=getElement("cPlayArea").getContext("2d");C.fillStyle=A;C.fillRect(F,D,B,E)}function drawScreen(O,H){var K=getElement("cPlayArea");var L=0;var D=0;var M=(lCurPAHeight/tH);var J=(lCurPAWidth/tW);if((lMapHeight-1)<(M+H)){M=(lMapHeight-1)-H}if((lMapWidth-1)<(J+O)){J=(lMapWidth-1)-O}var G=getPalette(O,H);var B=0;var I=0;var F;if(lPrevXOffset>O){for(L=0;L<=J;L++){F=getPalette(L+O,H);if(F!=G&&B==0){B=L+O}}if(B==0){B=O+J}L=0;var N=(B-O)*tW;drawRect(0,0,N,lCurPAHeight,G);if(B!=O+J){drawRect((N+1),0,(lCurPAWidth-N)+tW,lCurPAHeight,F)}}if(lPrevXOffset<O){G=getPalette(O+J,H);B=O+J+1;for(L=J;L>=0;L--){F=getPalette(L+O,H);if(F!=G&&B==(O+J+1)){B=L+O}}if(B==O+J+1){B=O}L=0;var N=(B-O)*tW-lCurPYOffset;drawRect(N,0,(lCurPAWidth-N),lCurPAHeight,G);if(B>=O){drawRect(0,0,(N+tW),lCurPAHeight,F)}}if(lPrevYOffset<H){G=getPalette(O,H+M);I=H+M+1;for(D=M;D>=0;D--){F=getPalette(O,D+H);if(F!=G&&I==(H+M+1)){I=D+H}}if(I==H+M+1){I=H}D=0;var E=(I-H)*tW-lCurPYOffset;drawRect(0,E,lCurPAWidth,(lCurPAHeight-E),G);if(I>=H){drawRect(0,0,lCurPAWidth,(E+tH),F)}}if(lPrevYOffset>H){for(D=0;D<=M;D++){F=getPalette(O,D+H);if(F!=G&&I==0){I=D+H}}if(I==0){I=H+M}D=0;var E=(I-H)*tH;drawRect(0,0,lCurPAWidth,E,G);if(I!=H+M){drawRect(0,(E+1),lCurPAWidth,(lCurPAHeight-E)+tH,F)}}for(D=0;D<=M;D++){for(L=0;L<=J;L++){var C=O+L;var A=H+D;drawTile(lMapData[A][C],L,D,G)}}updateStatus();lPrevXOffset=O;lPrevYOffset=H;if(G!=strPrevPalette){strPrevPalette=G}}function moveScreen(A){switch(A){case"up":if(lCurYOffset>0||bScrolling){if(lCurScrollVal<(lCurPAHeight-tH)/(lPScrollVal*lScaler)){if(bScrolling==false){lCurSY--}bScrolling=true;lCurScrollVal++;doMove("up");setTimeout("moveScreen('up')",lScrollTimerDelay)}else{bScrolling=false;lCurScrollVal=0}}else{bScrolling=false}break;case"left":if(lCurXOffset>0||bScrolling){if(lCurScrollVal<(lCurPAWidth-tW)/(lPScrollVal*lScaler)){if(bScrolling==false){lCurSX--}bScrolling=true;lCurScrollVal++;doMove("left");setTimeout("moveScreen('left')",lScrollTimerDelay)}else{bScrolling=false;lCurScrollVal=0}}else{bScrolling=false}break;case"right":if(lCurXOffset<lMaxMapScrollH||bScrolling){if(lCurScrollVal>-(lCurPAWidth-tW)/(lPScrollVal*lScaler)){if(bScrolling==false){lCurSX++}bScrolling=true;lCurScrollVal--;doMove("right");setTimeout("moveScreen('right')",lScrollTimerDelay)}else{bScrolling=false;lCurScrollVal=0}}else{bScrolling=false}break;case"down":if(lCurYOffset<lMaxMapScrollV||bScrolling){if(lCurScrollVal>-(lCurPAHeight-tH)/(lPScrollVal*lScaler)){if(bScrolling==false){lCurSY++}bScrolling=true;lCurScrollVal--;doMove("down");setTimeout("moveScreen('down')",lScrollTimerDelay)}else{bScrolling=false;lCurScrollVal=0}}else{bScrolling=false}break}}function updateStatus(){var A=getElement("cStatusArea");var C=A.getContext("2d");var B=getElement("cPlayArea");A.style.width=B.offsetWidth-tW;C.drawImage(tileData[21],0,lViewportHeight-(lYMADSOffset*tH))}function clearScreen(){var A=getElement("cPlayArea").getContext("2d");A.clearRect(0,0,(lCurPAWidth*lScaler),(lCurPAHeight*lScaler))}function fillScreen(){var A=getElement("cPlayArea").getContext("2d");A.fillStyle=strCurBGColor;A.fillRect(0,0,(lCurPAWidth*lScaler),(lCurPAHeight*lScaler))}function doMove(D){var A=false;var C=false;switch(D){case"down":if(lCurPYOffset<lCurPAHeight&&lCurYOffset<lMaxMapScrollV){lCurPYOffset+=(lPScrollVal*lScaler);C=true}if(lCurPYOffset>((tH-lPScrollVal)*lScaler)&&lCurYOffset<lMaxMapScrollV){lCurPYOffset=0;lCurYOffset++;A=true}break;case"right":if(lCurPXOffset<lCurPAWidth&&lCurXOffset<lMaxMapScrollH){lCurPXOffset+=(lPScrollVal*lScaler);C=true}if(lCurPXOffset>((tW-lPScrollVal)*lScaler)&&lCurXOffset<lMaxMapScrollH){lCurPXOffset=0;lCurXOffset++;A=true}break;case"up":if(lCurPYOffset>=0&&lCurYOffset>=0){lCurPYOffset-=(lPScrollVal*lScaler);C=true}if(lCurPYOffset<0&&lCurYOffset==0){lCurPYOffset=0}if(lCurPYOffset<0&&lCurYOffset>0){lCurPYOffset=((tH-lPScrollVal)*lScaler);lCurYOffset--;A=true}break;case"left":if(lCurPXOffset>=0&&lCurXOffset>=0){lCurPXOffset-=(lPScrollVal*lScaler);C=true}if(lCurPXOffset<0&&lCurXOffset==0){lCurPXOffset=0}if(lCurPXOffset<0&&lCurXOffset>0){lCurPXOffset=((tW-lPScrollVal)*lScaler);lCurXOffset--;A=true}break}if(A){drawScreen(lCurXOffset,lCurYOffset)}if(C){var B=getElement("cPlayArea");B.style.top=-(lCurPYOffset)+(lYMADSOffset*tH);B.style.left=-(lCurPXOffset);updateStatus()}}function reScale(C){clearScreen();lScaler=C;if(lScaler==2){lCurPXOffset=lCurPXOffset*2;lCurPYOffset=lCurPYOffset*2}else{lCurPXOffset=lCurPXOffset/2;lCurPYOffset=lCurPYOffset/2}var A=getElement("cPlayArea");var B=getElement("PADiv");B.style.width=B.width=(lViewportWidth*lScaler);B.style.height=B.height=(lViewportHeight*lScaler);B.style.marginLeft=-(lViewportWidth*lScaler)/2;A.style.top=lYMADSOffset*tH;A.style.width=A.width=lCurPAWidth=(lScreenWidth*lScaler)+(tW);A.style.height=A.height=lCurPAHeight=(lScreenHeight*lScaler)+(tH);A.style.left=-(lCurPXOffset);drawScreen(lCurXOffset,lCurYOffset);alignDebugBox()}function startIt(){debugPrint(lTotalMapRooms+" Rooms Loaded.");debugPrint("&lt;canvas&gt; Tile Engine (Zelda Edition)");debugPrint("Version 0.0.5a  d08.04.16");debugPrint("Written By: TeleKawaru");debugPrint("Arrow Keys, ESDF, or IJKL to move MAP");debugPrint("");debugPrint("Notes:");debugPrint("11:15pm 08.04.16: FINALLY nailed that background color scrolling issue! Hooray! Think I improved the speed a great deal as well...");fillScreen();drawScreen(lCurXOffset,lCurYOffset)}function debugPrint(A){var B=getElement("debugBox");if(B.innerHTML.length>0){B.innerHTML+="<br />\n"+A}else{B.innerHTML+=A}B.scrollTop=B.scrollHeight}function keyHandler(E){var C=window.event?event:E;var D=C.charCode?C.charCode:C.keyCode;var B=String.fromCharCode(D);var A=false;switch(D){case 37:B="j";break;case 38:B="i";break;case 39:B="l";break;case 40:B="k";break}if(!bScrolling){switch(B){case"1":if(lScaler!=1){reScale(1)}break;case"2":if(lScaler!=2){}break;case"h":togBuffer();break;case"i":case"e":A=true;moveScreen("up");break;case"j":case"s":A=true;moveScreen("left");break;case"k":case"d":A=true;moveScreen("down");break;case"l":case"f":A=true;moveScreen("right");break;default:break}if(A){return false}else{return true}}};