为什么当我释放键时我的函数返回值？答案

【问题标题】：Why my function return value when I release the key?为什么当我释放键时我的函数返回值？
【发布时间】：2020-06-04 11:07:06
【问题描述】：

我知道这可能是一个愚蠢的问题，但我无法弄清楚我在 p5.js 中的代码发生了什么（我使用在线编辑器）。

我正在制作一个简单的蛇游戏，但是当我调用该函数来添加某个值来移动头部（现在只是头部）时，它会返回我想要的值，但是当我释放键时它会再次执行我也这样称呼：

function keyReleased(){
    return false;
  }

这些是我在草图文件中调用的函数。

let w = 87;
let a = 65;
let s = 83;
let d = 68;
let stepToDo = 10;

function keyPressed(axis){
  if (axis === 0){
    if(keyCode === a){
      keyCode = 0;
      return -stepToDo;
    } else if(keyCode === d){
      keyCode = 0;
      return stepToDo;
    } else {
      return 0;
    }
  } else if (axis === 1) {
    if(keyCode === w){
      keyCode = 0;
      return -stepToDo;
    } else if(keyCode === s){
      keyCode = 0;
      return stepToDo;
    } else {
      return 0;
    }
  }
}

function keyReleased(){
    return false;
  }

这是草图文件。

let arrTest = [200, 200];


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  arrTest[0] = arrTest[0] + keyPressed(0);
  arrTest[1] = arrTest[1] + keyPressed(1);
  keyReleased();
  //console.log(arrTest);

  rect (arrTest[0], arrTest[1], 10, 10);
}

链接到草图本身https://editor.p5js.org/antolab/sketches/_Lzz41cos

【问题讨论】：

那么，为什么不围绕 keyRealeased() 构建代码呢？

标签： javascript function scope key p5.js

【解决方案1】：

keyPressed() 函数是一个event listener。您不必从主 draw() 循环中调用它；相反，每次按下键时都会自动调用它。这样你就可以根据输入键使用它来改变你的位置数组。例如如下：

function keyPressed() {
  if (keyCode === a) {
    arrTest[0] = arrTest[0] - stepToDo;
  } else if (keyCode === d) {
    arrTest[0] = arrTest[0] + stepToDo;
  } else if (keyCode === w) {
    arrTest[1] = arrTest[1] - stepToDo;
  } else if (keyCode === s) {
    arrTest[1] = arrTest[1] + stepToDo;
  }
}

请注意，因为我们没有在keyPressed() 函数中定义新的arrTest 变量，所以它将自动访问您在上面进一步定义的变量。 Here是对应的修改草图。

keyPressed() 函数在您的代码中看似“两次”执行的原因是它作为draw() 循环的每个迭代的一部分执行和 strong> 按键时自动执行。

【讨论】：