// Created by Sameer Crestha var canvas,canvasBg; var audioCtx; var ctx; var dir; var posx; var posy; var unit,cu;//1unit=100cu var buffx=[]; var buffy=[]; var i; var play,restart,isMobile; var length; var foodIndex,food=[],speedIndex,speedIcon=[],delay; var intervalId; var fact=[],factSpan; var foodx,foody; var liveScore,highScore; var endScore,endHighScore; var score,maxScore; var overlay,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(); startOverlay(); }else{ ctx.clearRect(0,0,canvas.width,canvas.height); factIndex=Math.round(Math.random()*(fact.length-1)); } updateScore(); generateFood(); intervalId=setInterval(main,delay); } 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+10*cu,posy+10*cu,unit-20*cu,unit-20*cu); 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()){ gameOver(); playSound("crash"); ctx.fillStyle="brown"; ctx.fillRect((buffx[i]+posx)/2,(buffy[i]+posy)/2,unit,unit); return; } else play=true; //draws head ctx.fillStyle="brown"; ctx.fillRect(posx+cu,posy+cu,unit-2*cu,unit-2*cu); i=++i%length; } function initializer(){ if(typeof canvas=="undefined"){ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ isMobile=true; } canvas=document.getElementById("canvas"); canvasBg=document.getElementById("canvas-bg"); fixDpi(); ctx=canvas.getContext("2d"); nW=18; unit=Math.floor(canvas.width/nW); cu=0.01*unit; 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("info-live-score"); highScore=document.getElementById("info-high-score"); if(isMobile){ overlay=document.getElementById("mobileoverlay-start"); overlay2=document.getElementById("mobileoverlay-end"); endScore=document.getElementById("mo-e-live-score"); endHighScore=document.getElementById("mo-e-high-score"); factSpan=document.getElementById("mo-e-fact"); }else{ overlay=document.getElementById("pcoverlay-start"); overlay2=document.getElementById("pcoverlay-end"); endScore=document.getElementById("pco-e-live-score"); endHighScore=document.getElementById("pco-e-high-score"); factSpan=document.getElementById("pco-e-fact"); } overlay.tabindex=-1; canvas.tabindex=-1; overlay2.tabindex=-1; window.AudioContext=window.AudioContext||window.webkitAudioContext; audioCtx=new AudioContext(); restart=0; maxScore=0; fact=[ "You can change food and speed from gameover screen by tapping on the food and trophie.", "This is the first web game of the creator.", "This game was actually supposed to be a little practice with js but you know someone got some real practice.", "Snakes can explode after eating too much.", "The game has theme very similar to google's snake game." ]; factIndex=0; food=["🍎","🍇","🍒","🍔","🍕","🌮","🐁"]; foodIndex=0; speedIcon=["🏆","🐇","✈","🐢"]; speedIndex=0; delay=150; } posx=4*unit,posy=4*unit; buffx=[]; buffy=[]; length=4,dir=4,i=0,score=0,play=true; } function eventSetter(){ if(isMobile){ 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{ 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(); canvas.focus(); }); overlay2.addEventListener("keydown",(e)=>{ if(e.key!="Enter")return; overlay2.style.display="none"; restart=1; overlay2.blur(); canvas.focus(); start(); }); } endScore.addEventListener("click",()=>{ event.stopPropagation(); foodChange(); }); endHighScore.addEventListener("click",()=>{ event.stopPropagation(); speedChange(); }); } 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); endOverlay(); } 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${food[foodIndex]}`+score; highScore.innerHTML=`${speedIcon[speedIndex]}`+maxScore; if(score>maxScore){ maxScore=score; updateScore(); } } function foodChange(){ foodIndex=++foodIndex%food.length; updateScore(); endOverlay(); } function speedChange(){ speedIndex=++speedIndex%speedIcon.length; switch(speedIndex){ default: case 0: delay=150; break; case 1: delay=100; break; case 2: delay=60; break; case 3: delay=200; break; } updateScore(); endOverlay(); } function drawCanvasBg(){ let bgCtx=canvasBg.getContext("2d"); bgCtx.fillStyle="#A2D149"; for(let i=0;i${food[foodIndex]}`+score; endHighScore.innerHTML=`${speedIcon[speedIndex]}`+maxScore; if(!isMobile){ overlay2.focus(); canvas.blur(); } } function fixDpi(){ let dpi=window.devicePixelRatio; let style_height = +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2); let style_width = +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2); canvas.setAttribute('height', style_height * dpi); canvas.setAttribute('width', (style_width * dpi)); }

snack game