我想禁用能够朝相反方向移动的蛇

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

2个问题:我想禁止蛇向相反的方向移动(所以当它向左移动时不能向右移动,如果向上不能向下等)。我该怎么做?新手在这里。请尽可能描述。

这些变量是什么? pxpygstcaxayyv

完整代码如下:

<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分别是snake和第一颗子弹的初始x和y坐标以及两个元素的大小

要禁止向相反方向移动,您可以将先前的移动存储在一个变量中,并且仅当先前的移动不是相反的移动时才允许向另一个方向移动蛇

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>

为此我添加了一个全局变量

var previousMove;

并将keyPush函数改成如下

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;

  }