2

Quero adicionar 3 elementos em cada array vazio de preferencia usando o metodo splice com a condição de que quando data1 tiver 3 elementos ele salta para data2 e adiciona 3 elementos e quando data2 tiver 3 elementos ele salta para data3 e adiciona até o arr.length for igual a 0. Isso era o que eu queria dizer desde ontem mas sou um novato nesse mundo. Eu sei que não é mto dificil mas eu ja tentei e não consegui. Mil desculpas a todos que ja responderam a minha pergunta.

O que eu quero será criar uma função para eu poder adicionar os elementos aos 3 arrays vazios ao mesmo tempo.Exatamente eu não quero copiar os elementos do arr eu quero pegar de um array e adicionar aos arrays vazios. por exemplo pego os primeiros 3 indices e adiciono no array1, pego 3 indices e adiciono no array2, pego os ultimos 3 indices e adiciono no array3 mas tudo ao mesmo tempo.

eu quero criar um jogo de cartas simples mas com imagens por isso tenho esse array de imagens e as divs com class diferentes representando cada jogador como eu não consegui passar as imagens directamente para as divs eu resolvi criar 4 arrays para cada jogador mas aí tb tive problema pk n consegui implementar o loop. No jogo tenho que baralhar as cartas, dar as cartas, prever as jogadas, somar o valor das cartas será que posso fazer com javascript? Na sua opinião qual a melhor maneira de fazer?

var arr = [];

arr[0]='<img class="images" src="1.jpg">';      
arr[1]='<img class="images" src="2.jpg">';
arr[2]='<img class="images" src="3.jpg">';
arr[3]='<img class="images" src="4.jpg">';
arr[4]='<img class="images" src="5.jpg">';
arr[5]='<img class="images" src="6.jpg">';
arr[6]='<img class="images" src="7.jpg">';
arr[7]='<img class="images" src="8.jpg">';
arr[8]='<img class="images" src="9.jpg">';
arr[9]='<img class="images" src="10.jpg">';
arr[10]='<img class="images" src="11.jpg">';
arr[11]='<img class="images" src="12.jpg">';

O resultado seria esse:

js

var data1 = ['elemento1','elemento2','elemento3'];
var data2 = ['elemento4','elemento5','elemento6'];
var data3 = ['elemento7','elemento8','elemento9'];
var data4 = ['elemento10','elemento11','elemento12'];

html

<div id="geral" >

    <div id="posi1" class="div_um"></div>   
    <div id="posi2" class="div_dois"></div> 
    <div id="posi3" class="div_tres"></div>
    <div id="posi4" class="div_quatro"></div>

</div>
9
  • 2
    Podes explicar melhor o que queres fazer? está pouco claro. Como assim "não quero fazer uma cópia"?
    – Sergio
    Commented 11/01/2015 às 22:42
  • 3
    Se explicares também o contexto podemos ajudar na maneira melhor de fazer o que precisas.
    – Sergio
    Commented 11/01/2015 às 22:52
  • o que eu quero será criar uma função para eu poder adicionar os elementos aos 3 arrays vazios ao mesmo tempo.Exatamente eu não quero copiar os elementos do arr eu quero pegar de um array e adicionar aos arrays vazios. por exemplo pego os primeiros 3 indices e adiciono no array1, pego 3 indices e adiciono no array2, pego os ultimos 3 indices e adiciono no array3 mas tudo ao mesmo tempo. teoricamente eu sei como se faz mas na prática não consegui por estou pedindo ajuda de vcs.
    – magestik
    Commented 11/01/2015 às 23:51
  • magestik: eu ainda gostava de deixar mais uma resposta mas gostava que explicasses de onde vêm essas imagens (isto é se as crias à mão ou como a arr é preenchida) e também como vais usar data1, data2 e data3. Sabendo isso posso deixar uma sugestão de código/lógica a usar.
    – Sergio
    Commented 12/01/2015 às 6:37
  • Sérgio eu estou a aprender javascript e nao sei se vou lhe explicar corretamente pk ha termos que eu desconheço. Mas é assim essas imagens vem de .../imagens que depois serão inseridas em uma div atraves do data1, então data1 corresponde a uma div, data2 corresponde a uma div e data1 corresponde a uma div. Mas eu não me expliquei direito por isso está dificil de entender.
    – magestik
    Commented 12/01/2015 às 13:27

2 Respostas 2

2

Com base nas suas informaçoes se ao inves de data1, data2, data3 usar somente um array com todas as data's o metodo abaixo pode resolver o seu problema:

        var arr = [];

        arr[0]='<img class="images" src="1.jpg">';      
        arr[1]='<img class="images" src="2.jpg">';
        arr[2]='<img class="images" src="3.jpg">';
        arr[3]='<img class="images" src="4.jpg">';
        arr[4]='<img class="images" src="5.jpg">';
        arr[5]='<img class="images" src="6.jpg">';
        arr[6]='<img class="images" src="7.jpg">';
        arr[7]='<img class="images" src="8.jpg">';
        arr[8]='<img class="images" src="9.jpg">'; 

        var dataX = [];

        for(var i = 0; i < arr.length; i+=3) {
            dataX.push(arr.slice(i, i+3));
        }

O resultado seria a variavel dataX com as arrays de tres elementos:

inserir a descrição da imagem aqui

8
  • Obrigado pela resposta mas eu qero saber como adiciono ao mesmo tempo ao em todos os array vazios pk até onde mostras eu sei fazer. o que eu quero será criar uma função para eu poder adicionar aos 3 arrays vazios ao mesmo tempo.
    – magestik
    Commented 11/01/2015 às 23:44
  • @magestik sempre o numero de elementos a serem colocados nos arrays serão múltiplos de três? Commented 12/01/2015 às 0:05
  • quero que sejam adicionados 3 elementos de uma vez.
    – magestik
    Commented 12/01/2015 às 0:18
  • @magestik mudei a resposta e isso que você esta precisando? Commented 12/01/2015 às 0:35
  • 3
    Ok @magestik, caso acredite que a solução seria útil para outros usuários, poste ela como resposta da sua pergunta ;) Commented 12/01/2015 às 1:41
1

Um ponto de partida podia ser este exemplo que fiz: http://jsfiddle.net/s4Lbmgp9/

No fundo usa como base as divs que referiste, e dentro de cada iteração dessas divs tens um ciclo for que corre 3 vezes. A cada iteração desse for dentro do .each() ele gera novo HTML para ser incluído nas divs.

Neste exemplo (que referi em cima) ele usa um sprite que encontrei aqui mas se já tens fundo para as imagens podes ignorar.

Se tens um array com todas as cartas (eventualmente já sorteadas) então preencher essas 4 divs com essas cartas é ainda mais simples. Podes usar assim (uma versão simplificada do exemplo em cima):

$('#geral > div').each(function (i) {
    var html = '';
    for (var j = 0; j < 3; j++) {
        html += '<div class="carta" style="background-position: ' + cartas[i + j] + '"></div>';
       // ou se tiveres HTML dentro dessa array simplesmente:
       // html += cartas[i + j];
    }
    this.innerHTML = html;
});

Exemplo live: http://jsfiddle.net/2acv5m36/

Repara que no exemplo estou a usar as posições na array. Pode ser que tenhas os url das imagens na array, aí tens de fazer uma pequena adaptação em relação ao meu exemplo. Mas tem em conta que um sprite só carrega uma vez, fazendo o carregamento da página bem mais leve.

2
  • bom com o teu exemplo ja tenho mta coisa para estudar e começar agora a duvida será como eu comparo o valor entre duas cartas para saber qual delas vale mais, se souberes algum exemplo podes me indicar
    – magestik
    Commented 12/01/2015 às 21:46
  • 2
    @magestik uma boa idiea seria fazeres o jogo todo sem pensar na parte gráfica. Ou seja, criar a lógica no código com arrays e objetos para cada carta. Assim o podes perguntar aqui sobre os passos que tentaste mas não consegues dar sozinho. E no final juntas a parte gráfica. Se não vais estar a começar pelo fim.
    – Sergio
    Commented 12/01/2015 às 21:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .