如何在 p5.js 中管理多问答游戏的多个屏幕？

Question

我是 Web 开发的新手，需要编写带有声音、图像和大量交互性的测验，我发现 p5.js 对我来说是完美的解决方案。

我的问题是我喜欢超过 10 个问题，这些问题具有不同类型的输入（每个问题都有自己的规则，有些具有相同的规则）和一个介绍屏幕。我真的很困惑我该如何组织它，如何最好地保持我的代码干净，因为我遵循的教程通常在一个文件中做例子，我认为如果我在抽签时编写这样的东西功能（如果问题== 1 {问题，答案，规则规则规则规则规则}如果问题== 2 {问题，回答不同的规则规则}）这将是一个巨大的混乱。

因此，我需要一些针对多屏幕的解决方案，但共享一些全局 variables.The 用户应该能够返回到任何先前已回答的问题并修改当前答案。

我认为这对于多关卡的游戏来说应该是一样的，你保留一些 "rules" 的世界，只是改变 stages/levels/screens/enemies。

抱歉我的英语不好，我希望它不会混淆。

谢谢！

Answer 1

我觉得你应该使用 objects 来 encapsulate 表示屏幕或问题所需的数据。

Here 是关于在 p5.js 中使用对象的教程，google 还有很多。但基本思想是您需要创建一个对象，其中包含您需要了解的有关特定屏幕或问题的所有信息。它可能看起来像这样：

// Question class
function Question(myQuestionText, myAnswerText, myRules) {
  this.questionText = myQuestionText
  this.answerText = myAnswerText;
  this.rules= myRules

  this.display = function() {
    text(questionText, 25, 25);
  };

  this.checkAnswer= function(userAnswer) {
    return userAnswer == answerText;
  }
};

这只是您可能会做的事情类型的一个示例，您肯定需要对其进行扩展以使其完全满足您的需要。例如，您还可以创建一个 Rule 对象并让每个 Question 包含一个 array of Rules。同样，这只是您可能采用的一种方法。

但重点是，一旦封装了这些东西，就可以将问题存储为 JSON 或以编程方式构建它们，然后将它们存储在 array 或 Questions 中. Here 是在 p5.js.

中使用对象数组的示例

一旦您拥有 Questions 的 array，那么您的绘制代码可能如下所示：

function draw(){
   questions[questionIndex].display();
}

不需要庞大的 if 语句，因为您需要知道的一切都被封装在 Question 对象中。

这是一个相当宽泛的主题，它可能会让人有些困惑，所以我建议您 尝试一些东西 和 post 如果您明白了 MCVE卡住。祝你好运。

Answer 2

您应该采用 Kevin 的方法来创建您自己的对象类型以保持整洁。

对于快速原型，您可以利用 javascript 的动态特性并即时创建对象（想想 JSON 之类的）。这是一个存储基本问题的非常基本的示例：

var questions = [
  {
    question:"Question #1",
    options:[1,2,3],
    selected:-1,
    correct:2
  },
  {
    question:"Question #2",
    options:[3,2,1],
    selected:-1,
    correct:1
  },
  {
    question:"Question #3",
    options:[2,1,3],
    selected:-1,
    correct:3
  }
];

var currentQuestion = 0;

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

function draw() {
  background(255);
  text(questions[currentQuestion].question,10,15);
  text(questions[currentQuestion].question,10,15);
  for(var o = 0; o < questions[currentQuestion].options.length; o++){
    text(questions[currentQuestion].options[o],10,35 + (20 * o));
  }
  text("selected: " + questions[currentQuestion].selected,10,90);
  text("correct: " + questions[currentQuestion].correct,10,110);
  text("match: " + (questions[currentQuestion].selected == questions[currentQuestion].correct),10,130);
}
function keyPressed(){
  //loop through questions on space
  if(key == ' ') currentQuestion = (currentQuestion + 1) % questions.length;
  if(key == '1') questions[currentQuestion].selected = 1;
  if(key == '2') questions[currentQuestion].selected = 2;
  if(key == '3') questions[currentQuestion].selected = 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>

运行代码片段整页并使用 SPACE 键循环遍历问题和 1,2 或 3 到 select 答案。这很可能不会做您想要做的事情，但希望能说明一种快速原型制作方法。

根据您使用 JavaScript 和外部库的经验，您可能需要查看 Polymer (and the topeka example + source）。请注意，如果您是编码新手，这是一条陡峭的学习曲线，因此可能值得先使用 p5.js 掌握 JS 的窍门。

如何在 p5.js 中管理多问答游戏的多个屏幕？

how to manage multiple screens for a multi-quiz game in p5.js?

javascript

processing

p5.js