Question

我是javascript的新手，我正在尝试创建一个类型的冒险游戏。我在p5.js上使用DOM。输入＆＃34;你的英雄名字后，我希望提交按钮消失。＆＃34;此外，我希望游戏的其余部分设置多种选择答案类型，所以如果你也可以帮助找到一个起点，那将是非常有帮助的。谢谢。

var input, button, greeting;
var a;

function setup() {


  // create canvas
  createCanvas(710, 400);



  input = createInput();
  input.position(20, 100);

  button = createButton('submit');
  button.position(200, 150);
  button.mousePressed(greet);

  greeting = createElement('h2', 'what is the name of your hero?');
  greeting.position(20, 5);


  textAlign(CENTER)
  textSize(50);
}

function greet() {
  var name = input.value();
  greeting.html(name+' lives in a peaceful and beautiful village called Scranton.  The only village not yet completely ravaged by the chaos and war surrounding daily life everywhere else.');
  input.value('');

     text(name, 0, 0);


}

Answer 1

我看到你只是在开始思考这个游戏的结构，但这里是你问题的直接答案。

在greet（）中，你只需hide()输入按钮，这是你遇到的最少问题。稍后您需要清除画布中的先前消息（在此示例中，为了清除画布，我使用了一个小clearCanvas函数），编写新的消息，以某种方式定义下一个问题/任务，为用户提供选项。

如果你想提出一个多项选择问题，我现在最好的答案是 - 按下按钮（直到p5中对单选按钮或下拉列表有适当的支持 - 我刚开始使用p5，但我认为他们还没有提供这些元素。）

正如您所看到的，我为画布更改了一些背景颜色，因此您可以更好地了解正在发生的事情。此外，删除了position()来电，因为他们为您创建了更多问题解决方案。当你不使用它们时，元素将以相对可预期的方式彼此相邻地添加。

最后一件事 - 有这个快速和放大通过prepareQuestion函数，您可以如何处理准备和显示问题并提供答案的丑陋解决方案。

此解决方案是def。不是一件令人向往的事情，但如果你仍然对p5感兴趣，它可能会让你前进。

var input, button, promptText, infoText;
var canvas;
var bgcolor = 210;
var a;

function setup() {


  // create canvas
    canvas = createCanvas(710, 400);
    fill(0);
    background(bgcolor);

    infoText = createElement('blockquote');

    promptText = createElement('h2', 'what is the name of your hero?');
    //promptText.position(20, 5);

    input = createInput();
    //input.position(20, 100);

    button = createButton('submit');
    //button.position(200, 150);
    button.mousePressed(greet);

    //textAlign(LEFT)
    textSize(30);
}

function greet() {
    button.hide();

    var name = input.value();

    //  shows the greeting for a new hero, inside the canvas
    text(name+' lives in a peaceful and beautiful village called Scranton.  The only village not yet completely ravaged by the chaos and war surrounding daily life everywhere else.',  20, 0, 700, 400);

    // calls the set up of the next question
    prepareQuestion(1);

}

function prepareQuestion(questNum) {

    switch (questNum) {
        case 1:
            input.value('').hide();

            //  writes the new question for a user
            promptText.html('<p>Do you want to go left or right?</p>');

            btnLeft = createButton('Left');
            btnRight = createButton('Right');

            btnLeft.mousePressed(function() {
                clearCanvas();
                text('Going left!', 20, 30);
                // or do anything else
            });
            btnRight.mousePressed(function() {
                clearCanvas();
                text('Going right!', 20, 30);
            });
        break;

        case 2:
            //  add here the code for question 2
            break;
    }
}

function clearCanvas() {
    rect(0, 0, canvas.width, canvas.height);
    background(bgcolor);
}

如何在点击p5 dom后删除提交按钮

1 个答案: