Estoy creando un juego en la web para mis estudios. Necesito crear un juego de cartas en el que cada carta tenga sus propios datos (número y nombre de poder), los datos se toman de data.txt y se colocan en una matriz que luego se aleatoriza. data.txt se parece a esto:
0 Bored cat -8 Biting -10 ScratchingLa función Play () codifica la plataforma cuando se presiona el botón PLAY. Una vez que todas las tarjetas están aleatorias, llamo a la función addCardCat() que debería crear una tarjeta div con las etiquetas h1 y h3. En h1, la etiqueta innerHTML debe ser un número, y h3 debe ser el nombre del poder, sin embargo, siempre me devuelven indefinido. ¿Cual podría ser el problema?
CÓDIGO JS
let counter = 0; var deck = []; // ----------READING----------// let fs = require('fs'); let data = fs.readFileSync('data.txt', 'utf8').split('\r\n'); // ----------RANDOM NUMBER GENERATOR----------// let numberArray = Array.from(Array(54).keys()) // ----------ARRAY SCRAMBLE---------// function scrambleArray(array){ let currentIndex = array.length, randomIndex; // While there remain elements to shuffle... while (currentIndex != 0){ // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; // And swap it with the current element. [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex]]; } return array; } // ----------PLAYING DECK----------// function scrambleDeck(array){ for(var i = 0; i < 54; i++){ var j = numberArray[i]; array.push(data[j*2]); array.push(data[j*2+1]); } return array; } // ----------ADD CARD----------// function addCardCat(number, power) { counter++; var newDiv = document.createElement("div"); newDiv.className += " cat__card"; newDiv.id = 'card-' +counter; // newDiv.onclick = removeCardCat(); // newDiv.onclick = function() { alert('blah'); }; document.getElementById('cat').appendChild(newDiv); var newH1 = document.createElement("h1"); var newH3 = document.createElement("h3"); document.getElementById('card-' +counter).appendChild(newH1); document.getElementById('card-' +counter).appendChild(newH3); newH1.innerHTML = number; newH3.innerHTML = power; return number, power; } // ----------START GAME----------// function play() { document.getElementById("play").style.display = "none"; scrambleArray(numberArray); scrambleDeck(deck); }```Es difícil saberlo con el código submínimo provisto, pero es probable que este return number, power; está causando su problema.
La declaración de devolución finaliza la ejecución de la función y especifica un valor que se devolverá a la persona que llama a la función.
La declaración de devolución solo devolverá un único valor. No puede utilizar una lista separada por comas. Consulte el primer fragmento a continuación para ver una demostración de lo que sucede si usa una lista separada por comas.
let x = function(number, power) { //Do stuff return number, power; } console.log(x(2, 5));Observe que solo obtuvo el último valor en la lista separada por comas.
Sin embargo, puede envolver los 2 valores en una matriz u objeto, por ejemplo, y luego devolver la matriz u objeto. Luego puede usar el método de desestructuración apropiado para extraer los 2 valores de la matriz u objeto.
Como esto:
let x = function(number, power) { //Do stuff return [number, power]; } console.log(x(2, 5));Dicho esto, parece extraño que devuelva los mismos valores que pasó a la función como argumentos sin modificarlos de ninguna manera.
Dependiendo de lo que haga con los valores devueltos, que lamentablemente no muestra en su pregunta, deberá realizar una de las siguientes acciones: