Problem generating divs with append

1

Hello, good!

I have to deliver this project from the university and I'm going crazy because I can not get the divs I need: / Sure the code has many more flaws (and I'm not going to complain if someone is dedicated to pointing them out, obviously : D), but the one that worries me most right now is that.

It is a card game in which several players have to draw cards (each of their own deck) until three of those cards match in number (for example, three aces, three twos, etc.). Whoever does it in the least number of cards, wins. You have to show the cards (they can appear one at a time or all at once, I have opted for the second option), the names and the score of the players, as well as save it in localStorage. Can you give me a cable?

Here is the fiddle link and the JS itself:

//creo los tipos de variables de los números, los palos y la baraja
var cards = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var suits = ["diamonds", "hearts", "spades", "clubs"];
var deck = new Array();
var player = new Array();

function getDeck()
{
    var deck = new Array();
//cargar la baraja de cartas
    for(var i = 0; i < suits.length; i++)
    {
        for(var x = 0; x < cards.length; x++)
        {
            var card = {Value: cards[x], Suit: suits[i]};
            deck.push(card);
        }
    }

    return deck;
}

function deal()
{
    // sacar la última carta de la baraja
    var card = deck[deck.length-1];
    deck.splice(deck.length-1, 1);
    return card;
}

function shuffle()
{
    // cambiar dos cartas aleatorias de posición 1000 veces
    for (var i = 0; i < 1000; i++)
    {
        var location1 = Math.floor((Math.random() * deck.length));
        var location2 = Math.floor((Math.random() * deck.length));
        var tmp = deck[location1];

        deck[location1] = deck[location2];
        deck[location2] = tmp;
    }
}

function renderDeck(deck, number)
{
    for(var i = 0; i < deck.length; i++)
    {
        var card = document.createElement("div");
        var value = document.createElement("div");
        var suit = document.createElement("div");
        card.className = "card";
        value.className = "value";
        suit.className = "suit " + deck[i].Suit;

        value.innerHTML = deck[i].Value;
        card.appendChild(value);
        card.appendChild(suit);

        document.getElementById("deck"+number).appendChild(card);
    }
}

function game(deck) {

     var cont= new array();
     for (var i = 1; i < 10; i++){
    //creo un contador para cada uno de los números de la baraja
    cont[i]=0;}

     //contador de puntuacion
     var score = 0;

     //creo una nueva baraja para contener las cartas que voy sacando
     var newDeck = "";

     //mientras ninguno de los contadores llegue a 3, el juego continua
     while (cont[1] < 3 || cont[2] < 3 || cont[3] < 3 || cont[4] < 3 || cont[5] < 3 || cont[6] < 3|| cont[7] < 3 || cont[8] < 3 || cont[9] < 3 || cont[10] < 3) {

         //saco la última carta de la baraja
         newDeck[score]= deck.pop();

         //busco a qué valor corresponde la carta y subo la cuenta de su contador correspondiente
        if (newDeck[score].value = 1) {
            cont[1]++;}

        else if (newDeck[score].value = 2) {
            cont[2]++;}

        else if (newDeck[score].value = 3) {
            cont[3]++;}

        else if (newDeck[score].value = 4) {
            cont[4]++;}

        else if (newDeck[score].value = 5) {
            cont[5]++;}

        else if (newDeck[score].value = 6) {
            cont[6]++;}

        else if (newDeck[score].value = 7) {
            cont[7]++;}

        else if (newDeck[score].value = 8) {
            cont[8]++;}

        else if (newDeck[score].value = 9) {
            cont[9]++;}

        else {
            cont[10]++;}

         //aumento el contador de puntuación
         score++;
     }

     //devuelvo la puntuación y el mazo con las cartas resultantes
     return score, newDeck;
}

function players (){

    //pregunto cuántos jugadores serán      
        var number = prompt("¿Cuántas personas van a jugar?","2");

        //en función de cuántos sean, creo el mismo número de prompts para preguntar sus nombres
        //y almacenarlos en localStorage

        for(var i = 0; i < number; i++) {
            player[i]= prompt("¿Cómo se llama el jugador número " + i + "?");
        }
        //dado que localStorage solo me permite guardar Strings, utilizo stringify para pasar el array
        localStorage.setItem('nickName', JSON.stringify(player));

        //devuelvo el array de jugadores
        return player;}


function myFunction()
{
    players();

    for (var i= 0; i< player.lenght; i++) {
        //crear un div para meter la información de cada jugador
    var playerTitle = document.createElement("div");
    var playerName = document.createTextNode(player[i]); 
    playerTitle.appendChild(playerName);
    playerTitle.classname = "playerTitle";

    document.getElementById("results").appendChild(playerTitle);

    var deckShow = document.createElement("div");
    deckShow.id = "deck" +i;
    document.getElementById("results").appendChild(deckShow);
}

    //realizo el juego para cada jugador
for (var i = 0; i < player.lenght; i++) {


    //inicializar las barajas
    deck[i] = getDeck();
    shuffle();


    //crear el juego
    game(deck[i]);
    console.log(game);
    //mostrar la baraja
    renderDeck(newDeck, i);
    //guardar la puntuación en un array para pasarlo a localStorage
    var finalScore = "";
    finalScore[i]=score;

    //mostrar el resultado
    document.getElementById("playerTitle" + i).innerHTML = player[i] + " ha conseguido su objetivo en " + score + "turnos.";

    //genero una tupla para poder consultar el ganador
    const winner = (player[i], score)

    //paso el array a localStorage
    localStorage.setItem('score', JSON.stringify(finalScore));

    //determino el ganador

    console.log(players);
    console.log(deck);


    }
    var which = Math.min(...winner.score);
    for (var i = 0; i < player.lenght; i++) {
        if (which==winner[i].score) {

        document.getElementById("finalScore").innerHTML = "El ganador es " + winner[i].player;
        }
        else {}
    }





}
    
asked by Ulises85 27.05.2018 в 17:14
source

0 answers