"+wordArr[n]+"

"; } wcnt[wordPos].innerHTML = txt; if(temp1.indexOf(currentWord) < 0){ temp1.push(currentWord); updateCoin(10); //play("right"); if(temp1.length >= levels[currentLevel][0].length){ temp1 = []; temp2 = []; setTimeout(function(){ levelComplete(); // startLevel(currentLevel+1); },2000) setTimeout(function(){ var wls = document.getElementsByClassName("wld"); for(var n = 0; n < wls.length; n++){ wls[n].style.transform = "translateY("+Math.floor(100+Math.random()*200)+"px) rotate("+Math.floor(Math.random()*90-45)+"deg)"; wls[n].style.opacity = 0; lContainer.style.transform = "scale(0) rotate(0)"; levelDiv.style.transform = "translateY(-100px)"; shuffleBtn.style.transform = "translateX(-100px)"; hintBtn.style.transform = "translateX(100px)"; } },1000); } setTimeout(function(){ play("right"); },100); } } else if(levels[currentLevel][1].indexOf(currentWord) > -1){ ctx.strokeStyle = "orange"; previewTxt.style.background = "orange"; previewTxt.style.color = "#fff"; if(temp2.indexOf(currentWord) === -1){ wrong--; temp2.push(currentWord); bonusCoin += currentWord.length; updateCoin(currentWord.length); setTimeout(function(){ play("extraWord"); },100) } else { } } else { ctx.strokeStyle = "red"; previewTxt.style.background = "red"; previewTxt.style.color = "#fff"; setTimeout(function(){ wrong++; play("wrong"); },100); } drawLine(points[linePoints[linePoints.length-1]][0],points[linePoints[linePoints.length-1]][1]); setTimeout(function(){ ctx.clearRect(0,0,w,h); ctx.strokeStyle = "blue"; previewTxt.textContent = ""; previewTxt.style.background = "rgba(240,240,240,0.8)"; previewTxt.style.color = "#666"; previewTxt.style.display = "none"; },500) } } c.addEventListener("touchstart",function(e){ e.preventDefault(); var touchObject, tx, ty; if(started){ touchObject = e.changedTouches[0]; tx = parseInt(touchObject.clientX); ty = parseInt(touchObject.clientY); for(var n = 0; n < 5; n++){ if(Math.sqrt(Math.pow(points[n][0]-tx,2)+Math.pow(points[n][1]-ty,2)) < 30){ linePoints.push(n); // play("select"); previewTxt.textContent += lt[n].textContent; previewTxt.style.display = "inline-block"; started = false; play("select"); } } } }) c.addEventListener("touchmove",function(e){ e.preventDefault(); var touchObject, tx, ty; if(!started){ touchObject = e.changedTouches[0]; tx = parseInt(touchObject.clientX); ty = parseInt(touchObject.clientY); for(var n = 0; n < 5; n++){ if(Math.sqrt(Math.pow(points[n][0]-tx,2)+Math.pow(points[n][1]-ty,2)) < 30){ if(linePoints.indexOf(n) === -1){ linePoints.push(n); //play("select"); previewTxt.textContent += lt[n].textContent; play("select"); } } } drawLine(tx,ty); } }) c.addEventListener("touchend",function(){ currentWord = ""; for(var n = 0; n < linePoints.length; n++){ currentWord += lt[linePoints[n]].textContent; } clearLine(); linePoints = []; started = true; }) //Mouse events... var msdn = false; c.addEventListener("mousedown",function(e){ e.preventDefault(); msdn = true; var touchObject, tx, ty; if(started){ touchObject = e//.changedTouches[0]; tx = parseInt(touchObject.clientX); ty = parseInt(touchObject.clientY); for(var n = 0; n < 5; n++){ if(Math.sqrt(Math.pow(points[n][0]-tx,2)+Math.pow(points[n][1]-ty,2)) < 30){ linePoints.push(n); //play("select"); previewTxt.textContent += lt[n].textContent; previewTxt.style.display = "inline-block"; started = false; play("select"); } } } }) c.addEventListener("mousemove",function(e){ e.preventDefault(); var touchObject, tx, ty; if(!started){ touchObject = e//.changedTouches[0]; tx = parseInt(touchObject.clientX); ty = parseInt(touchObject.clientY); for(var n = 0; n < 5; n++){ if(Math.sqrt(Math.pow(points[n][0]-tx,2)+Math.pow(points[n][1]-ty,2)) < 30){ if(linePoints.indexOf(n) === -1){ linePoints.push(n); //play("select"); previewTxt.textContent += lt[n].textContent; play("select"); } } } drawLine(tx,ty); } }) c.addEventListener("mouseup",function(){ currentWord = ""; for(var n = 0; n < linePoints.length; n++){ currentWord += lt[linePoints[n]].textContent; } clearLine(); linePoints = []; started = true; msdn = false; }) //transitions function trn1(x,t){ x.style.transform = t; } function letterTrans(x){ trn1(x,"scale(0.8)"); setTimeout(function(){ trn1(x,"scale(1)"); },100) } //Level var currentLevel = 0; var currentWord = ""; var wcnt = document.getElementsByClassName("word"); function startLevel(ln){ currentLevel = ln; ctx.fillRect(0,0,w,h); completeDiv.style.display = "none"; levelDiv.style.transform = "translateY(0px)"; shuffleBtn.style.transform = "translateX(0)"; hintBtn.style.transform = "translateX(0)"; _s("levelNum").textContent = ln+1; var levelContent = levels[ln][0]; levelContent = levelContent[levelContent.length-1].split(""); levelContent.sort(function(x,y){return Math.random() - 0.5}); for(var n = 0; n < levelContent.length; n++){ lt[n].textContent = levelContent[n]; //lt[n].style.transform = "rotate("+Math.floor(Math.random()*40-20)+"deg)"; } lContainer.style.transform = "scale(1) rotate(0deg)"; for(var n = 0; n < levels[ln][0].length; n++){ var txt = ""; for(var x = 0; x < levels[ln][0][n].length; x++){ txt += "

