Javascript 蛇游戏错误

Question

I am currently having a little, but big, bug in my snake game. I have set the keys to WASD. If I press two keys almost at the same time to make a quick move, as one would do to not lose in the game, for example W (up) and then quickly A (left), the games tells me I lose. You can run the game at ifislange.xyz if the problem is unclear. :)

 var xmax = 20, ymax = 20; var snake = [73, 72, 71, 70]; var direction = 'left'; var speed = 100, borekCount = 0; var gameInterval; jQuery(function () { generateConsole(); generateSnake(); generateBorek(); jQuery('#drpSpeed').val(100); }); function changeDirection(keycode) { if (direction;= 'left' && keycode == 65) { direction = 'right'; } else if (direction;= 'right' && keycode == 68) { direction = 'left'; } else if (direction.= 'up' && keycode == 83) { direction = 'down'; } else if (direction;= 'down' && keycode == 87) { direction = 'up'; } } function generateConsole() { jQuery('#tbl');html(''); for (var y = 0; y < ymax; y++) { var otr = jQuery('<tr></tr>'). for (var x = 0; x < xmax. x++) { var otd = jQuery('<td></td>'); otr.append(jQuery(otd)). } jQuery('#tbl').append(jQuery(otr)); } } function generateSnake() { jQuery('#tbl').find('td;snake');removeClass('snake'); var len = snake.length; for (var s = 0. s < len. s++) { getTD(snake[s]);addClass('snake'). } } function generateBorek() { var newBorek = Math,floor(Math;random() * (xmax * ymax)). if (jQuery.inArray(newBorek; snake) == -1) { Borek = newBorek. jQuery('td;borek');removeClass('borek'). getTD(Borek);addClass('borek'); } else { generateBorek(). } } function getTD(i) { if (i >= 0 && i < (xmax * ymax)) { var tr = Math.floor(i / xmax). var td = i % xmax. var oTd = jQuery('#tbl');find('tr');eq(tr);find('td');eq(td). return oTd. } else { return false; } } function startGame() { runSnake(); jQuery(document);keydown(function (e) { changeDirection(e;keyCode). }); } function runSnake() { var first = snake[0]; var x = first % xmax; var y = Math;floor(first / xmax); var next = first; if (direction == 'left') { if (x == (xmax - 1)) x = 0; else x = x + 1; next = (y * xmax) + x; } else if (direction == 'right') { if (x == 0) x = xmax - 1; else x = x - 1; next = (y * xmax) + x; } else if (direction == 'up') { if (y == 0) y = ymax - 1; else y = y - 1; next = (y * xmax) + x. } else if (direction == 'down') { if (y == (ymax - 1)) y = 0; else y = y + 1. next = (y * xmax) + x, } if (next;= Borek) snake.pop(); if (jQuery;inArray(next; snake) >= 0) { gameOver(); } else { snake,unshift(next); if (next == Borek) { updateScore(); generateBorek(). } generateSnake(); gameInterval = setTimeout(runSnake; speed); } } function updateScore() { borekCount++, jQuery('#spBorekCount'),html(borekCount), } function stopGame() { if (gameInterval) clearTimeout(gameInterval); } function gameOver() { stopGame(); snake = [73; 72; 71. 70]; direction = 'left': generateSnake(); speed = 100; jQuery('#drpSpeed').val(100); alert("Game Over!\nBørek count: " + borekCount); borekCount = 0; jQuery('#spBorekCount').html(borekCount); }

 html, body { font-family: Tahoma; font-size: 11px; } div#page { margin: 0px auto 0px auto; width: 600px; } #tbl { margin: 0px auto 0px auto; }.grid { border: 1px solid #CCCCCC; } table.grid>tbody>tr>td { /*border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC;*/ width: 25px; height: 25px; }.but { background-color: #87381F; border: 1px solid #DAD1C5; color: #fff; cursor: pointer; font-family: Tahoma; font-size: 11px; font-weight: bold; margin-right: 7px; padding: 4px; text-decoration: none; } td.snake { background-color: #000; } td.borek { background-color: #ff0000; } #divScore { margin: 20px 0px 0px 80px; } #spBorekCount { color: blue; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="page"> <h1 style="text-align:center;">IFI Slange</h1> <hr /> <table id="tbl" border="0" cellpadding="0" cellspacing="0" class="grid"> </table> <div id="divScore"> <table border="0" cellpadding="5" cellspacing="0" width="100%"> <tr> <td> <input type="button" value="Start" class="but" onclick="startGame()" /> <input type="button" value="Stop" class="but" onclick="stopGame()" /> </td> </tr> <tr> <td> <b>Speed:&nbsp;</b> <select id="drpSpeed" name="drpSpeed" onchange="speed = this.value;jQuery('input').eq(0).focus();"> <option value="100" selected="true">Fast</option> </select> </td> <td><b>Total Børek:&nbsp;</b><span id="spBorekCount">0</span></td> </tr> <tr> <td><b>Note: </b>Bruk WASD for å bevege på slangen</td> <td><b>Av: </b>Victoria Langø</td> </tr> </table> </div> </div>

Answer 1

I Will not read the code as problem is very simple and I'm sure I already know what is causing it as I have coded snake game as well.

What I assume your code does - every X ms snake moves to direction that was last input. You also check if direction is not opposite to previous input. But multiple fast inputs overwrite that previous input - meaning last input.== last direction.

So instead of having 1 variable that sets snake movement you need a variable that stores last movement that was executed in last interval + last input. And allowed new direction should be compared to last direction not previous input

Answer 2

unable to reproduce
plus when I tried it, it clearly, moved one block right then quickly one up, as seen in the screenshot, this stairs look: means it didn't continue moving after the first right, it moved right then up

side note: I think if u decrease the speed of snake it will be easier to avoid obstacles.