/*😄Please upvote if you like this code!😄*/ alert("Thank you for coming here!\nConsider the pattern as\n\t\t\t1\t\t2\t\t3\n\t\t\t4\t\t5\t\t6\n\t\t\t7\t\t8\t\t9\n then password is 3--2--4--5--6--8--7 i.e. basically a stylish \"S\".\nPlease 👍upvote if you like this!😄😄"); window.onload=()=>{ var canvas=document.querySelector("#canvas"); var info=document.createElement("div"); info.setAttribute("id","info"); info.textContent="Wrong Pattern"; var main=document.querySelector("#main"); canvas.addEventListener("touchstart",touchFuncSt); canvas.addEventListener("touchmove",touchFuncMv); canvas.addEventListener("touchend",touchFuncEn); document.body.addEventListener("click",function(){ traversed.splice(0,traversed.length); clearCan(); }); var ctx= canvas.getContext("2d"); var h= window.innerHeight; var w= window.innerWidth; var pxr= window.devicePixelRatio; var hp= h*pxr; var wp= w*pxr; canvas.height=hp/3; canvas.width=wp/2; var pos=[ [30,20],[180,20],[330,20], [30,170],[180,170],[330,170], [30,320],[180,320],[330,320], ]; var traversed=[]; var password=[[330,20],[180,20],[30,170],[180,170],[330,170],[180,320],[30,320]]; var offset=40; var mx,my,lx,ly; var matched=5; //Draw 9 dots var drawDots=(x,y)=>{ ctx.beginPath(); ctx.fillStyle="white"; ctx.arc(x,y,7,0,2*Math.PI,0); ctx.fill(); ctx.closePath(); } for(var i=30;i<=330;i+=150){ for(var j=20;j<=320;j+=150){ drawDots(i,j); } } //Add touch functions function touchFuncSt(event){ if(document.querySelector("#info")) main.removeChild(info); event.preventDefault(); mx= Math.round(event.touches[0].clientX); my= Math.round(event.touches[0].clientY)-(30/100)*h; } function touchFuncMv(event){ event.preventDefault(); lx= Math.round(event.touches[0].clientX); ly= Math.round(event.touches[0].clientY)-(30/100)*h; clearCan(); drawLines(lx,ly); } function touchFuncEn(event){ if(!verifyStart(lx,ly)){ traversed.splice(0,traversed.length); clearCan(); } else if(!areEqual(password,traversed)){ matched=0; clearCan(); main.insertBefore(info,canvas); window.navigator.vibrate(100); setTimeout(()=>{ matched =5; traversed.splice(0,traversed.length); clearCan(); },400); } else{ matched=1; clearCan(); setTimeout(()=>{ matched =5; traversed.splice(0,traversed.length); unlocked(); clearCan(); },100); } } //Verify initial touch var verifyStart=(x,y)=>{ for(var i=0;i{ if(verifyStart(mx,my)){ ctx.beginPath(); ctx.strokeStyle="white"; ctx.lineWidth=7; ctx.lineCap="round"; ctx.moveTo(verifyStart(mx,my)[0],verifyStart(mx,my)[1]); if(verifyStart(lx,ly)){ if(!isThere(verifyStart(lx,ly),traversed)){ traversed.push(verifyStart(lx,ly)); } mx= verifyStart(lx,ly)[0]; my= verifyStart(lx,ly)[1]; ctx.lineTo(verifyStart(lx,ly)[0],verifyStart(lx,ly)[1]); } else{ ctx.lineTo(lx,ly); } ctx.stroke(); ctx.closePath(); } } //clear and redraw the canvas on every touchmove in order to produce a single line var clearCan=()=>{ ctx.clearRect(0,0,canvas.height,canvas.width); canvas.height=hp/3; canvas.width=wp/2; for(var i=30;i<=330;i+=150){ for(var j=20;j<=320;j+=150){ drawDots(i,j); } } if(traversed.length >=2){ ctx.beginPath(); if(matched==0) ctx.strokeStyle="red"; else if(matched==1) ctx.strokeStyle="lightgreen"; else if(matched ==5) ctx.strokeStyle="white"; ctx.lineWidth=7; ctx.lineCap="round"; ctx.moveTo(traversed[0][0],traversed[0][1]); for(var i=1;i{ var flag=false; for(var i=0;i{ var c=0; var flag=0; if(x.length!=y.length) return false; for(var i=0;i{ main.style.left="100%"; setTimeout(()=>{ addTglBtn(); fillBody(); innerBody.style.opacity=1; tglTray.style.opacity=1; document.body.removeChild(main); },400); document.body.style.background="linear-gradient(45deg, rgba(255,206,82,1) 0%, rgba(183,64,230,1) 99%, rgba(183,64,230,1) 100%)"; } var clicked=false; var tglTray; var addTglBtn=()=>{ tglTray=document.createElement("div"); tglTray.setAttribute("id","tglTray"); document.body.appendChild(tglTray); var tglBtn=document.createElement("div"); tglBtn.setAttribute("id","tglBtn"); tglTray.appendChild(tglBtn); tglBtn.addEventListener("click",()=>{ if(!clicked){ tglBtn.style.left="58%"; clicked=!clicked; tglTray.style.background="red"; traversed.splice(0,traversed.length); setTimeout(()=>{ document.body.removeChild(tglTray ); document.body.removeChild(innerBody); document.body.style.background="url('https://image.ibb.co/f5eNmK/f15949824.jpg')"; document.body.appendChild(main); main.style.left="100%"; main.style.left="0%"; clicked =!clicked; },200); } else{ tglBtn.style.left="0%"; clicked=!clicked; tglTray.style.background="lightgreen"; } }); } //Fill the inner body //fill the body var imgList=[ "https://image.ibb.co/dHO0rU/ec9e9727_93bb_41e6_b032_c5ab56bc6ff1.jpg", "https://image.ibb.co/dPLfrU/ae86cb7a_c5a9_42bc_b117_7685b741e284.jpg", "https://image.ibb.co/ked0rU/065e9658_e6a2_45e6_a8c6_6ca86b23ecd7.jpg", "https://image.ibb.co/hTEvQp/c1042b85_5d8f_4bba_9326_9cf5bff211c0.jpg", "https://image.ibb.co/ggzjJ9/d38a35f5_1a90_405b_9c99_baa0c0e0f37e.jpg", "https://image.ibb.co/jZ0DBU/6546e2b1_225d_40fe_8b91_7dddf6768353.jpg", "https://image.ibb.co/fx0ry9/3ed85401_3374_4c90_bdb6_b833feedf676.jpg", "https://image.ibb.co/g7Dpkp/cb7251a0_187d_4f18_88a3_17f100a0ea5c.jpg", "https://image.ibb.co/mtUjJ9/daaec178_20e5_40a9_9388_f99ae0337a6b.jpg", "https://image.ibb.co/jsdYBU/a00d79fa_4a62_4ba3_8847_27b860fb704b.jpg", "https://image.ibb.co/go025p/5a8b8b52_ea8d_4123_aa4b_81d073d3f8c2.jpg", "https://image.ibb.co/b430rU/50bc9f68_ab3c_482d_86d0_02ff238fe394.jpg", "https://image.ibb.co/gMBmWU/833ed01d_5c47_4755_8235_f158f0da0f4c.jpg", "https://image.ibb.co/dexRWU/b47d188f_cbe4_4704_b9fa_694750d1c9dc.jpg", ]; imgList.reverse(); var list=[ ["https://code.sololearn.com/cnfGEnsULrcA/?ref=app","Find the Day of the Week You were Born!",], ["https://code.sololearn.com/W6d0E0j5wCMB/?ref=app","Emma's Paint Project"], ["https://code.sololearn.com/cMjHm80zOip1/?ref=app","Enter your name and see magic!!"], ["https://code.sololearn.com/cTiv3f2yUUMh/?ref=app","Password Generator"], ["https://code.sololearn.com/Wb9AzlVxfsBN/?ref=app","Amazing Multicolor Fireworks"], ["https://code.sololearn.com/choPH1o6IcnY/?ref=app","Print your name in Symbols v1.6"], ["https://code.sololearn.com/WdwSg2Um7KD2/?ref=app","Try to escape![GAME]"], ["https://code.sololearn.com/c3ZG1lFhdN3z/?ref=app","LifeGame 0.6"], ["https://code.sololearn.com/c7fwN4EK43fG/?ref=app","Beautiful Name 😘 | v1.7"], ["https://code.sololearn.com/cZX6QdGNy7R1/?ref=app","Your name in Japanese! Try it 😄😉"], ["https://code.sololearn.com/WB2rny04ROP3/?ref=app","Defend The Castle!"], ["https://code.sololearn.com/Wff0RKLg9K0Z/?ref=app","Working Android Phone"], ["https://code.sololearn.com/WGObAy7i6amA/?ref=app","Clash of tanks [game]"], ["https://code.sololearn.com/cl5DbEKWmsS5/?ref=app","DNA with..python"], ]; var social=[ ["https://image.ibb.co/fTax6U/unnamed_12.png","https://www.sololearn.com/Profile/8337962/?ref=app"], ["https://image.ibb.co/fZXc6U/facebook.png","https://www.facebook.com/shashiranjankv"], ["https://image.ibb.co/g7w4mU/instagram.png","https://www.instagram.com/shashiranjankv"], ]; var innerBody; var fillBody=()=>{ innerBody=document.createElement("div"); innerBody.setAttribute("id","innerBody"); document.body.appendChild(innerBody); var innerHead= document.createElement("h2"); innerHead.setAttribute("id","innerHead"); innerHead.textContent="Popular across SoloLearn"; innerBody.appendChild(innerHead ); var innerUL= document.createElement("ul"); innerUL.setAttribute("id","innerUL"); innerBody.appendChild(innerUL); for(var i=0;i'; footer.appendChild(ref); } var p= document.createElement("p"); p.setAttribute("id","credit"); p.innerHTML="© Shashi Ranjan"; innerBody.appendChild(p); } }

Pattern Lock simulator