I am writing a snake.

You need to move 4 cells (the length of the snake) by pressing the arrow keys.

I have a condition written, but I do not know how to proceed. How can this be implemented?

Here is the code:

(function() { var rows = ''; for(var i=0;i<=15;i++) { rows += '<tr class="row" + i'; for(var j=0;j<=25;j++) { rows += '<td></td>'; } rows += '</tr>'; } document.getElementById('table').innerHTML = rows; addEventListener("keyup", function(event) { if (event.keyCode == 86) document.body.style.background = ""; }); }()); 
 #table { margin: 0 auto; } td { width: 10px; height: 10px; border: 1px solid black; } tr:nth-child(1) td:nth-child(1) { background: red; } tr:nth-child(1) td:nth-child(2) { background: red; } tr:nth-child(1) td:nth-child(3) { background: red; } tr:nth-child(1) td:nth-child(4) { background: red; } 
 <table id="table"> <tr class="row"> <td></td> </tr> </table>

  • Remove styles with a red background by indexes of elements. Isn't it obvious that you need to assign a style with a background dynamically - code in setinterval ? - Igor
  • @Igor can show on any example? - Juicy

2 answers 2

 (function() { var tbl = document.getElementById('table'); var rows = ''; for (var i = 0; i <= 15; i++) { rows += '<tr class="row" + i'; for (var j = 0; j <= 25; j++) { rows += '<td></td>'; } rows += '</tr>'; } tbl.innerHTML = rows; var i = 0; var j = 0; function markCell(i, j) { //console.log(i, j); var old = document.querySelector("td.red"); if (old) old.classList.remove("red"); tbl.rows[i].cells[j].classList.add("red"); } /*setInterval(function() { if (j >= tbl.rows[0].cells.length) { j = 0; i++; } if (i >= tbl.rows.length) { i = 0; } markCell(i, j); j++; }, 200);*/ addEventListener("keydown", function(event) { // up - 38, down - 40, left - 37, right - 39 //console.log(event.keyCode); if (event.keyCode == 38) { // up i--; if (i < 0) i = tbl.rows.length - 1; } else if (event.keyCode == 40) { // down i++; if (i >= tbl.rows.length) i = 0; } else if (event.keyCode == 37) { // left j--; if (j < 0) j = tbl.rows[0].cells.length - 1; } else if (event.keyCode == 39) { // right j++; if (j >= tbl.rows[0].cells.length) j = 0; } markCell(i, j); }); markCell(i, j); }()); 
 #table { margin: 0 auto; } td { width: 10px; height: 10px; border: 1px solid black; } td.red { background: red; } 
 <table id="table"> <tr class="row"> <td></td> </tr> </table>

  • The fact is that here it automatically goes, how to register for the arrow keys? - Juicy

That shift does not need anything. And you need a two-dimensional array, with the coordinates of your cells and the starting point (the head of a snake).

You also need an object with properties and methods, as well as a setInterval or requestAnimationFrame.

And we need an algorithm.

A snake is an object, snake cells are properties in which an object with current coordinates, current direction and an array to collect new directions (when you click on the arrow, the object is added to the end of the array, and the first element is drawn when drawing).

Drawing a snake (motion) - we loop through the snake's cells and draw according to the coordinates and current direction (this is done cyclically through a network interval, for example)

Direction tracking (snake curves) - The simplest thing is that each cell of a snake checks the previous coordinates before drawing: if we add to our current coordinates (according to the current direction - or subtract one from X or Y), will we get the coordinates of the previous one? If so then draw - our snake did not change direction. And if not, then from the array of collection of new directions (for this particular cell) we throw out the first element and thus the next direction is taken for the drawing, i.e. our cell changes direction.

It should be noted that the above is not relevant to the first cell, i.e. snake head. The head of the snake should immediately change its direction after pressing the arrow. She cannot compare her direction with the previous one, which the head does not have.

Still need to implement a check for collisions (collisions).