Question

我正在使用P5在JS中制作游戏，我遇到了一个问题。

在我的html文件中，我引用了.js文件：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
  <script src="main.js"></script>
  <script src="isKeyPressed.js"></script>
  <script src="blocks.js"></script>
  <script src="player.js"></script>
</head>
<body>
</body>
</html>

我有一个.js文件定义了函数isKeyPressed（）：

function isKeyPressed(keyQuery) {
  var did = false;
  for(var i = 0; i < keysPressed; i++) {
    if(keysPressed[i] === keyQuery) {
      did = true;
    }
  }
  return did;
}

我在player.js中的另一个对象中引用它：

player.motion = function() {
  if(isKeyPressed('w')) {
    this.velocity.add(0,-5);
  }
  if(isKeyPressed('s')) {
    this.velocity.add(0,5);
  }
  if(isKeyPressed('a')) {
    this.velocity.add(-5,0);
  }
  if(isKeyPressed('d')) {
    this.velocity.add(5,0);
  }
}

但是当我尝试调用player.motion时，我收到错误：

未捕获的TypeError：isKeyPressed不是函数

有谁知道为什么会这样？

Answer 1

为了记录，我不认为接受的答案是正确的。具体来说，我不认为接受的答案真的会改变你原来做的事情。我的猜测是你的代码中有另一个问题（比如语法错误）导致了这个错误，你在实现建议的解决方案的过程中修复了这个问题。因此，尽管解决方案可能看起来像是解决了您的问题，但实际上还是其他问题。

我提供了这个替代答案，因此您不必认为必须直接在html中定义JavaScript，因为绝对不是这样。

我尝试通过创建一个由三个文件组成的较小示例来测试您的设置：

<强>的index.html

<!DOCTYPE html>
<html>
<head>
  <script src="one.js"></script>
  <script src="two.js"></script>
</head>
<body onload="printObj()">
</body>
</html>

<强> one.js

function printOne(){
    console.log("one");
}

<强> two.js

var obj = {};

obj.printTwo = function(){
    console.log("two");
    printOne();
}

function printObj(){
    obj.printTwo();
}

这几乎就是您的设置，它运行正常。您绝对不需要将您的JavaScript放入html中。只要JavaScript文件正确加载 正确的顺序，您就可以在另一个文件中使用一个文件中的函数和变量。

有两个主要因素可能导致您的问题：

您的文件是否已正确加载？

您是否有任何语法错误未被注意到？ （这是我猜测导致原始问题的原因。）检查JavaScript控制台，然后尝试运行一些测试代码来实际运行您尝试调用的功能。
您的所有文件名是否正确？
您是否在防火墙后面，或者是否存在可能导致加载问题的其他网络问题？

您的文件是否以正确的顺序加载？

要使文件two.js访问one.js中定义的代码，您必须确保在one.js之前加载two.js。看起来您已经正确地完成了这项工作，但是您确定JavaScript是您认为的吗？
换句话说，您确定它位于player.js而不是main.js吗？
您可能希望通过将相关JavaScript放在同一个文件中来消除这种歧义。让一个文件定义keysPressed数组然后另一个文件使用该数组来定义isKeyPressed()函数没有多大意义。只需将它们放在同一个文件中，并确保在使用它的其他文件之前加载该文件。

接受的答案并不会因为加载内容而改变任何内容。除非您遇到语法错误，或player.motion()函数实际上在{{1文件，或者你有一个网络加载问题，你的代码应该工作。所以其中一件事必须是你的实际问题。 您无需在html中定义JavaScript即可使用。

Answer 2

你可以试试这样的事情

isKeyPressed.js

这是从<script>文件导入所有功能，因此您可以在isKeyPressed.js标记中引用它。您无法在player.js中使用{{1}}的功能，因为您无法引用它。

使用JavaScript中其他文件的函数

2 个答案: