0

inserir a descrição da imagem aqui

A ideia é ordenar as letras para escrever um element HTML5 neste caso o "tfoot". Mas quando eu troco a segunda letra t pelo o não me troca direito. Eu sei porquê. é porque o index que eu peguei corresponde ao primeiro elemento com esse innerHTML, neste caso o index do t será o primeiro t o que está errado. Eis o meucódigo javascript.

word = gameMechanics[1];
  let lettertoSwitch = 0; // To be in the scope of the function
  let letterToBeSwitchedWith = 0;
  let indexLettertoSwitch = 0;
  letters.forEach((letter) => {
    letter.addEventListener("click", (e) => {
      if(turn % 2 === 0){ // If its the first time the user clicks on the letter
        lettertoSwitch = letter.style.order; // Stores the position of the letter
        indexLettertoSwitch = word.indexOf(letter.innerHTML); // Stores the index of the letter
        turn ++;
      }else if(turn % 2 === 1){ // If its the second time the user clicks on a letter
        letterToBeSwitchedWith = letter.style.order; // Stores the position of the letter
        turn ++;
        
      }
      if(turn % 2 == 0 && turn !== 0){ // If the player has made to moves and its not the first turn
        letter.style.order = lettertoSwitch; // Switches the current letter with the first one clicked
        letters[indexLettertoSwitch].style.order = letterToBeSwitchedWith; // Switches the second clicked letter with first one clicked
        console.log(lettertoSwitch, letterToBeSwitchedWith);
      }
    })

Como é que eu posso obter o index da letra através da propriedade order do elemento, pois é a única propriedade única que consegue distinguir as mesmas letras? Poderia usar o evento para aceder ao index do elemento?

4 Respostas 4

4
+50

Acredito que o IndexOf() não resolverá seu problema.

Eu partiria para algo mais simples

1) Posicionar cada caracter em uma tag com um id específico

<span id="0" onClick="reply_click(this.id)">t</span>
<span id="1" onClick="reply_click(this.id)">o</span>
<span id="2" onClick="reply_click(this.id)">o</span>
<span id="3" onClick="reply_click(this.id)">t</span>
<span id="4" onClick="reply_click(this.id)">f</span>

2) Ao clicar no caracter retorna o id do mesmo, o que já seria a posição.

function reply_click(clicked_id)
  {
      alert(clicked_id);
  }

Nota Claro que vc não fará o alerta, mas sim trocar o caracter

Veja este código aqui:

function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
<span id="0" onClick="reply_click(this.id)">t</span>
<span id="1" onClick="reply_click(this.id)">o</span>
<span id="2" onClick="reply_click(this.id)">o</span>
<span id="3" onClick="reply_click(this.id)">t</span>
<span id="4" onClick="reply_click(this.id)">f</span>

Espero que ajude.

1
  • Resultou! Boa lógica. Interessante que não haja uma função para obter o index pela propriedade de estilo. Commented 22/01/2021 às 15:55
2

Tudo depende da forma como estruturar o seu código HTML. Uma forma é definir cada letra num elemento independente e assim poder registar eventos em cada letra e executar lógica para efetuar a troca das letras.

O seguinte código baseia-se nesta estrutura e utiliza javascript para:

  • Gerar o HTML, dada uma palavra;
  • Registar os eventos para cada letra;
  • Executar lógica para troca de letras;
  • Verificar se a palavra corresponde à initial (acerto).

Acabei entusiasmando-me a implementei isto. Espero que ajude.

// Check if a given word is valid for the purpose of this example.
// A word is considered valid if it has at least 2 letters and not all the letters are the equals.
const isValidWord = (word) => {
  if (word.length < 2) return false;
  
  const wordArray = [...word];
  
  return wordArray.filter(
    (letter) => wordArray[0] === letter,
  ).length !== wordArray.length;
};

// Randomly shuffle letters in a given word and return it.
// It makes sure the shuffled word is not equals to the given word.
const shuffleWord = (word) => {
  const wordArray = [...word];
  const shuffledWord = wordArray.sort(() => Math.random() - .5).join('');
  
  return shuffledWord !== word ? shuffledWord : shuffleWord(word);
};

// Generate and return and HTML element representing a word.
// Example: <div class="word"><span class="letter">A</span></div>
const generateWordElement = (word) => {
  const wordElement = document.createElement('div');
  
  wordElement.classList.add('word');
  [...word].forEach(
    (letter) => wordElement.appendChild(generateLetterElement(letter)),
  );
  
  return wordElement;
};

// Generate and return and HTML element repsenting a letter.
// Example: <span class="letter">A</span>
const generateLetterElement = (letter) => {
  const letterElement = document.createElement('span');
  
  letterElement.classList.add('letter');
  letterElement.appendChild(document.createTextNode(letter.toUpperCase()));
  
  return letterElement;
};

