Question

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

我的问题是，我有10个以上的问题，不同类型的输入（每个都有自己的规则，有些具有相同的规则）和介绍屏幕。我真的很困惑，我怎么能组织这个，如何保持我的代码干净的最佳方法，因为我遵循的教程通常在单个文件中做示例，我认为如果我在绘制时编写这样的东西功能（如果问题== 1 {问题，答案，规则规则规则规则}如果问题== 2 {问题，回答不同的规则规则}）这将是一个巨大的混乱。

所以，我需要一些多屏幕解决方案，但是它共享一些全局变量。用户应该能够回到之前已回答的任何问题，并修改当前的答案。

我认为对于具有多个级别的游戏应该是相同的，在这里你保留一些世界的“规则”，只是改变阶段/级别/屏幕/敌人。

对不起我的英语，我希望不要混淆。

谢谢！

Answer 1

听起来我应该使用对象来封装表示屏幕或问题所需的数据。

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

// 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 Rules。同样，这只是你可能采取的一种方法。

但重点是，一旦封装了这些内容，就可以将问题存储为JSON或以编程方式构建它们，然后将它们存储在array Questions中。 Here是在p5.js中使用对象数组的示例。

获得array Questions之后，您的绘图代码可能如下所示：

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

不需要巨大的if语句，因为您需要知道的所有内容都由Question对象封装。

这是一个相当广泛的主题，它可能会有点混乱，所以我建议你尝试一些并在遇到问题时发布MCVE。祝你好运。

Answer 2

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

运行代码段“整页”并使用SPACE键循环搜索问题，然后1,2或3选择答案。这很可能不会做你想做的事情，但希望能够说明一种快速的原型设计方法。

根据您使用JavaScript和外部库的经验，您可能需要查看Polymer（以及topeka example + source）。请注意，如果您不熟悉编码，那么这是一个陡峭的学习曲线，所以最好先用p5.js来掌握JS。

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

2 个答案: