2 preguntas: quiero deshabilitar que la serpiente pueda ir en direcciones opuestas (para que cuando se mueva hacia la izquierda no pueda ir hacia la derecha, si sube no pueda bajar, etc.). ¿Cómo lo hago? Novato aquí. Por favor, lo más descriptivo posible.
¿Cuáles son todas esas variables? px , py , gs , tc , ax , ay , yv
Aquí está el código completo:
<canvas id="gc" width="400" height ="400"></canvas> <script> window.onload=function(){ canv=document.getElementById("gc"); ctx=canv.getContext("2d"); document.addEventListener("keydown", keyPush); setInterval(game,1250/15); } px=py=10 gs=tc=20; ax=ay=15; xv=yv=0; trail=[]; tail=5; function game(){ px+=xv; py+=yv; if(px<0) { px = tc-1; } if (px>tc-1){ px = 0; } if (py<0) { py=tc-1; } if (py>tc-1) { py=0; } ctx.fillStyle="black"; ctx.fillRect(0,0,canv.width,canv.height); ctx.fillStyle="lime"; for(var i =0; i<trail.length; i++) { ctx.fillRect(trail[i].x*gs, trail[i].y*gs, gs-2, gs-2); if (trail[i].x==px && trail[i].y ==py) { tail =5; } } trail.push({x:px,y:py}); while(trail.length>tail){ trail.shift(); } if (ax==px && ay ==py) { tail++; ax=Math.floor(Math.random()*tc); ay=Math.floor(Math.random()*tc); } ctx.fillStyle="red"; ctx.fillRect(ax*gs, ay*gs, gs-2, gs-2); } function keyPush(evt){ switch(evt.keyCode){ case 37: xv=-1;yv=0; break; case 38: xv=0;yv=-1; break; case 39: xv=1;yv=0; break; case 40: xv=0;yv=1; break; } } </script>px, py, gs, tc, ax, ay, yv son las coordenadas x e y iniciales de la serpiente y la primera viñeta y el tamaño de los dos elementos
para no permitir el movimiento en dirección opuesta, puede almacenar el movimiento anterior dentro de una variable y permitir mover la serpiente en otra dirección solo si el movimiento anterior no fue el opuesto
window.onload = function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown", keyPush); setInterval(game, 1250 / 15); } var previousMove; px = py = 10 gs = tc = 20; ax = ay = 15; xv = yv = 0; trail = []; tail = 5; function game() { px += xv; py += yv; if (px < 0) { px = tc - 1; } if (px > tc - 1) { px = 0; } if (py < 0) { py = tc - 1; } if (py > tc - 1) { py = 0; } ctx.fillStyle = "black"; ctx.fillRect(0, 0, canv.width, canv.height); ctx.fillStyle = "lime"; for (var i = 0; i < trail.length; i++) { ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2); if (trail[i].x == px && trail[i].y == py) { tail = 5; } } trail.push({ x: px, y: py }); while (trail.length > tail) { trail.shift(); } if (ax == px && ay == py) { tail++; ax = Math.floor(Math.random() * tc); ay = Math.floor(Math.random() * tc); } ctx.fillStyle = "red"; ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2); } function keyPush(evt) { switch (evt.keyCode) { case 37: if (previousMove !== 39) { xv = -1; yv = 0; previousMove = 37; } break; case 38: if (previousMove !== 40) { xv = 0; yv = -1; previousMove = 38; } break; case 39: if (previousMove !== 37) { xv = 1; yv = 0; previousMove = 39; } break; case 40: if (previousMove !== 38) { xv = 0; yv = 1; previousMove = 40; } break; } } <canvas id="gc" width="400" height="400"></canvas>para hacerlo agrego una variable global
var previousMove;y cambie la función keyPush para convertirse en la siguiente
function keyPush(evt) { switch (evt.keyCode) { case 37: if (previousMove !== 39) { xv = -1; yv = 0; previousMove = 37; } break; case 38: if (previousMove !== 40) { xv = 0; yv = -1; previousMove = 38; } break; case 39: if (previousMove !== 37) { xv = 1; yv = 0; previousMove = 39; } break; case 40: if (previousMove !== 38) { xv = 0; yv = 1; previousMove = 40; } break; }