JavaScript Hangman游戏

Question

基本上，我是在尝试制造“财富”风格的“汉曼/车轮”游戏。我制作的游戏演示是这里。

有什么我可以改进或者应该改变的地方吗？

var money = 0;
var tries = 7;

var words = [
    ["E", "L", "E", "C", "T", "R", "O", "N", "I", "C", "S"],
    ["A", "R", "R", "A", "Y"],
    ["E", "A", "S", "T", "E", "R"],
    ["A", "M", "E", "R", "I", "C", "A"],
    ["A", "P", "P", "L", "E"]
]


var hints = ["this is something programmers, designers and many other people use", "This is tech related", "this is a country", " this is a fruit"]


var wongame = false;

var imagevalue = 0;
var randomword = words[Math.floor(Math.random() * words.length)];

var newword = new Array(randomword.length);




function solveword() {


    var g = prompt("enter full word  if you dare");


    var word = randomword.join("");

    if (g.toUpperCase() === word) {
        wongame = true;
        alert("Congratulations!! you won!!!!")
        sortingComplete();
        fireworks();

    } else {

        alert("sorry you loose")
        document.getElementById("win").innerHTML = "you have been hanged!!" + " " + "the word was" + " " + randomword.join("");
        document.getElementById('hangman').src = "https://lh3.ggpht.com/RHKkf_YzgC24WVjefBEHCVwZ1alzcA15oQgfsFd0tcgQo3_fgxFmLbyIGECcrZBD4KsJ=w300";
        document.getElementById("check").disabled = true;
        document.getElementById("hint").disabled = true;
    }


}
//
// }
// var t=prompt("Enter the full word if you dare!!")
//
//
// for(var x=0;x<newword.length;x++){
//
//
// }


for (var i = 0; i < newword.length; i++) {
    //creating the _ equal to word length
    newword[i] = "_ ";
}

function printword() {



    for (var i = 0; i < newword.length; i++) {

        var wor = document.getElementById('word');
        var tuna = document.createTextNode(newword[i]);
        //  wor.split(" ");
        wor.appendChild(tuna);
        console.log(tuna);
    }



}



// Image factory
var quizImagesB = new Array();

quizImagesB[0] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H1.gif"
quizImagesB[1] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H1.gif"
quizImagesB[2] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H2.gif"
quizImagesB[3] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H3.gif"
quizImagesB[4] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H4.gif"
quizImagesB[5] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H5.gif"
quizImagesB[6] = "http://img.photobucket.com/albums/v60/PandoraSD/Hangman/H6.gif"

// checkletter 
function checkletter() {

    var value = document.getElementById("guess").value;

    console.log(value);
    value = value.toUpperCase();


    for (var i = 0; i < newword.length; i++) {

        if (value === randomword[i]) {
            newword[i] = value + " ";
            var status = true;
            money += 10;


        }

        document.getElementById("guess").value = "";

    }
    var ratefeld = document.getElementById("word");
    ratefeld.innerHTML = "";
    document.getElementById('cash').innerHTML = "you have " + " " + money + " " + "gold";

    printword();

    if (!status) {

        var wrongletters = [];
        var wrong = document.getElementById('wrong');

        var hangman = document.getElementById("hangman");
        var text = document.createTextNode(" " + value);

        tries--;
        wrong.appendChild(text);
        wrongletters.push(text);
        update();
    }

    document.getElementById('lives').innerHTML = "you have" + " " + tries + " " + "tries " + "left";
    var wongame = true;
    for (var i = 0; i < newword.length; i++) {
        if (newword[i] === "_ ") {
            wongame = false;
        }
    }

    if (wongame == true) {
        alert("You win! Congratulations!!!!");
        sortingComplete();
        fireworks();

    }

    //once you got six wrong letters, you lose
    if (tries === 0) {
        document.getElementById('hangman').src = "https://lh3.ggpht.com/RHKkf_YzgC24WVjefBEHCVwZ1alzcA15oQgfsFd0tcgQo3_fgxFmLbyIGECcrZBD4KsJ=w300";
        alert("Uh...I guess you're dead now. Game over!!");
        document.getElementById("win").innerHTML = "you have been hanged!!" + " " + "the word was" + " " + randomword.join("");
        document.getElementById("check").disabled = true;
        document.getElementById("hint").disabled = true;
    }



}

function update(val) {




    imagevalue++;
    var url = 'url(' + quizImagesB[i] + ')';
    document.getElementById('hangman').src = quizImagesB[imagevalue];


    if (tries === 0) {
        document.getElementById('hangman').src = "https://lh3.ggpht.com/RHKkf_YzgC24WVjefBEHCVwZ1alzcA15oQgfsFd0tcgQo3_fgxFmLbyIGECcrZBD4KsJ=w300";

        // location.reload();
    }
};
//
//     if (wrongletters[i] == text) {
//         alert('already there');
//     }
// }



// document.getElementById("newgame").addEventListener("click",function(){
//
//   location.reload();
// });

document.addEventListener("DOMContentLoaded", function() {
    printword();
});

Answer 1

我对这个代码的随机想法是按优先顺序排列的。

1. 您的总体游戏逻辑缺少了最通用的步骤，如start、solve或restart。您还可能希望包含一个game。想象一下，你必须在一页纸上放两张这样的游戏。
2. 记录你的密码！函数update或checkletter是做什么的？它还东西吗？预期的参数是什么？
3. 将DOM操作与游戏逻辑分开。否则你将无法对你的逻辑进行单元测试。
4. 将代码放入更多和更小的函数中。你的职能一次做的太多了。每个职能应该有5-15行/说明就足够了。额外的方法也可以作为良好的事实上的文档。例如，当tries === 0时，调用函数lose()并将三行放入lose()中。
5. 不要将问题和提示放入单独的数组中。这也许是你在数据库中所做的事情，但是在OOP中，我们把属于自己的东西放在一起。这是问题和暗示对。而且，数据不是游戏的一部分，而是整个游戏的输入。想象一下，扩展游戏使一个玩家可以输入一个单词，而另一个玩家必须解决这个问题。
6. 不要把注释掉的代码留在那里。下一个看到它的人会想知道它有什么好处，因此无用、潜在的混淆和错误的代码将永远留在那里。
7. 不要散布随机的新线。他们使阅读更难。