I’m creating a script with NUI for a mini game of dragging images into a box, and when they are dragged, the game should end and proceed to the next mission. The problem is that when I click on the image, it shows the cursor for movement, but the image doesn’t actually move. It works in a regular web browser, but it doesn’t work in FiveM.
What could I be doing wrong?
My codes are:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Juego de arrastrar imágenes</title>
<style>
#recuadro {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 10px;
padding: 10px;
opacity: 0.5;
cursor: move;
}
.imagen {
width: 80px;
height: 80px;
margin: 10px;
cursor: move;
}
</style>
</head>
<body>
<div id="todoeljuego" style="display: none;">
<div id="recuadro"></div>
<img class="imagen" id="img1" src="ig/bebidacola.png" draggable="true">
<img class="imagen" id="img2" src="ig/bolsacarton.png" draggable="true">
<img class="imagen" id="img3" src="ig/cajahambur.png" draggable="true">
<img class="imagen" id="img4" src="ig/nugget.png" draggable="true"><br>
<img class="imagen" id="img5" src="ig/patatas.png" draggable="true">
<img class="imagen" id="img6" src="ig/bebidacola.png" draggable="true">
<img class="imagen" id="img7" src="ig/cajahambur.png" draggable="true">
</div>
<script type="text/javascript" src="./script.js" async="false"></script>
</body>
</html>
script js:
var recuadro = document.getElementById("recuadro");
var imagenes = document.querySelectorAll(".imagen");
var numImagenes = imagenes.length;
var contador = 0;
for (var i = 0; i < numImagenes; i++) {
imagenes[i].addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
imagenes[i].addEventListener("dragend", function(event) {
if (event.dataTransfer.dropEffect === "move") {
event.target.style.display = "none";
contador++;
if (contador === numImagenes) {
alert("¡Juego terminado!");
callback();
setTimeout(function() {
window.close();
}, 2000);
}
}
});
}
recuadro.addEventListener("dragover", function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
recuadro.style.backgroundColor = "#e0e0e0";
});
recuadro.addEventListener("dragleave", function(event) {
recuadro.style.backgroundColor = "white";
});
recuadro.addEventListener("drop", function(event) {
event.preventDefault();
var imagenId = event.dataTransfer.getData("text/plain");
var imagen = document.getElementById(imagenId);
recuadro.appendChild(imagen);
recuadro.style.backgroundColor = "white";
});
const callback = () => {
console.log('Juego de arrastrar y soltar completado');
// Envía un mensaje al servidor cuando el juego sea completado
fetch('http://${GetParentResourceName()}/iniciarJuegoTerminado', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
});
// Ocultar las imágenes al completar el juego
document.querySelectorAll(".imagen").forEach((imagen) => {
imagen.style.display = "none";
});
document.getElementById("todoeljuego").style.display = "none";
// Cerrar la ventana después de 2 segundos
setTimeout(function() {
window.close();
}, 2000);
};
window.addEventListener('message',(e) =>{
if(e.data.estado == 'showjuegomcmenu'){
document.getElementById("todoeljuego").style.display = "block";
}
});
thanks