I want to disable the snake being able to go in opposite directions

user_4313255 0
Viewed 50

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>
game-development html javascript
1 Answers

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;

  }
user_30547220
Related