var js, c, ctx, w, h, sc, sn, a, r, d, s, go, lv, sb, ft, fps, fpsd, fi, delT, ct, ads; window.onload = ()=>{ GTB.autoInit(); gtbA("Just touch the stick to start. Eat as many apples as you can!

The joystick changes the angle at which the snake travels. Swipe left or right to stear the snake. Pro Tip: Don't keep the joystick pressed down the entire time. Just swipe when you need to turn :)

Leave an upvote, comment and enjoy!"); //Joystick options var opts = { width: "80px", height: "80px", left: "auto", right: "30px", bottom: "20px", top: "auto", limitX: 1, limitY: 1, cbStart: start } //joystick object js = new Joystick(opts); //initializing canvas and context c = document.getElementById("main"); ctx = c.getContext("2d"); w = c.width = 0.95*window.innerWidth; h = c.height = w; ctx.strokeStyle = "#00bfff"; ctx.lineWidth = 5; ctx.lineCap = "round"; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 4; ctx.shadowColor = "rgba(0,0,0,0.1)"; sb = document.getElementById("scoreBoard"); fpsd = document.getElementById("fps"); go = true; } function start(){ if(go){ init(); clearInterval(ct); ct = setInterval(()=>{ fpsd.innerHTML = fps + " fps"; },500); loop(); } } function init(){ //game variables sc = 0; ft = false; sb.innerHTML = sc; s = 1; lv = 0; fps = 60; delT = false; go = false; sn = []; r = 3*Math.PI/2; d = {x: s*Math.cos(r), y: s*Math.sin(r)} a = new Apple(); } function makeInitWorm(len){ var temp = []; for(var i = 0; i< len;i++){ temp.push([w/2, h/2+(i*s)]); } return temp; } function draw(){ ctx.save(); ctx.clearRect(0,0,w,h); ctx.beginPath(); for(var i = 0; i< sn.length; i++){ if(i == 0){ ctx.moveTo(sn[i][0],sn[i][1]); }else{ ctx.lineTo(sn[i][0],sn[i][1]); } if(i >= 10 && Math.sqrt((sn[i][0]-sn[0][0])*(sn[i][0]-sn[0][0]) + (sn[i][1]-sn[0][1])*(sn[i][1]-sn[0][1])) <= 5){ gtbA("Oops, you doubled back on yourself and died!

Your score is "+sc+"!

Try again!"); go = true; } } ctx.stroke(); ctx.restore(); ctx.fillStyle = "#00bfff"; ctx.beginPath(); ctx.arc(sn[0][0], sn[0][1],5,0,2*Math.PI); ctx.fill(); var angle = r; angle += Math.PI/3; var xCoord = 4*Math.cos(angle); var yCoord = 4*Math.sin(angle); ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(sn[0][0]+xCoord, sn[0][1]+yCoord,2.5,0,2*Math.PI); ctx.fill(); xCoord = 4.75*Math.cos(angle); yCoord = 4.75*Math.sin(angle); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(sn[0][0]+xCoord, sn[0][1]+yCoord,1.5,0,2*Math.PI); ctx.fill(); angle -= Math.PI/1.5; xCoord = 4*Math.cos(angle); yCoord = 4*Math.sin(angle); ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(sn[0][0]+xCoord, sn[0][1]+yCoord,2.5,0,2*Math.PI); ctx.fill(); xCoord = 4.75*Math.cos(angle); yCoord = 4.75*Math.sin(angle); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(sn[0][0]+xCoord, sn[0][1]+yCoord,1.5,0,2*Math.PI); ctx.fill(); a.draw(); } function checkCollisions(){ if(Math.sqrt((a.x-sn[0][0])*(a.x-sn[0][0]) + (a.y-sn[0][1])*(a.y-sn[0][1])) <= (a.r+5)){ sc += a.v; sb.innerHTML = sc; lv += Math.round(fps/60*a.v); a.move(); (s<2.25)?s += 0.1:s=s; } if(sn[0][0] <= 5 || sn[0][0] >= w-5){ gtbA("Oops, you went out of bounds and died!

Your score is "+sc+"!

Try again!"); go = true; } if(sn[0][1] <= 5 || sn[0][1] >= h-5){ gtbA("Oops, you went out of bounds and died!

Your score is "+sc+"!

Try again!"); go = true; } } function loop(now){ ads = s; if(ft && now){ delT = now-ft; fps = Math.round(1000/delT); ads = s*(delT/(1000/60)); ft = now; } if(!ft && now){ ft = now; }; if(delT && sn.length == 0){ sn = makeInitWorm(10); } if(sn.length > 1){ r += s*0.05*js.x; d = {x: s*Math.cos(r), y: s*Math.sin(r)}; sn.unshift([sn[0][0]+d.x, sn[0][1]+d.y]); (lv == 0)?sn.pop():lv--; checkCollisions(); draw(); } if(!go){ window.requestAnimationFrame(loop); }else{ clearInterval(ct); } } var Apple = function(){ this.x = Math.random()*(w-40)+20; this.y = Math.random()*(h-40)+20; this.r = Math.random()*15+5; this.v = Math.round(this.r); this.color = "red"; this.draw = ()=>{ ctx.save(); ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); ctx.fill(); ctx.restore(); } this.move = ()=>{ this.x = Math.random()*(w-40)+20; this.y = Math.random()*(h-40)+20; this.r = Math.random()*15+5; this.v = Math.round(this.r); } } /*++++++++++++++++++++++ + Joystick constructor + ++++++++++++++++++++++*/ var Joystick = function(opts){ opts = opts || {}; this.x = 0; this.y = 0; this.isPressed = false; var elem = document.createElement("div"); elem.style.position = "fixed"; elem.style.margin = "auto"; elem.style.background = "rgba(0,0,0,0.1)"; elem.style.boxShadow = "2px 3px 5px rgba(0,0,0,0.25)"; elem.style.borderRadius = "5px"; elem.style.zIndex = "100"; elem.style.width = opts.width || "100px"; elem.style.height = opts.height || "100px"; elem.style.top = opts.top || "auto"; elem.style.bottom = opts.bottom || "10px"; elem.style.left = opts.left || "0"; elem.style.right = opts.right || "0"; document.body.appendChild(elem); var rect = elem.getBoundingClientRect(); var stick = document.createElement("div"); if(rect.width <= rect.height){ stick.style.width = Math.round(0.8*rect.width)+"px"; stick.style.height = Math.round(0.8*rect.width)+"px"; }else{ stick.style.width = Math.round(0.8*rect.height)+"px"; stick.style.height = Math.round(0.8*rect.height)+"px"; } stick.style.borderRadius = "50%"; stick.style.background = "rgba(0,0,0,0.5)"; stick.style.boxShadow = "2px 3px 5px rgba(0,0,0,0.45), inset 5px 5px 15px lightgray, inset -5px -5px 15px rgba(0,0,0,0.75)"; stick.style.margin = "auto" stick.style.position = "fixed"; stick.style.top = Math.round(rect.top+(0.1*rect.height))+"px"; stick.style.bottom = "auto"; stick.style.left = Math.round(rect.left+(0.1*rect.width))+"px"; stick.style.right = "auto"; stick.style.zIndex = "12"; elem.appendChild(stick); var srect = stick.getBoundingClientRect(); elem.addEventListener("touchstart",(e)=>{ e.preventDefault(); stick.style.top = Math.round(e.targetTouches[0].clientY-(srect.height/2))+"px"; stick.style.left = Math.round(e.targetTouches[0].clientX-(srect.width/2))+"px"; var tempX = (e.targetTouches[0].clientX-rect.left-(rect.width/2))/(rect.width/2); var tempY = (e.targetTouches[0].clientY-rect.top-(rect.height/2))/(rect.height/2); this.x = (opts.limitX && Math.abs(tempX) > opts.limitX)?Math.sign(tempX)*opts.limitX : tempX; this.y = (opts.limitY && Math.abs(tempY) > opts.limitY)?Math.sign(tempY)*opts.limitY : tempY; this.isPressed = true; if(opts.cbStart){opts.cbStart();} },false); elem.addEventListener("touchmove",(e)=>{ e.preventDefault(); stick.style.top = Math.round(e.targetTouches[0].clientY-(srect.height/2))+"px"; stick.style.left = Math.round(e.targetTouches[0].clientX-(srect.width/2))+"px"; var tempX = (e.targetTouches[0].clientX-rect.left-(rect.width/2))/(rect.width/2); var tempY = (e.targetTouches[0].clientY-rect.top-(rect.height/2))/(rect.height/2); this.x = (opts.limitX && Math.abs(tempX) > opts.limitX)?Math.sign(tempX)*opts.limitX : tempX; this.y = (opts.limitY && Math.abs(tempY) > opts.limitY)?Math.sign(tempY)*opts.limitY : tempY; if(opts.cbMove){opts.cbMove();} },false); elem.addEventListener("touchend",(e)=>{ e.preventDefault(); stick.style.top = Math.round(rect.top+(0.1*rect.height))+"px"; stick.style.left = Math.round(rect.left+(0.1*rect.width))+"px"; this.isPressed = false; this.x = 0; this.y = 0; if(opts.cbEnd){opts.cbEnd();} },false); } /*++++++++++++++++++++++ + End constructor + ++++++++++++++++++++++*/

Snakestick Game