//important variables var canvas,ctx,h,w; var box = 30,fps = 4; var foodPic = new Image() ; var dir = "RIGHT" ; var music,eat,lose,scoreM; var count = false ; var endCard, result, playagain; var score, level = 0, maxScore = 2 ; var point = maxScore; var run; //change in direction on keyboard keypress document.addEventListener("keydown",direction); function direction(event) { var key = event.keyCode; if(key == 37 && dir != "RIGHT") { dir = "LEFT"; } else if(key == 38 && dir != "DOWN") { dir = "UP"; } else if(key == 39 && dir != "LEFT") { dir = "RIGHT"; }else if(key == 40&&dir!= "UP") { dir = "DOWN"; } } window.onload = function () { //canvas work canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); w = canvas.width = Math.floor(window.innerWidth/box)*box - 2*box; h = canvas.height = Math.floor(window.innerHeight/box)*box- 4*box; //to draw food getting image var img = document.getElementsByTagName("img")[3]; foodPic.src = img.src; //the score board score = document.getElementById("score"); endCard = document.getElementById("endCard"); result = document.getElementById("result"); playagain = document.getElementById("playAgain"); //design,muisc and animation music = document.getElementById("music"); eat = document.getElementById("eat"); lose = document.getElementById("lose"); scoreM = document.getElementById("scoreM"); //for swiping actions /* actual swipe capture */ canvas.addEventListener('touchstart', handleTouchStart, false); canvas.addEventListener('touchmove', handleTouchMove, false); var xDown = null, yDown = null; function getTouches(evt) { return evt.touches || evt.originalEvent.touches; } function handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; } function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { /*Response part*/ if ( xDiff>0&&dir!="RIGHT") { /* left swipe */ dir = "LEFT"; } else if ( xDiff<0&&dir!="LEFT") { /* right swipe */ dir = "RIGHT"; } } else { if ( yDiff >0&&dir!="DOWN") { /* up swipe */ dir = "UP"; } else if ( yDiff <0&&dir!="UP") { /* down swipe */ dir = "DOWN"; } } /* reset values */ xDown = null; yDown = null; } /* end */ }; //snake body var snake = [] ; snake[0] = { x:box*3 + box/2, y:box*3 + box/2, }; snake[1] = { x:box*2+ box/2, y:box*3 + box/2, }; //new head part var snakeX = snake[0].x ; var snakeY = snake[0].y ; //food location var food = { x : box*5, y : box*5, }; //function to draw everything function draw() { drawGrid(); if(count) { music.volume = 1; } //draw snake for(var i=0;i w||snakeY < 0||snakeY > h||collision(snake)){ clearInterval(run); result.innerHTML='GAME OVER'; endCard.style.transform="scale(1)"; playagain.style.animation="pop .4s linear"; playagain.innerText = 'PLAY AGAIN'; level =0; maxScore = 2 ; document.getElementById("canvas").style.filter="blur(1px)"; if(count) { //to vibrate on loss let vib = setInterval(vibr,130); function vibr() { navigator.vibrate(300); clearInterval(vib) ; } lose.volume = 1; lose.play(); music.volume = 0; } } //check for game over conditions if(point === 0 ){ clearInterval(run); result.innerHTML= 'YOU WIN'; endCard.style.transform="scale(1)"; playagain.style.animation="pop .4s linear"; playagain.innerText = 'NEXT LEVEL'; document.getElementById("canvas").style.filter="blur(1px)"; if(count) { scoreM.volume = 1; scoreM.play(); } level++; maxScore += 5; } } //function to draw grid function drawGrid() { //to clear the canvas ctx.fillStyle = "#37474F"; ctx.fillRect(0, 0, w, h); for(var i = 0;i<=h/box ;i++) { //vertical lines ctx.setLineDash([1, 0.5]); ctx.beginPath(); ctx.strokeStyle = "#efefef"; ctx.moveTo(0,box*i); ctx.lineTo(w,box*i); ctx.stroke(); ctx.closePath(); } for(var i = 0;i<=w/box ;i++) { //horizontal lines ctx.beginPath(); ctx.strokeStyle = "#efefef"; ctx.moveTo(box*i,0); ctx.lineTo(box*i,h); ctx.stroke(); } } //function to draw snake body function drawArc(x, y, color){ var r = box/2 - 4; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } //function to draw food function drawFood () { var isOkay = true ; //to check if food is not being printing on the snake for(var i=1;i

🐍Snake [ 🎮 Game ]