"; } wcnt[n].innerHTML = txt; } var curvePoints = []; for(var n = 0; n < 20; n++){ if(n%2 === 0){ curvePoints.push(Math.floor(w/2-Math.random()*w/10)); } else { curvePoints.push(Math.floor(w/2+Math.random()*w/10)); } } var dx = 0; var fy = h/19; function drawAnim(){ ctx.clearRect(0,0,w,h); ctx.beginPath(); ctx.moveTo(0,0); for(var n = 0; n < curvePoints.length; n++){ ctx.lineTo(curvePoints[n]-dx,fy*n); } ctx.lineTo(0,h); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(w,0); for(var n = 0; n < curvePoints.length; n++){ ctx.lineTo(curvePoints[n]+dx,fy*n); } ctx.lineTo(w,h); ctx.fill(); ctx.closePath(); dx+=10; if(dx > w/1.5){ clearInterval(intv); dx = 0; } } var intv = setInterval(drawAnim,20); } //startLevel(0); //star... function star(x){ var txt = ""; for(var n = 0; n < 3; n++){ txt += (n < x) ? "⭐" : "⭐"; } _s("star").innerHTML = txt; } //menu nextBtn.addEventListener("click",function(){ if((currentLevel+1) < levels.length){ startLevel(currentLevel+1); //sounds.levelStart.play().catch(function(err){alert(err)}); play("levelStart"); } else { startLevel(0); //currentLevel = 0; } }) var wrong = 0; var totalCoin = 0; var bonusCoin = 0; function levelComplete(x){ completeDiv.style.display = "block"; var starCount; if(wrong < 2){ starCount = 3; } else if(wrong < 4){ starCount = 2; } else{ starCount = 1; } wrong = 0; star(starCount); updateLevelMenu(currentLevel+1,bonusCoin,starCount); bonusCoin = 0; play("levelComplete"); } function shuffle(){ var levelContent = levels[currentLevel][0]; levelContent = levelContent[levelContent.length-1].split("").sort(function(x,y){return Math.random() - 0.5}); for(var n = 0; n < levelContent.length; n++){ lt[n].textContent = levelContent[n]; //lt[n].style.transform = "rotate("+Math.floor(Math.random()*40-20)+"deg)"; } lContainer.style.transform = "scale(0.1) rotate(720deg)"; setTimeout(function(){ lContainer.style.transform = "scale(1) rotate(0deg)"; },500) play("shuffle"); } shuffleBtn.addEventListener("click",shuffle); var levelBtn = _s("levelBtn"); var levelCnt = _s("levelCnt"); var levelBack = document.querySelector("#levelBack button"); var lvb = _s("levelBack"); lvb.style.left = "0px"; lvb.style.bottom = (ltp+20)+'px'; lvb.style.width = vw+"px"; levelBtn.addEventListener("click",function(){ levelCnt.style.display = "block"; nextBtn.style.display = "inline-block";"" levelCnt.style.display = "block"; starCnt.style.display = "none"; compl.style.display = "none"; nextBtnCnt.style.display = "none"; }) levelBack.addEventListener("click",function(){ levelCnt.style.display = "none"; compl.style.display = "block"; starCnt.style.display = "block"; nextBtnCnt.style.display = "block"; }) function levelMenu(){ var txt = ""; for(var n = 0; n < levels.length; n++){ txt += ""; } _s("levelList").innerHTML = txt; } levelMenu(); for(var n = 0; n < levels.length; n++){ document.querySelector(".level:nth-child("+(n+1)+")").addEventListener("click",function(){ startLevel(parseInt(this.textContent.slice(6))-1); levelCnt.style.display = "none"; levelBack.style.display = "inline-block"; nextBtnCnt.style.display = "block"; starCnt.style.display = "block"; compl.innerHTML = 'Level Complete

