Así que decidí aprender javascript y encontré un problema que no puedo resolver. Me siento estúpido al preguntar esto porque probablemente sea muy simple, pero básicamente lo que debo hacer es obtener las coordenadas de un campo en el que se hizo clic y asignarle una "O". Además, cuando termine con eso, necesito tomar el valor de la matriz en el punto específico y cambiar el valor de lo que está en html para que pueda mostrar el movimiento.
"use strict"; const one = document.querySelector(".one"); const two = document.querySelector(".two"); const three = document.querySelector(".three"); const four = document.querySelector(".four"); const five = document.querySelector(".five"); const six = document.querySelector(".six"); const seven = document.querySelector(".seven"); const eight = document.querySelector(".eight"); const nine = document.querySelector(".nine"); let random1; let random2; let turn = true; const moves = [ ["", "", ""], ["", "", ""], ["", "", ""], ]; const makeMove = function (e) { e.preventDefault(); if (turn) { console.log("p1 made a move"); moves.push("O"); // ofc this doesnt work its here so that i see a move being made turn = !turn; } else { random1 = Math.trunc(Math.random() * 3); random2 = Math.trunc(Math.random() * 3); if (moves[random1][random2] !== "X" || "O") { moves[random1][random2] = "X"; console.log("p2 made a move"); console.log(moves); turn = !turn; return 0; } } }; // one.addEventListener("click", makeMove); two.addEventListener("click", makeMove); three.addEventListener("click", makeMove); four.addEventListener("click", makeMove); five.addEventListener("click", makeMove); six.addEventListener("click", makeMove); seven.addEventListener("click", makeMove); eight.addEventListener("click", makeMove); nine.addEventListener("click", makeMove);lo que debo hacer es obtener las coordenadas de un campo en el que se hizo clic y asignarle una "O"
Tienes que usar la información que recibes del evento "clic" para determinar en qué espacio hizo clic el jugador.
En su makeMove function , tiene e como parámetro, que es el evento de clic. Si escribe e.target , ese será el elemento HTML en el que hizo clic el jugador. Desde allí puedes escribir algo como e.target.textContent = "O"; , y eso pondrá una "O" en el espacio en el que el jugador hizo clic.
const makeMove = function (e) { e.target.textContent = "O"; }Además, cuando termine con eso, necesito tomar el valor de la matriz en el punto específico y cambiar el valor de lo que está en html para que pueda mostrar el movimiento.
Debe encontrar una manera de "vincular" los espacios en la página web a las posiciones específicas en la matriz de movimientos. Hay algunas maneras en las que puedes hacerlo, pero trabajaremos con lo que ya tienes.
Veo que le dio a los espacios nombres de clase como .one , .two , etc. Puede encontrar el nombre de clase del espacio en el que hizo clic el jugador usando classList en el elemento. Eso devolverá una DOMTokenList (un tipo especial de matriz) de todos los nombres de clase que tiene el elemento.
HTML: <div class="one"> </div> JavaScript: const makeMoves = function (e) { console.log(e.target.classList); //returns DOMTokenList: ["one"] }Con esa información, puede realizar una acción en un elemento de matriz específico, dependiendo de si el jugador hizo clic en el espacio correcto. Aquí hay un ejemplo:
const makeMove = function (e) { if (e.target.classList.includes("one")) moves[0] = "O"; if (e.target.classList.includes("two")) moves[1] = "O"; }element.classList tiene algunos métodos/funciones diferentes con los que puede jugar, solo búsquelo en Google.
No quiero darte la respuesta completa, ya que todavía estás aprendiendo. Hay diferentes formas de simplificar la información que proporcioné anteriormente y hay mejores formas de usar el evento de clic. Pero eso debería darte suficiente información para despegarte.
No estoy seguro si estás siguiendo un plan de estudios o estás aprendiendo completamente por tu cuenta. Pero busque en Google "Cómo manipular el DOM" y "eventos y controladores de eventos", y eso debería mostrarle todo lo que necesita. Buena suerte :)