var canvas,canvasBg; var audioCtx; var ctx; var dir; var posx; var posy; var unit; var buffx=[]; var buffy=[]; var i; var play,restart,isMobile; var length; var intervalId; var foodx,foody; var liveScore,highScore; var endScore,endHighScore; var score,maxScore; var overlay1,overlay2,info,control,controlImg; var nH,nW;//no.of units that can fit in canvas height & width window.onload=start; function start(){ initializer(); if(!restart)eventSetter(); updateScore(); if(!restart)startOverlay(); else ctx.clearRect(0,0,canvas.width,canvas.height); generateFood(); intervalId=setInterval(main,150); } function main(){ if(!play) return; //clears tail ctx.clearRect(buffx[i],buffy[i],unit,unit); //clears head ctx.clearRect(posx,posy,unit,unit); //draws new tail ctx.fillStyle="green"; ctx.fillRect(posx+4,posy+4,unit-8,unit-8); buffx[i]=posx; buffy[i]=posy; switch(dir){ case 1: posy-=unit; break; case 2: posx-=unit; break; case 3: posy+=unit; break; case 4: posx+=unit; break; } play=false; checkFoodCapture(); if(checkCollision()){ playSound("crash"); ctx.fillStyle="brown"; ctx.fillRect((buffx[i]+posx)/2,(buffy[i]+posy)/2,unit-2,unit-2); gameOver(); return; } else play=true; //draws head ctx.fillStyle="brown"; ctx.fillRect(posx+1,posy+1,unit-2,unit-2); i=++i%length; } function initializer(){ if(typeof canvas=="undefined"){ canvas=document.getElementById("canvas"); canvasBg=document.getElementById("canvasBg"); fixDpi(); ctx=canvas.getContext("2d"); nW=20; unit=Math.floor(canvas.width/nW); nH=Math.floor(canvas.height/unit); //making canvas dimension multiple of unit canvas.width=unit*nW; canvas.height=unit*nH; canvasBg.width=canvas.width; canvasBg.height=canvas.height; drawCanvasBg(); liveScore=document.getElementById("liveScore"); highScore=document.getElementById("highScore"); overlay=document.getElementById("startOverlay"); overlay2=document.getElementById("endOverlay"); endScore=document.getElementById("endScore"); endHighScore=document.getElementById("endHighScore") control=document.getElementById("control"); controlImg=document.getElementById("controlImg"); if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ isMobile=true; } window.AudioContext=window.AudioContext||window.webkitAudioContext; audioCtx=new AudioContext(); restart=0; maxScore=0; } posx=4*unit,posy=4*unit; buffx=[]; buffy=[]; length=4,dir=4,i=0,score=0,play=true; } function eventSetter(){ if(isMobile){ control.innerHTML="Mobile detected
Touch controls activated"; controlImg.src="https://thumbs.gfycat.com/AggravatingEvilKestrel-size_restricted.gif"; canvas.addEventListener("swiped-up",()=>{if(dir!=3&&dir!=1){ dir=1;playSound("dirChange1"); }}); canvas.addEventListener("swiped-left",()=>{if(dir!=4&&dir!=2){ dir=2;playSound("dirChange2"); }}); canvas.addEventListener("swiped-down",()=>{if(dir!=1&&dir!=3){ dir=3;playSound("dirChange3"); }}); canvas.addEventListener("swiped-right",()=>{if(dir!=2&&dir!=4){ dir=4;playSound("dirChange4"); }}); overlay.addEventListener("click",()=>{ overlay.style.display="none"; play=true; }); overlay2.addEventListener("click",()=>{ overlay2.style.display="none"; restart=1; start(); }); }else{ control.innerHTML="PC detected
Keyboard controls activated"; controlImg.src="https://images.vexels.com/media/users/3/153199/isolated/preview/c0facb164c02a5815d7efea4eb898a98-keyboard-arrow-keys-stroke-icon-by-vexels.png"; window.addEventListener("keydown",(e)=>{ e=e||window.event; switch(e.key){ case "ArrowUp": if(dir!=3&&dir!=1){ dir=1;playSound("dirChange1"); } break; case "ArrowLeft": if(dir!=4&&dir!=2){ dir=2;playSound("dirChange2"); } break; case "ArrowDown": if(dir!=1&&dir!=3){ dir=3;playSound("dirChange3"); } break; case "ArrowRight": if(dir!=2&&dir!=4){ dir=4;playSound("dirChange4"); } break; } }); overlay.addEventListener("keydown",(e)=>{ if(e.key!="Enter")return; overlay.style.display="none"; play=true; overlay.blur(); }); overlay2.addEventListener("keydown",(e)=>{ if(e.key!="Enter")return; overlay2.style.display="none"; restart=1; start(); overlay2.blur(); }); } } function checkCollision(){ for(let k=0;kcanvas.width)||(posy>canvas.height)) return true; } if(dir==3||dir==4){ if(posx==canvas.width||posy==canvas.height) return true; } return false; } function gameOver(){ clearInterval(intervalId); setTimeout(endOverlay,500); } function checkFoodCapture(){ if(posx==foodx && posy==foody){ playSound("eat"); length++; score++; updateScore(); generateFood(); } } function generateFood(){ var valid; do{ valid=true; foodx=Math.floor(Math.random()*nW)*unit; foody=Math.floor(Math.random()*nH)*unit; for(let k=0;k=maxScore){ maxScore=score; highScore.innerHTML="🏆"+maxScore; } } function drawCanvasBg(){ let bgCtx=canvasBg.getContext("2d"); bgCtx.fillStyle="#A2D149"; for(let i=0;i

Snake Game 🐍(Beta)