javascript - Snake dies when it collides with its head -
i have bug in snake game: snake has die when collides body, dies when "collides" head.
this happens when press "arrow-left & arrow-down" @ same time (while snake goes up) or "arrow-down & arrow-left" (while snake goes right). how solve bug?
here full code:
<!doctype html> <html> <head> <title>snake</title> <link rel="stylesheet" href="snakegamestyle.css"> </head> <body> <canvas id="canvas" width="1200" height="800"></canvas> <div id="start"><p id="txt">use arrows control snake. press "p" button pause</p> <button id="easy" onclick="easydisappear()">easy</button> <button id="medium" onclick="mediumdisappear()">medium</button> <button id="hard" onclick="harddisappear()">hard</button> <button id="insane" onclick="insanedisappear()">insane</button> <button id="play" onclick="playagain()">play</button> <button id="ok" onclick="okay()">okay</button> <button id="change" onclick="chngdifflvl()">change difficulty level</button> <input id="speed" type="text"></input></div> <button id="resume">resume</button> <p id="diff"></p> <p id="paused">pause</p> <input id="dir" type="text"> </body> <script src="snakevar.js"></script> <script src="gamedraw.js"></script> <script src="snakecontrolsett.js"></script> </html> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var snakesize = 20; var w = 1200; var h = 800; var score = 1; var snake; var food; var direction; var directionvalue = document.getelementbyid('dir').value; var easy = document.getelementbyid('easy'); var medium = document.getelementbyid('medium'); var hard = document.getelementbyid('hard'); var insane = document.getelementbyid('insane'); var speed = document.getelementbyid('speed'); var change = document.getelementbyid('change'); var diff = document.getelementbyid('diff'); var paused = document.getelementbyid('paused'); var play = document.getelementbyid('play'); var ok = document.getelementbyid('ok'); var resume = document.getelementbyid('resume'); resume.style.display = "none"; paused.style.display = "none"; function easydisappear() { direction = "none"; easy.style.display = "none"; medium.style.display = "none"; hard.style.display = "none"; insane.style.display = "none"; play.style.display = "none"; diff.style.display = "block"; document.getelementbyid('txt').innerhtml = " "; document.getelementbyid('diff').innerhtml = "easy"; score = 1; console.log("new game"); speed.value = 45; } function mediumdisappear() { direction = "none"; easy.style.display = "none"; medium.style.display = "none"; hard.style.display = "none"; insane.style.display = "none"; play.style.display = "none"; diff.style.display = "block"; document.getelementbyid('txt').innerhtml = " "; document.getelementbyid('diff').innerhtml = "medium"; score = 1; console.log("new game"); speed.value = 35; } function harddisappear() { direction = "none"; easy.style.display = "none"; medium.style.display = "none"; hard.style.display = "none"; insane.style.display = "none"; play.style.display = "none"; diff.style.display = "block"; document.getelementbyid('txt').innerhtml = " "; document.getelementbyid('diff').innerhtml = "hard"; score = 1; console.log("new game"); speed.value = 30; } function insanedisappear() { direction = "none"; easy.style.display = "none"; medium.style.display = "none"; hard.style.display = "none"; insane.style.display = "none"; play.style.display = "none"; diff.style.display = "block"; document.getelementbyid('txt').innerhtml = " "; document.getelementbyid('diff').innerhtml = "insane"; score = 1; console.log("new game"); speed.value = 20; } function playagain() { direction = "none"; play.style.display = "none"; easy.style.display = "none"; medium.style.display = "none"; hard.style.display = "none"; change.style.display = "none"; document.getelementbyid('txt').innerhtml = " "; score = 1; console.log("new game"); } function okay() { play.style.display = "block"; easy.style.display = "block"; medium.style.display = "block"; hard.style.display = "block"; insane.style.display = "block"; play.style.display = "none" ok.style.display = "none"; document.getelementbyid('txt').innerhtml = "choose difficulty level"; } function chngdifflvl() { easy.style.display = "block"; medium.style.display = "block"; hard.style.display = "block"; insane.style.display = "block"; play.style.display = "none"; change.style.display = "none"; document.getelementbyid('txt').innerhtml = "choose difficulty level"; } var gamedraw = (function () { var bodysnake = function(x, y, color, color2, width, a, b) { ctx.fillstyle = color; ctx.fillrect(x*snakesize, y*snakesize, a, b); ctx.strokestyle = color2; ctx.linewidth = width; ctx.strokerect(x*snakesize, y*snakesize, snakesize, snakesize); }; var drawsnake = function(x, y) { var length = 1; snake = []; (var = length; > 0; i--) { snake.push({x: x, y: y}); } }; var foodbody = function(x, y) { ctx.fillstyle = 'yellow'; ctx.fillrect(x*snakesize, y*snakesize, snakesize, snakesize); ctx.stokestyle = "black"; ctx.linewidth = 2; ctx.strokerect(x*snakesize, y*snakesize, snakesize, snakesize); }; var scoretext = function() { ctx.font = "italic 20px arial"; ctx.fillstyle = "black"; ctx.filltext("length: " + score, 30, 42); }; var paint = function() { ctx.fillstyle = "white"; ctx.fillrect(0, 0, 1200, 800); ctx.fillstyle = "#2483b2"; ctx.fillrect(580, 0, 20, 300); ctx.fillstyle = "#2483b2"; ctx.fillrect(580, 500, 20, 300); ctx.linewidth = 40; ctx.strokestyle = "#2483b2"; ctx.strokerect(0, 0, w, h); var snakex = snake[0].x; var snakey = snake[0].y; if (direction == 'right') { snakex++; } else if (direction == 'left') { snakex--; } else if (direction == 'up') { snakey--; } else if(direction == 'down') { snakey++; } for(var j = 0; j < snake.length; j++) { bodysnake(snake[j].x, snake[j].y, "lime", "black", 2, snakesize, snakesize); } if (snakex < 1 || snakey < 1 || snakex == w/snakesize-1 || snakey == h/snakesize-1 || snakex == 29 && snakey == 1 || snakex == 29 && snakey == 2 || snakex == 29 && snakey == 3 || snakex == 29 && snakey == 4 || snakex == 29 && snakey == 5 || snakex == 29 && snakey == 6 || snakex == 29 && snakey == 7 || snakex == 29 && snakey == 8 || snakex == 29 && snakey == 9 || snakex == 29 && snakey == 10 || snakex == 29 && snakey == 11 || snakex == 29 && snakey == 12 || snakex == 29 && snakey == 13 || snakex == 29 && snakey == 14 || snakex == 29 && snakey == 25 || snakex == 29 && snakey == 26 || snakex == 29 && snakey == 27 || snakex == 29 && snakey == 28 || snakex == 29 && snakey == 29 || snakex == 29 && snakey == 30 || snakex == 29 && snakey == 31 || snakex == 29 && snakey == 32 || snakex == 29 && snakey == 33 || snakex == 29 && snakey == 34 || snakex == 29 && snakey == 35 || snakex == 29 && snakey == 36 || snakex == 29 && snakey == 37 || snakex == 29 && snakey == 38 || checkcollision(snakex, snakey, snake)) { play.style.display = "block"; change.style.display = "block"; direction = "none"; document.getelementbyid('txt').innerhtml = "you died! play again?"; document.getelementbyid('txt').style.color = "black"; var tail = {x: snakex, y: snakey}; snake.unshift(tail); bodysnake(snake[0].x, snake[0].y, "red", "black", 2, 20, 20); gameloop = clearinterval(gameloop); } if(snakex == food.x && snakey == food.y) { var tail = {x: snakex, y: snakey}; score ++; createfood(); } else { tail = snake.pop(); tail.x = snakex; tail.y = snakey; } snake.unshift(tail); foodbody(food.x, food.y); scoretext(); }; var createfood = function() { food = { x: math.floor(math.random() * 57 + 1), y: math.floor(math.random() * 37 + 1) }; if (food.x === 29) { food.x = math.floor(math.random() * 25 + 1); food.y = math.floor(math.random() * 37 + 1); } (var i=0; < snake.length; i++) { var snakex = snake[i].x; var snakey = snake[i].y; if (food.x === snakex || food.y === snakey) { food.x = math.floor(math.random() * 25 + 1); food.y = math.floor(math.random() * 37 + 1); } } }; var checkcollision = function(x, y, array) { for(var = 0; < array.length; i++) { if(array[i].x === x && array[i].y === y && direction !== "none" && direction !== "no") return true; } return false; }; var init = function(x){ drawsnake(5, 5); direction = "no"; createfood(); gameloop = setinterval(paint, x); }; return { init : init }; })(); (function () { easy.addeventlistener("click", function() { gamedraw.init(50); }); medium.addeventlistener("click", function() { gamedraw.init(35); }); hard.addeventlistener("click", function() { gamedraw.init(30); }); insane.addeventlistener("click", function() { gamedraw.init(20); }); play.addeventlistener("click", function() { gamedraw.init(speed.value); }); resume.addeventlistener("click", function() { if (direction = "none") { direction = directionvalue; paused.style.display = "none"; resume.style.display = "none"; } } ); document.onkeydown = function(event) { keycode = event.keycode; switch(keycode) { case 37: if (direction != 'right' && direction != "none") { direction = "left"; directionvalue = direction; } break; case 39: if (direction != 'left' && direction != "none") { direction = 'right'; directionvalue = direction; } break; case 38: if (direction != 'down' && direction != "none") { direction = 'up'; directionvalue = direction; } break; case 40: if (direction != 'up' && direction != "none") { direction = 'down'; directionvalue = direction; } break; case 80: direction = "none"; paused.style.display = "block"; resume.style.display = "block"; break; case 67: if (direction = "none") { direction = directionvalue; paused.style.display = "none"; } break; } console.log(direction); } })();
wiki
Comments
Post a Comment