javascript - 2D 游戏中的 keyPressed 倒置 [P5.js]

Question

我正在学习p5 js并尝试制作一个简单的2d蛇游戏，但是当我按键盘上的向上箭头时，矩形(蛇仍然不存在)向下移动，当我按向下箭头时，它移动向上

function keyPressed() {

if (keyCode ===  UP_ARROW ) {
    s.dir(0,1);
}
else if (keyCode === DOWN_ARROW) {
    s.dir(0,-1);
}
else if (keyCode === RIGHT_ARROW) {

    s.dir(1,0);
}
else if (keyCode === LEFT_ARROW) {
    s.dir(-1,0);
}
}


function Snake() {

   this.x = 0;
   this.y = 0;

   this.xspeed=1;
   this.yspeed=0;

   this.dir= function(x,y) {
      this.xspeed=x;
      this.yspeed=y;
   }

   this.update= function() {
      this.x += this.xspeed;
      this.y += this.yspeed;
   }
}

这样就可以正常工作了...

if (keyCode ===  UP_ARROW ) {
    s.dir(0,-1);
}
else if (keyCode === DOWN_ARROW) {
    s.dir(0,1);
}

我不明白为什么要向上移动矩形，我必须用负值修改 y 速度..有什么帮助吗？

Answer 1

一般来说，在计算中，图形的起源位于左上，而数学则相反，它位于左下，如图所示如下图:

因此，在计算中，如果你想在图像上移动某些东西，你需要进行减法，因此:

if (keyCode ===  UP_ARROW ) { s.dir(0,-1); }
else if (keyCode === DOWN_ARROW) { s.dir(0,1); }

_{实际上，这些会扩展到负数，而不是停在 0 处，但这应该会给您一个想法。}