2 questions: I want to disable the snake being able to go in opposite directions (so when it is moving left it cannot go right, if going up cannot go down etc.). How do I do it? Newbie here. Please, as descriptive as possible.

What are all those variables? px, py, gs, tc, ax, ay, yv

Here is the full code:

<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>

CodePudding user response：

px, py, gs, tc, ax, ay, yv are the inital x and y coordinate of snake and the first bullet and the size of the two elements

to disallow move in oposite direction, you can store the previous move inside a variable and allow to move the snake in another direction only if previous move was not the oposite one

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>

to do it i add a global variable

var previousMove;

and change the keyPush function to became the following

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;

  }