Question

我正在尝试重新创建一种分析器游戏（在此处找到 - http://kelowna.myezrock.com/showusyourholidayspirit），以便它可以在移动设备上运行。它目前使用闪光灯完成。我希望能够轻松地重新命名颜色/图像，但基本上游戏的工作方式与链接相同。

我能找到的所有例子都是问答游戏，最后给你一个分数。任何想法都非常受欢迎！

谢谢，凯文

Answer 1

这是一种方法。首先，您需要定义最终结果，并将其分数设置为0。

var results = [
    {points: 0, name: 'red'},
    {points: 0, name: 'green'},
    /* ... */
];

以及您的问题：

var questions = [
    {
        question : 'What flower do you prefer?',
        answers : [
                { text: 'poppy', result: 0 },
                { text: 'corn-flower', result: 2 },
                { text: 'sunflower', result: 3 },
                { text: 'artichoke', result: 1 }
        ]
    },
    /* ... */
];

你需要有几个功能来完成这项工作以及一些变量：

var qEl = document.getElementById('question'),
aEl = document.getElementsByClassName('answer'),
res = document.getElementById('result'),
cur = -1,
question;

// displays the next question
function nextQuestion(){
    cur++;
    question = questions[cur];
    qEl.innerHTML = (cur+1) + ' - ' + question.question;
    for(var i=0; i<aEl.length; i++){
        aEl[i].innerHTML = question.answers[i].text;
    }
}

// add 1 to the related result and shows next question
function answer(num){
    var result = results[question.answers[num].result];
    result.points = result.points + 1;
    if(cur>=questions.length-1){
        for(var i=0, len=aEl.length; i<len; i++){
            aEl[i].style.display = 'none';
        }
        qEl.style.display = 'none';
        res.style.display = 'block';
        res.innerHTML = 'Your favorite color seems to be ' + getMaxScore() + '!';
        res.className = getMaxScore();
    } else {
        nextQuestion();
    }
}

// gets the name of the result with the max score
function getMaxScore(){
    var maxPoints = 0;
    var maxName = '';
    for(var i=0, len=results.length; i<len; i++){
        if(results[i].points>maxPoints){
            maxPoints = results[i].points;
            maxName = results[i].name;
        }
    }
    return maxName;
}

然后，您可以显示第一个问题并将answer()函数绑定到答案元素的onclick事件。

nextQuestion();

for(var i=0, len=aEl.length; i<len; i++){
    (function(index){
        aEl[i].onclick = function(){
            answer(index);    
        }
    })(i);
}

哦，这是HTML：

<h2 id="question"></h2>
<p class="answer"></p>
<p class="answer"></p>
<p class="answer"></p>
<p class="answer"></p>
<h1 id="result"></h1>

如何用html / css / javascript创建这个分析器游戏？

1 个答案:

Wanna try?