// Register a click event listener for every letter element.
// It calls switchLetter passing the letter element clicked as argument
// and then checks if the word is right by calling wordMatch.
const registerEventListeners = (word) => {
    document.querySelectorAll('.word .letter').forEach((letterElement) => {
    letterElement.addEventListener(
      'click',
      (event) => {
        switchLetter(event.target);
        wordMatch(word);
      },
    );
  });
};

// Try to switch letters between 2 clicked elements.
// It uses a global swap variable to store the 1st clicked element.
// When there's already a clicked element, it switch them and set the swap element back to null.
const switchLetter = (clickedLetterElement) => {
  if (!swapLetterElement) {
    swapLetterElement = clickedLetterElement;
    swapLetterElement.classList.add('letter--selected');

    return;
  }

  const swapLetter = swapLetterElement.textContent;
  swapLetterElement.textContent = clickedLetterElement.textContent;
  clickedLetterElement.textContent = swapLetter;
  swapLetterElement.classList.remove('letter--selected');
  swapLetterElement = null;
};

// Check if the current word element matches the initial word.
const wordMatch = (word) => {
  const currentWord = Object.values(document.querySelectorAll('.word .letter')).map(
    (letterElement) => letterElement.textContent,
  ).join('');

  if (currentWord === word.toUpperCase()) {
    document.querySelector('.word').classList.add('word--match');
  }
};

// Initialize the game
const init = (word) => {
  if (!isValidWord(word)) return;

  document.querySelector('body').appendChild(
    generateWordElement(shuffleWord(word))
  );

  registerEventListeners(word);
};

let swapLetterElement = null;
init('tfoot');
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

.word {
  display: flex;
  justify-content: center;
  padding: 15px;
  font-family: 'Play', sans-serif;
  font-size: 30px;
}

.word.word--match {
  background-color: mediumspringgreen;
  pointer-events: none;
}

.word.word--match .letter {
  border-color: teal;
  color: teal;
}

.letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  border: 3px solid darkgray;
  border-radius: 5px;
  background-color: lightgray;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transition: all ease .25s;
}

.letter.letter--selected {
  border-color: teal;
  color: teal;
  background-color: white;
}

1

Algoritmo

Se entendi corretamente, precisa apenas do índice da letra clicada. Imagino que necessite de um algoritmo seguindo a lógica da função abaixo:

function getIndexOfNthLetter(array, nPositionInArray, letter) {
    // declarando as variáveis que serão usadas
    let currentLetter, position = 1;

    for (let i = 0; i < array.length; i++) {
        // resgatando letra atual
        currentLetter = array[i];

        /* 
         *  caso a letra seja a mesma que deseja E a posição no array também, retorne
         *  a partir do índice atual, para não retornar o índice de uma letra passada
        */
        if (letter === currentLetter && position === nPositionInArray) {
            return array.indexOf(currentLetter, i);
        } else if (currentLetter === letter) {
            // caso contrário, a posição não é a desejada mas continuamos seguindo...
            position++;
        }
    }

    // retornando -1 caso nenhuma letra tenha sido encontrada no índice indicado
    return -1;
}

O uso da função acima seria:

getIndexOfNthLetter(array, 2, "t"); // Solicitando o segundo "t", índice: 3
getIndexOfNthLetter(array, 2, "r"); // Solicitando o segundo "r" (que não existe no array), índice: -1

Conclusão e uso do indexOf

Seu uso da função indexOf deveria conter dois argumentos: A letra e a partir de onde procurar, ou seja, no índice da letra atual, para que não retorne o índice do primeiro "t", como no seu caso de uso.

Se procurar pelo "t" a partir do segundo "t", terá o índice dele mesmo, pois o array só seria considerado a partir dali.

Espero ter ajudado de alguma forma.

0

guarde o índice da primeira ocorrência e use o index como offset para a próxima pesquisa "recursivamente":

var indexOcorrencias = [];
var text = 'tootf';
var toSearch = 't';
var index = text.indexOf(toSearch);
while (index>=0) {
  indexOcorrencias.push(index);
  index += toSearch.length;
  index = text.indexOf(toSearch, index);
}
//indexOcorrencias = [0,3];

função indexOf:

indexOf(find[,offset])
2
  • não percebi como é que isso me vai dar o index da letra clicada?! dá-me um array de indexes não o index da letra clicada Commented 21/01/2021 às 22:07
  • seria mais fácil de entender se tivesse dito isto invés de "Como obter um indexOf() de um array com o mesmo elemento múltiplas vezes?"
    – anon
    Commented 22/01/2021 às 1:07

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 .