在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，但这应该给你一个想法。}