var w, h, ctxmazes, ctxtuchs, cvsmazes, cvstuchs, cvsmario; var oMario, GameMaze; /* 12.01.2020 Edition of 2D maze generator created by Rull Deef: https://code.sololearn.com/W1N0H3YXm8ZB/?ref=app 12.01.2020 Edition Ripple Tuch creared by ChillPill https://code.sololearn.com/W9i06bH28SsN/?ref=app */ var BorderPanelSize = 300; var levelId = 0; // maze dimensions // width height // section mazes dimentions // amazesxw amazesyw var levelsOps = [ { width : 3, height : 3, amazesxw : 4, amazesyw : 4 }, { width : 5, height : 5, amazesxw : 4, amazesyw : 4 }, { width : 5, height : 5, amazesxw : 6, amazesyw : 6 }, { width : 8, height : 8, amazesxw : 6, amazesyw : 6 }, { width : 10, height : 10, amazesxw : 6, amazesyw : 6 }, { width : 10, height : 10, amazesxw : 7, amazesyw : 7 }, { width : 12, height : 12, amazesxw : 7, amazesyw : 7 }, { width : 12, height : 12, amazesxw : 8, amazesyw : 8 }, { width : 13, height : 13, amazesxw : 9, amazesyw : 9 }, { width : 20, height : 20, amazesxw : 12, amazesyw : 12 }, ]; // visible maze diemnsions const vw = 12, vh = 16; // visible maze position const vx = 0, vy = 0; var exitDoor = [ [ ['🔳','📀','🈶','📀','🈶','📀','🈶','📀','🈶','📀','🈶','🔳'], ['🔳','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🎮','🔳'], ['🔳','📀','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🔳'], ['🔳','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🎮','🎮','🔳'], ['🔳','📀','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🔳'], ['🔳','🈶','🈶','🈶','🈶','🎮','🈶','🈶','🈶','🎮','🎮','🔳'], ['🔳','📀','🈶','🈶','🎮','📘','🎮','🈶','🈶','🈶','📀','🔳'], ['🔳','🈶','🈶','🎮','📘','📘','📘','🎮','🈶','🈶','🈶','🔳'], ['🔳','📀','🈶','🎮','📘','📘','📘','🎮','🈶','🈶','📀','🔳'], ['🔳','🈶','🈶','🈶','🎮','📘','🎮','🈶','🈶','🈶','🈶','🔳'], ['🔳','📀','🈶','🈶','🈶','🎮','🈶','🈶','🈶','🎮','🎮','🔳'], ['🔳','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🔳'], ['🔳','📀','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🎮','🎮','🔳'], ['🔳','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🔳'], ['🔳','📀','🈶','🈶','🈶','🈶','🈶','🈶','🈶','🎮','🎮','🔳'], ['🔳','🈶','📀','🈶','📀','🈶','📀','🈶','📀','🈶','📀','🔳'], ] ]; var mario = [ //Left or Right moves 0 - 2 [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','📕','📕','🔳'], ['🔳','🔳','🈶','🈶','🈶','📔','📔','🎮','📔','🔳','🔳','🔳'], ['🔳','🈶','📔','🈶','📔','📔','📔','🎮','📔','📔','📔','🔳'], ['🔳','🈶','📔','🈶','🈶','📔','📔','📔','🎮','📔','📔','📔'], ['🔳','🈶','🈶','📔','📔','📔','📔','🎮','🎮','🎮','🎮','🔳'], ['🔳','🔳','🔳','📔','📔','📔','📔','📔','📔','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📘','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','📕','📕','📕','📘','📕','📕','📘','📕','📕','📕','🔳'], ['📕','📕','📕','📕','📘','📘','📘','📘','📕','📕','📕','📕'], ['📔','📔','📕','📘','📀','📘','📘','📀','📘','📕','📔','📔'], ['🔳','🔳','🔳','📘','📘','📘','📘','📘','📘','🔳','🔳','🔳'], ['🔳','🔳','📘','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','📘','📘','📘','🔳','🔳'], ['🔳','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🔳'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🎮'] ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','📕','📕','🔳'], ['🔳','🔳','🈶','🈶','🈶','📔','📔','🎮','📔','🔳','🔳','🔳'], ['🔳','🈶','📔','🈶','📔','📔','📔','🎮','📔','📔','📔','🔳'], ['🔳','🈶','📔','🈶','🈶','📔','📔','📔','🎮','📔','📔','📔'], ['🔳','🈶','🈶','📔','📔','📔','📔','🎮','🎮','🎮','🎮','🔳'], ['🔳','🔳','🔳','📔','📔','📔','📔','📔','📔','🔳','🔳','🔳'], ['🔳','🔳','🔳','📕','📕','📕','🔳','🔳','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📘','🔳','🔳','🔳','🔳','🔳'], ['🔳','📕','📕','📕','📕','📕','📘','📕','🔳','🔳','🔳','🔳'], ['🔳','📕','🔳','📕','📕','📕','📀','📕','🔳','🔳','🔳','🔳'], ['🔳','📔','📔','📘','📘','📘','📘','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','📘','📘','📘','📘','📔','🔳','🔳','🔳','🔳'], ['🔳','🔳','📘','📘','📘','📘','📘','📘','🔳','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','🎮','🔳','🎮','🎮','🎮','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','🎮','🔳','🎮','🎮','🎮','🎮','🔳','🔳'], ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','📕','📕','🔳'], ['🔳','🔳','🈶','🈶','🈶','📔','📔','🎮','📔','🔳','🔳','🔳'], ['🔳','🈶','📔','🈶','📔','📔','📔','🎮','📔','📔','📔','🔳'], ['🔳','🈶','📔','🈶','🈶','📔','📔','📔','🎮','📔','📔','📔'], ['🔳','🈶','🈶','📔','📔','📔','📔','🎮','🎮','🎮','🎮','🔳'], ['🔳','🔳','🔳','📔','📔','📔','📔','📔','📔','🔳','🔳','🔳'], ['🔳','🔳','🔳','📕','📕','📕','🔳','🔳','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','📕','📕','📕','📘','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📘','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📀','🔳','📕','🔳','🔳','🔳'], ['🔳','🔳','📕','📘','📘','📘','📘','🔳','📔','📔','🔳','🔳'], ['🔳','🔳','📔','📘','📘','📘','📘','📘','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','📘','📘','📘','📘','📘','📘','🔳','🔳','🔳'], ['🔳','🔳','🔳','🎮','🎮','🎮','🔳','🎮','🎮','🎮','🔳','🔳'], ['🔳','🔳','🔳','🎮','🎮','🎮','🔳','🎮','🎮','🎮','🎮','🔳'], ], //Down moves 3 - 5 [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','📕','📕','📕','📕','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','🎮','📔','🎮','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','📔','📔','📔','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','🎮','🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','📔','📔','📔','🎮','🎮','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📘','📕','📕','📘','📕','🔳','🔳','🔳'], ['🔳','📕','📕','📕','📘','📕','📕','📘','📕','📕','📕','🔳'], ['📕','📕','📕','📕','📘','📘','📘','📘','📕','📕','📕','📕'], ['📔','📔','📕','📘','📀','📘','📘','📀','📘','📕','📔','📔'], ['🔳','🔳','🔳','📘','📘','📘','📘','📘','📘','🔳','🔳','🔳'], ['🔳','🔳','📘','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','📘','📘','📘','🔳','🔳'], ['🔳','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🔳'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🎮'] ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','📕','📕','📕','📕','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','🎮','📔','🎮','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','📔','📔','📔','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','🎮','🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','📔','📔','📔','🎮','🎮','📕','📕','🔳'], ['🔳','🔳','🔳','📕','📘','📕','📕','📘','📕','📕','📕','📕'], ['🔳','🔳','📕','📕','📘','📕','📕','📘','📕','📕','📔','📔'], ['🔳','📕','📕','📕','📘','📘','📘','📘','📕','🔳','🔳','🔳'], ['📕','📕','📕','📘','📀','📘','📘','📀','📘','📘','🔳','🔳'], ['📔','📔','🔳','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','📘','🎮','🎮','🎮','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','🔳','🎮','🎮','🎮','🎮'], ['🔳','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳'] ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📕','📕','📕','📕','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','📔','🎮','📔','🎮','📔','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','📔','📔','📔','📔','📔','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','🎮','🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳'], ['🔳','📕','🎮','🎮','📔','📔','📔','🎮','🎮','🔳','🔳','🔳'], ['📕','📕','📕','📕','📘','📕','📕','📘','📕','🔳','🔳','🔳'], ['📔','📔','📕','📕','📘','📕','📕','📘','📕','🔳','🔳','🔳'], ['🔳','🔳','🔳','📕','📘','📘','📘','📘','📕','📕','📕','🔳'], ['🔳','🔳','📘','📘','📀','📘','📘','📀','📘','📕','📕','🔳'], ['🔳','📘','📘','📘','📘','📘','📘','📘','📘','🔳','📕','📕'], ['🔳','🎮','🎮','🎮','📘','🔳','🔳','📘','📘','📘','📔','📔'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','📘','📘','📘','🔳','🔳'], ['🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🔳'], ['🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🎮'] ], //Up moves 6 - 8 [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📕','📕','📕','📕','📕','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','🈶','📕','📕','📕','🈶','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','📔','📔','📔','🎮','🎮','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📘','📕','📕','📘','📕','🔳','🔳','🔳'], ['🔳','📕','📕','📕','📘','📘','📘','📘','📕','📕','📕','🔳'], ['📕','📕','📕','📕','📘','📘','📘','📘','📕','📕','📕','📕'], ['📔','📔','📕','📘','📘','📘','📘','📘','📘','📕','📔','📔'], ['🔳','🔳','🔳','📘','📘','📘','📘','📘','📘','🔳','🔳','🔳'], ['🔳','🔳','📘','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','📘','📘','📘','🔳','🔳'], ['🔳','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🔳'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🎮'] ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📕','📕','📕','📕','📕','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','🈶','📕','📕','📕','🈶','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','🔳','🎮','🎮','📔','📔','📔','🎮','🎮','📕','📕','🔳'], ['🔳','🔳','🔳','📕','📘','📕','📕','📘','📕','📕','📕','📕'], ['🔳','🔳','📕','📕','📘','📘','📘','📘','📕','📕','📔','📔'], ['🔳','📕','📕','📕','📘','📘','📘','📘','📕','🔳','🔳','🔳'], ['📕','📕','📕','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['📔','📔','🔳','📘','📘','📘','📘','📘','📘','📘','🔳','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','📘','🎮','🎮','🎮','🔳'], ['🔳','🔳','📘','📘','📘','🔳','🔳','🔳','🎮','🎮','🎮','🎮'], ['🔳','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳'] ], [ ['🔳','🔳','🔳','📕','📕','📕','📕','📕','🔳','🔳','🔳','🔳'], ['🔳','🔳','📕','📕','📕','📕','📕','📕','📕','🔳','🔳','🔳'], ['🔳','🔳','🈶','📕','📕','📕','📕','📕','🈶','🔳','🔳','🔳'], ['🔳','🔳','🈶','🈶','📕','📕','📕','🈶','🈶','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','🔳','🔳','🈶','🈶','🈶','🈶','🈶','🔳','🔳','🔳','🔳'], ['🔳','📕','🎮','🎮','📔','📔','📔','🎮','🎮','🔳','🔳','🔳'], ['📕','📕','📕','📕','📘','📕','📕','📘','📕','🔳','🔳','🔳'], ['📔','📔','📕','📕','📘','📘','📘','📘','📕','🔳','🔳','🔳'], ['🔳','🔳','🔳','📕','📘','📘','📘','📘','📕','📕','📕','🔳'], ['🔳','🔳','📘','📘','📘','📘','📘','📘','📘','📕','📕','🔳'], ['🔳','📘','📘','📘','📘','📘','📘','📘','📘','🔳','📕','📕'], ['🔳','🎮','🎮','🎮','📘','🔳','🔳','📘','📘','📘','📔','📔'], ['🎮','🎮','🎮','🎮','🔳','🔳','🔳','📘','📘','📘','🔳','🔳'], ['🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🔳'], ['🔳','🔳','🔳','🔳','🔳','🔳','🔳','🔳','🎮','🎮','🎮','🎮'] ] ]; var color="#ffffff"; var touchX,touchY; var radius = 0; var frameCount=0; onload = () => { cvsmazes = document.querySelector('#mazes'); cvstuchs = document.querySelector('#tuchs'); cvsmario = document.querySelector('#mario'); w = cvsmazes.width = 3*innerWidth; h = cvsmazes.height = 3*innerHeight; ctxmazes = cvsmazes.getContext('2d'); ctxmazes.lineWidth = 5; ctxmazes.lineCap = 'round'; cvstuchs.width = cvsmazes.width; cvstuchs.height = cvsmazes.height; ctxtuchs = cvstuchs.getContext('2d'); cvstuchs.addEventListener('touchstart', sketchpad_touchStart, false); cvstuchs.addEventListener('touchend', sketchpad_touchEnd, false); cvstuchs.addEventListener("mousedown", sketchpad_mouseDown, false); cvstuchs.addEventListener("mouseup", sketchpad_mouseUp, false); cvsmario.width = cvsmazes.width; cvsmario.height = cvsmazes.height; ctxmario = cvsmario.getContext('2d'); oMario = new cMario(); clearTuchCanvas(); clearMarioCanvas(); clearMazeCanvas(); if( levelId < levelsOps.length ){ beginLevel(); } } function beginLevel() { if( levelId === 0 ){ alert("🐉\nAn evil dragon lured mario into a pyramid of labyrinths.\n"+ "You need to go through ten levels and take Mario out of the pyramid.\n🤔"); } alert("🐉\nPyramid level [ " + (levelId + 1) + " [. Try to get mario out of the maze.\n😏🐉\n"); oMario.resetPos(); GameMaze = generateMazeLinkSections( levelsOps[ levelId ].amazesxw, levelsOps[ levelId ].amazesyw, levelsOps[ levelId ].width, levelsOps[ levelId ].width); n = GameMaze.length; m = GameMaze[0].length; side = Math.floor(0.98 * Math.min( w/vw, h/vh ) ); iLeftbord = BorderPanelSize + Math.floor( ( w - side*vw ) / 2.0 ); iTopbord = BorderPanelSize + Math.floor( ( h - side*vh ) / 2.0 ); renderMaze( GameMaze ); oMario.showMario(); } function drawLine() { clearTuchCanvas() ctxtuchs.shadowBlur = 20; ctxtuchs.shadowColor = color; ctxtuchs.strokeStyle = color; ctxtuchs.beginPath(); ctxtuchs.arc( touchX ,touchY, radius,0,Math.PI*2); ctxtuchs.strokeStyle = color; ctxtuchs.stroke(); ctxtuchs.closePath(); if(stop==false){ frameCount++; radius+=10; if(radius>=100){ radius=100; } window. requestAnimationFrame(drawLine); } } // Clear the canvas function clearTuchCanvas() { ctxtuchs.clearRect( 0, 0, cvstuchs.width, cvstuchs.height); } function clearMarioCanvas() { ctxmario.clearRect( 0, 0, cvsmario.width, cvsmario.height); } function clearMazeCanvas() { ctxmazes.clearRect( 0, 0, cvsmario.width, cvsmario.height); } function getMousePos(mouseEvent) { if (!mouseEvent){ var mouseEvent = event; } var rect = cvstuchs.getBoundingClientRect(); var scaleX = cvstuchs.width / rect.width; var scaleY = cvstuchs.height / rect.height; touchX = ( mouseEvent.clientX - rect.left ) * 3; touchY = ( mouseEvent.clientY - rect.top ) * 3; } function sketchpad_mouseDown(e) { getMousePos(e); clearTuchCanvas(); stop = false; drawLine(); event.preventDefault(); } function sketchpad_mouseUp(e) { getMousePos(e); stop = true; setTimeout(clearTuchCanvas,100); radius = 0; mPos = oMario.getPos(); dx = mPos.x - touchX; dy = mPos.y - touchY; if( Math.abs(dx) > Math.abs(dy) ){ if( mPos.x < touchX ) { oMario.moveRight(); } else { oMario.moveLeft(); } } else { if( mPos.y > touchY ) { oMario.moveUp(); } else { oMario.moveDown(); } } event.preventDefault(); } function getTouchPos(tuchEvent) { if (!tuchEvent){ var tuchEvent = event; } if(tuchEvent.touches) { if (tuchEvent.touches.length >= 1) { var rect = cvstuchs.getBoundingClientRect(); var scaleX = cvstuchs.width / rect.width; var scaleY = cvstuchs.height / rect.height; var touch = tuchEvent.touches[0]; touchX = ( touch.pageX - rect.left ) * 3; touchY = ( touch.pageY - rect.top ) * 3; } } } function sketchpad_touchEnd(e) { getTouchPos(e); stop = true; setTimeout(clearTuchCanvas,100); radius = 0; mPos = oMario.getPos(); dx = mPos.x - touchX; dy = mPos.y - touchY; if( Math.abs(dx) > Math.abs(dy) ){ if( mPos.x < touchX ) { oMario.moveRight(); } else { oMario.moveLeft(); } } else { if( mPos.y > touchY ) { oMario.moveUp(); } else { oMario.moveDown(); } } event.preventDefault(); } function sketchpad_touchStart(e) { getTouchPos(e); clearTuchCanvas(); stop = false; drawLine(); event.preventDefault(); } function getPos(e) { if (!e){ var e = event; } touchX=e.pageX-e.target.offsetLeft; touchY=e.pageY-e.target.offsetTop; } function generateMazeLinkSections( xw, yw, n, m) { amazes = []; fmaze = []; nd2 = Math.floor( n / 2 ); md2 = Math.floor( m / 2 ); for(let im = 0, imx, imy; im < xw*yw ; im ++) { maze = generateMazeOnePath( n, m ); //Add link points in section imx = im % xw; imy = Math.floor( im / xw) ; if( imx === 0 ) { maze[ n-1 ][ md2-1 ].wallRight = false; } else if( imx === xw - 1) { maze[ 0 ][ md2-1 ].wallLeft = false; } else { maze[ n-1 ][ md2-1 ].wallRight = false; maze[ 0 ][ md2-1 ].wallLeft = false; } if( imy === 0 ) { maze[ nd2-1 ][ m-1 ].wallBottom = false; } else if( imy === yw - 1) { maze[ nd2-1 ][ 0 ].wallTop = false; } else { maze[ nd2-1 ][ m-1 ].wallBottom = false; maze[ nd2-1 ][ 0 ].wallTop = false; } amazes.push([...maze]); } for(let fx = 0; fx < n*xw; fx++) { fmaze.push([]); for(let fy = 0, im, imx, imy; fy < m*yw; fy++) { im = Math.floor( fx / n ) + Math.floor( fy / m )*xw; imx = fx % n; imy = fy % m; fmaze[ fx ].push( amazes[ im ][ imx ][ imy ] ); } } return fmaze; } function generateMazeOnePath(n, m) { cells = []; // initialize with closed cells for(let x = 0; x < n; x++) { cells.push([]); for(let y = 0; y < m; y++) { cells[x].push({ x: x, y: y, wallTop: true, wallBottom: true, wallLeft: true, wallRight: true, visited: false }); } } stack = [cells[0][0]]; while(stack.length > 0) { curr = stack[stack.length - 1]; const x = curr.x; const y = curr.y; curr.visited = true; activeCells = []; if(curr.x > 0 && !cells[x-1][y].visited) { activeCells.push(cells[x-1][y]); } if(curr.y > 0 && !cells[x][y-1].visited) { activeCells.push(cells[x][y-1]); } if(curr.x < n-1 && !cells[x+1][y].visited) { activeCells.push(cells[x+1][y]); } if(curr.y < m-1 && !cells[x][y+1].visited) { activeCells.push(cells[x][y+1]); } if(activeCells.length > 0) { next = activeCells[Math.floor (Math.random()*activeCells.length)]; // remove wall between cells if(x == next.x) { if(y < next.y) { curr.wallBottom = false; next.wallTop = false; } else { curr.wallTop = false; next.wallBottom = false; } } else { if(x < next.x) { curr.wallRight = false; next.wallLeft = false; } else { curr.wallLeft = false; next.wallRight = false; } } stack.push(next); } else { stack.pop(); } } return cells; } function drawMazeCell( cell, x, y, side ){ ctxmazes.fillStyle = "#333333"; ctxmazes.fillRect(x,y,side,side); ctxmazes.strokeStyle = '#DDDDDD'; if(cell.wallTop) { ctxmazes.beginPath(); ctxmazes.moveTo(x, y); ctxmazes.lineTo(x + side, y); ctxmazes.stroke(); } if(cell.wallLeft) { ctxmazes.beginPath(); ctxmazes.moveTo(x, y); ctxmazes.lineTo(x, y + side); ctxmazes.stroke(); } if(cell.wallBottom) { ctxmazes.beginPath(); ctxmazes.moveTo(x, y + side); ctxmazes.lineTo(x + side, y + side); ctxmazes.stroke(); } if(cell.wallRight) { ctxmazes.beginPath(); ctxmazes.moveTo(x + side, y); ctxmazes.lineTo(x + side, y + side); ctxmazes.stroke(); } } function renderMaze(maze) { n = maze.length; m = maze[0].length; clearMazeCanvas(); for(let ix = 0; ix < n; ix++) for(let iy = 0; iy < m; iy++) { cell = maze[ix][iy]; x = iLeftbord + ( side * ix ) ; y = iTopbord + ( side * iy ) ; drawMazeCell( cell, x, y, side ); } showExitDoor(); } function rednerBitmap( vBitmap, ctx, bx, by, tx, ty, bsx, bsy, fx, fy, inv ) { for(let x = 0; x < 12; x++){ for(let y = 0; y < 16; y++){ switch( vBitmap[ y ] [ inv?(11 - x):x ] ){ case '📕': ctx.fillStyle = "red"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; case '🈶': ctx.fillStyle = "brown"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; case '📔': ctx.fillStyle = "#FFCD94"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; case '🎮': ctx.fillStyle = "black"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; case '📘': ctx.fillStyle = "blue"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; case '📀': ctx.fillStyle = "yellow"; ctx.fillRect( bx + tx + x*bsx, by + ty + y*bsy, bsx + fx, bsy + fy ); break; } } } } function showExitDoor() { n = GameMaze.length; m = GameMaze[0].length; blr = 0; //not left vBitmap = exitDoor[ 0 ]; bx = iLeftbord + (n-1) * side; by = iTopbord + (m-1) * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmazes, bx, by, tx, ty, bsx, bsy, fx, fy, blr ); } class cMario { constructor() { this.resetPos(); }; resetPos() { this.mX = 0; this.mY = 0; this.mLeft = false; this.mRigth = false; this.mTop = false; this.mDown = false; this.mMoveIt = 0; } checkVisibleBorders() { let bx, by, ok, needRender = false; ok = false; while( !ok){ bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; ok = true; if( bx < BorderPanelSize ){ iLeftbord += 50; ok = false; } else if( bx > cvsmazes.width - BorderPanelSize ){ iLeftbord -= 50; ok = false; }; if( by < BorderPanelSize ){ iTopbord += 50; ok = false; } else if( by > cvsmazes.height - BorderPanelSize ){ iTopbord -= 50; ok = false; }; if(!ok)needRender = true; }; if(needRender)renderMaze( GameMaze ); } getPos() { return { x : iLeftbord + this.mX * side, y : iTopbord + this.mY * side }; } moveUp(){ if( GameMaze[this.mX][this.mY].wallTop == true )return; this.mY -= 1; this.mLeft = false; this.mRigth = false; this.mTop = true; this.mDown = false; this.mMoveIt = (++this.mMoveIt)>2?0:this.mMoveIt; this.showMario(); } moveDown(){ if( GameMaze[this.mX][this.mY].wallBottom == true )return; this.mY += 1; this.mLeft = false; this.mRigth = false; this.mTop = false; this.mDown = true; this.mMoveIt = (++this.mMoveIt)>2?0:this.mMoveIt; this.showMario(); } moveLeft(){ if( GameMaze[this.mX][this.mY].wallLeft == true )return; this.mX -= 1; this.mLeft = true; this.mRigth = false; this.mTop = false; this.mDown = false; this.mMoveIt = (++this.mMoveIt)>2?0:this.mMoveIt; this.showMario(); } moveRight(){ if( GameMaze[this.mX][this.mY].wallRight == true )return; this.mX += 1; this.mLeft = false; this.mRigth = true; this.mTop = false; this.mDown = false; this.mMoveIt = (++this.mMoveIt)>2?0:this.mMoveIt; this.showMario(); } showMario() { n = GameMaze.length; m = GameMaze[0].length; clearMarioCanvas(); this.checkVisibleBorders(); let bmariolr, vBitmap, bx, by, tx, ty, bsx, bsy, fx, fy; if( this.mLeft ){ bmariolr = 1; //Left vBitmap = mario[ this.mMoveIt ]; bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmario, bx, by, tx, ty, bsx, bsy, fx, fy, bmariolr ); } else if( this.mRigth ){ bmariolr = 0; //right vBitmap = mario[ this.mMoveIt ]; bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmario, bx, by, tx, ty, bsx, bsy, fx, fy, bmariolr ); } else if( this.mTop ){ bmariolr = 0;//not Left vBitmap = mario[ 6 + this.mMoveIt]; bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmario, bx, by, tx, ty, bsx, bsy, fx, fy, bmariolr ); } else if( this.mDown ){ bmariolr = 0;//not Left vBitmap = mario[ 3 + this.mMoveIt]; bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmario, bx, by, tx, ty, bsx, bsy, fx, fy, bmariolr ); } else { bmariolr = 0;//not Left vBitmap = mario[ 3 ]; bx = iLeftbord + this.mX * side; by = iTopbord + this.mY * side; tx = 6; ty = 6; bsx = Math.floor( ( side - tx*2 ) / 12 ); bsy = Math.floor( ( side - ty*2 ) / 16 ); fx = 2; fy = 2; rednerBitmap( vBitmap, ctxmario, bx, by, tx, ty, bsx, bsy, fx, fy, bmariolr ); } n = GameMaze.length; m = GameMaze[0].length; if( (this.mX == n - 1) && (this.mY == m - 1) ){ levelId++; if( levelId < levelsOps.length ){ alert("Success. You managed to leave the level [ " +levelId+ " ] of the dragon maze.\n😌"); beginLevel(); } else { alert("Success. You managed to save Mario from the dragon pyramid of labyrinths!!!\n🤗🤗🤗🤗"); }; }; }; }

Maze Survival Game v1 - Fourth Experiment