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

一般来说，在计算中，图形的原点在 top 左边，与数学相反，它在 bottom左边，如下图：

因此，在计算中，如果你想将图像上移一些东西，你需要减去，因此：

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

_{实际上这些扩展到负数而不是停在 0 但这应该给你的想法。}

2D 游戏中的 keyPressed 反转 [P5.js]

keyPressed inverted in 2D game [P5.js]

javascript

p5.js