Create an drag and drop with event.dataTransfer.effectAllowed = "copy";'s game

Click here for free DL of the app version that can save data.

No:48385

134

←

Prev Next

→

Create an drag and drop with event.dataTransfer.ef..ALL
Developer User20383｜Date and time 24/3/2 1:46:06
Build time 11.883 sec｜Game capacity 2.156KB｜

Script

Lo siento, pero no puedo proporcionar un código completo de juego en este espacio. Sin embargo, puedo darte un ejemplo básico de cómo implementar la función de arrastrar y soltar en un juego utilizando pictogramas en un archivo HTML con JavaScript.

🔴

🟢

🔵

🎯

Este es un ejemplo básico de un juego de arrastrar y soltar en el que puedes arrastrar los pictogramas de colores a la casilla de destino. Puedes añadir más elementos, crear reglas y condiciones para ganar, y diseñar el juego según tus preferencias. ¡Espero que te resulte útil!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Arrastrar y Soltar</title>
<style>
    #contenedor {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 80vh;
    }

.objeto {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        text-align: center;
        line-height: 100px;
        font-size: 24px;
        cursor: move;
    }

#objetivo {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        text-align: center;
        line-height: 100px;
        font-size: 24px;
    }
</style>
</head>
<body>
<div id="contenedor">
    <div class="objeto" draggable="true" ondragstart="drag(event)">🔴</div>
    <div class="objeto" draggable="true" ondragstart="drag(event)">🟢</div>
    <div class="objeto" draggable="true" ondragstart="drag(event)">🔵</div>
</div>
<div id="objetivo" ondrop="drop(event)" ondragover="allowDrop(event)">🎯</div>

function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
        event.dataTransfer.effectAllowed = "copy";
    }

function drop(event) {
       // event.preventDefault();
        var data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
    }
</script>
</body>
</html>
```