'; compl.style.display = "block"; play("levelStart"); }) } function updateLevelMenu(ln,cn,st){ var stars = ""; for(var n = 0; n < st; n++){ stars += "⭐"; } var txt = ""; txt += "Level "+ln+""; txt += "💰 "+cn+"" txt += ""+stars+"" var elm = document.querySelector(".level:nth-child("+ln+")") elm.innerHTML = txt; } //updateLevelMenu(2,65,3); var coinElm = _s("coin"); function updateCoin(x){ totalCoin += x; coinElm.innerHTML = ""+totalCoin+""; } function hint(){ for(var n = 0; n < levels[currentLevel][0].length; n++){ if(temp1.indexOf(levels[currentLevel][0][n]) === -1 && totalCoin >= 20){ currentWord = levels[currentLevel][0][n]; var wordPos = levels[currentLevel][0].indexOf(currentWord); var txt = ""; var wordArr = currentWord.split(""); for(var n = 0; n < currentWord.length; n++){ txt += "

"+wordArr[n]+"

"; } wcnt[wordPos].innerHTML = txt; if(temp1.indexOf(currentWord) < 0){ temp1.push(currentWord); updateCoin(-20); //play("right"); if(temp1.length >= levels[currentLevel][0].length){ temp1 = []; temp2 = []; setTimeout(function(){ levelComplete(); // startLevel(currentLevel+1); },2000) setTimeout(function(){ var wls = document.getElementsByClassName("wld"); for(var n = 0; n < wls.length; n++){ wls[n].style.transform = "translateY("+Math.floor(100+Math.random()*200)+"px) rotate("+Math.floor(Math.random()*90-45)+"deg)"; wls[n].style.opacity = 0; lContainer.style.transform = "scale(0) rotate(0)"; levelDiv.style.transform = "translateY(-100px)"; shuffleBtn.style.transform = "translateX(-100px)"; hintBtn.style.transform = "translateX(100px)"; } },1000); } setTimeout(function(){ play("right"); },100); } break; } } } hintBtn.addEventListener("click",hint) container.style.display = "block"; }

Word Shuffle Game