4
\$\begingroup\$

Basically, I am trying to make Hangman/Wheel of Fortune style game. The demo for the game I made is here.

Is there anything I can improve or should change?

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();
});
\$\endgroup\$
  • \$\begingroup\$ alert("sorry you loose") should be alert("sorry you lose") \$\endgroup\$ – I0_ol Apr 6 '17 at 0:41
1
\$\begingroup\$

My random thoughts about this code in priorized order.

  1. Your overall game logic is missing the most generic steps like start, solve or restart. You might also want to enclose a game. Imagine you had to put up two of those games on one page.

  2. Document your code!!! What does a function update or checkletter do? Does it return something? What are the expected params?

  3. Separate DOM manipulations from game logic. Otherwise you won't be able to unit-test your logic.

  4. Put your code in more and smaller functions. Your functions do too much at once. 5-15 lines/statements per function should be enough. The extra methods also serve as nice de-facto documentation. For example, when tries === 0, call function lose() and put your three lines into lose().

  5. Do not put questions and hints into separate arrays. This is maybe how you would do it in a database, but in OOP we put things together that belong together. Here it's question and hint pairs. Also that data is not part of a game but rather an input the whole game works on. Imagine expanding the game so that one player can enter a word and another has to solve it.

  6. Do not leave commented out code in there. The next person seeing this will be wondering what it is good for and so that useless, potentially confusing and wrong code stays in there forever.

  7. Don't scatter random new-lines. They make reading harder.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.