Estoy terminando mi proyecto de acorazado y quiero agregar imágenes de barcos. Antes, si un jugador coloca un barco en una determinada coordenada, solo cambio el color de los divs como indicación del barco que se está colocando. Ahora quiero colocar (agregar) imágenes dinámicamente.
<div class="gameBoard"> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> </div>El tablero div de arriba representa mi tablero en el dom. Y cada div representa cada casilla individual donde los jugadores se atacarán entre sí. Entonces, ¿cómo puedo agregar una imagen en, digamos, o más divs, para que la imagen abarque esos divs?
¿Algo como esto?
function addImage(a,b){ document.querySelectorAll(".grid")[a].style.background = "url(ship.jpg)"; document.querySelectorAll(".grid")[b].style.background = "url(ship.jpg)"; } <div class="grid" onclick='addImage(3,4)'></div>