Simple Drag and Drop game

index.html

    <div id="wrapper">
        <header>
            <h2>Make your own scary monsters</h2>
            <p>Click and drag the different shapes to make Scary Monsters</p>
        </header>

        <div id="partsDiv">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037597/oci1_cqfbme.png" id="oci1" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037636/oci3_whfvnb.png" id="oci3" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037677/oci4_ifotv4.png" id="oci4" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037725/oci5_xrgjvg.png" id="oci5" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037773/oci6_ld3k3o.png" id="oci6" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037828/oci8_okko2w.png" id="oci8" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037880/oci2_yvcpxa.png" id="oci2" alt=""><br>
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037938/naocare_kiq5en.png" id="naocare" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622037983/naocare2_ncd6ou.png" id="naocare2" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038018/usta1_cgcbhc.png" id="usta1" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038061/usta2_cq4oty.png" id="usta2" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038103/usta4_wyucc8.png" id="usta4" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038150/usta5_ojgz55.png" id="usta5" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038193/usta6_qwksdh.png" id="usta6" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038237/usta7_dizafh.png" id="usta7" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038279/usta8_rxng7t.png" id="usta8" alt=""><br>
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038331/masna_bv3phj.png" id="masna" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038409/rogovi_wbb5ay.png" id="rogovi" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038474/rogovi2_wytbyk.png" id="rogovi2" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038609/sesir_tqqo7k.png" id="sesir" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038703/kosa_mntexq.png" id="kosa" alt="">
        </div>

        <div id="monsterDiv">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038760/monster3_uke3g2.png" id="monster1" draggable="false" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038822/monster2_dcyvm2.png" id="monster2" draggable="false" alt="">
            <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038878/monster4_q4mtxw.png" id="monster3" draggable="false" alt="">
        </div>
      
        <input type="button" class="btn" value="Reset">
    </div>

script.js

document.body.onload = function() {
  var monsterDiv = document.getElementById("monsterDiv");
  var partsDiv = document.getElementById("partsDiv");
  var parts = partsDiv.getElementsByTagName("img");
  var monsters = monsterDiv.getElementsByTagName("img");
  var itemIndex = 0;
  var xDistance = 0;
  var yDistance = 0;
  var foo = null;

  for (var i = 0; i < parts.length; i++) {
    parts[i].addEventListener("dragstart", dragstartFx, false);
  }

  function dragstartFx(event) {
    event.dataTransfer.setData("text", event.target.id);
    event.dataTransfer.effectAllow = "move";

    if (event.target.style.top === "") {
      partsDiv.style.backgroundColor = "rgba(255,255,255,0.04)";
    }

    xDistance = event.clientX - event.target.offsetLeft;
    yDistance = event.clientY - event.target.offsetTop;
  }

  for (i = 0; i < monsters.length; i++) {
    monsters[i].addEventListener("dragenter", dragenterFx, false);
  }
  function dragenterFx(event) {
    event.target.classList.toggle("active");
  }

  document.body.ondragover = function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
  };

  document.body.ondrop = function(event) {
    event.preventDefault();
    if (event.target.parentNode === monsterDiv) {
      event.target.classList.toggle("active");
    }
    var data = event.dataTransfer.getData("text");
    var itemMove = document.getElementById(data);
    partsDiv.style.backgroundColor = "rgba(255,255,255,0.31)";
    itemMove.className = "itemMove";

    itemMove.style.top = event.clientY - yDistance + "px";
    itemMove.style.left = event.clientX - xDistance + "px";

    itemMove.style.zIndex = itemIndex + 1;
    itemIndex = Number(itemMove.style.zIndex);
  };

  var heightPartsDiv = window.getComputedStyle(partsDiv).height;
  partsDiv.style.height = heightPartsDiv;
};

document.getElementsByClassName("btn")[0].onclick = function(e) {
    history.go(0);
};

simple-drag-and-drop-game.markdown

Simple Drag and Drop game

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.css

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgba(87, 190, 255, 1.00);
            background-image: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622038922/blue-bubbles-2-wallpaper-1280x1024-Copy_ot0v2x.jpg");
            background-size: cover;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        #wrapper {
            margin: 0 auto;
            width: 80%;
            user-select: none;
        }

        header {
            margin: 0 auto;
            text-align:center;
        }

        header h2 {
            margin-top: 50px;
            font: normal 38px/1 "Finger Paint", Helvetica, sans-serif;
            color: rgba(55, 55, 55, 1.00);
            text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.5);
        }

        header p {
            padding: 20px 0;
            font-size: 18px;
            color: #901d7e;
        }

        #partsDiv {
            border: 1px solid white;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.31);
            padding: 10px;
            margin-bottom: 30px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            align-content: space-around;
            overflow: hidden;
        }

        #partsDiv img {
            cursor: pointer;
            flex: 0 1 auto;
        }

        #monsterDiv {
            border: 1px solid white;
            padding-top:40px ;
            border-radius: 10px;
            text-align: center;
            position: relative;
        }

        #monsterDiv img {
            margin: 0 4%;
            z-index: -1;
            transition: transform .2s;
        }

        .itemMove {
            position: absolute;
        }

        .btn {
            float: right;
            outline: none;
            border: 1px solid #fff;
            padding: 10px 20px 10px 20px;
            margin: 20px 0;
            background-color: #901d7e;
            border-radius: 10px;
            color: #ffffff;
            font-size: 16px;
            transition: background-color .2s;
        }

        .btn:hover {
            background-color: #1858af;
        }

        .active {
            transform: rotate(2deg);
            transition: transform .2s;
        }