JavaScript перетащить игру на новый уровень

Question

Команда переполнения стека Hello!

Я новичок в веб-разработке, и у меня возникло несколько проблем во время работы над моей простой JS-игрой. Я постараюсь объяснить как можно яснее проблемы, с которыми я сталкиваюсь в этом маленьком проекте.

1. Я не могу понять, как сделать 2-й уровень для игры. Поэтому, как только игрок отправляет свои ответы, появляется следующий уровень (тот же стиль, только разные части тела). Я искал ответы в Google, но, похоже, я просто не знаю, как его найти, или его там нет.
2. Другая проблема, которую я хотел бы исправить, - это когда вы перетаскиваете изображение в зону перетаскивания, я хотел бы, чтобы это изображение появлялось в зоне перетаскивания вместо пустого пространства.
3. Последняя проблема, которую я хотел бы решить, это когда вы перетаскиваете цель в область сброса, вы не можете ее уронить нигде, кроме как в «правой» области. Как это изменить, чтобы вы могли уронить цель в любую зону сброса?

4. Последняя проблема - как удержать все элементы посередине? Я много играл с css, но просто не мог этого сделать. Я пытался изменить позиции, использовал эти свойства:

   осталось: 50%; наценка справа: -50%; трансформировать: переводить (-50%, -50%); Но это не работает ...

Вот код HTML, CSS и JS:

//CREATING VARIABLE TO INCREASE THE SCORE
var i = 0;
i++;

//SETTING UP THE ONDRAGSTART EVENT DATA/IMAGES THAT I WANT TO MOVE
function dragStart1(event) {
  event.dataTransfer.setData("text1", event.target.id);
}

function dragStart2(event) {
  event.dataTransfer.setData("text2", event.target.id);
}

function dragStart3(event) {
  event.dataTransfer.setData("text3", event.target.id);
}

//PREVENTING DEFAULT BROWSER SETTINGS SO IT WOULDNT ACT WEIRD
function dragOver1(event) {
  event.preventDefault();
}

function dragOver2(event) {
  event.preventDefault();
}

function dragOver3(event) {
  event.preventDefault();
}

//GETTING THE DATA/IMAGES I NEED WHEN IT IS BEING DROPPED ON THE DROP AREAS
function onDrop4(event) {
  var data = event.dataTransfer.getData("text1");
  event.target.appendChild(document.getElementById(data));
  dropArea1.innerHTML = "<img src=\"Img/heart.png\>";
  score.innerHTML = i++;
  //changing the style back to normal after dragging is done
  dropArea1.style.background = "";
  dropArea1.style.border = "";
}

function onDrop5(event) {
  var data = event.dataTransfer.getData("text2");
  event.target.appendChild(document.getElementById(data));
  dropArea2.innerHTML = "<img src=\"Img/lungs.png\>";
  score.innerHTML = i++;
  //changing the style back to normal after dragging is done
  dropArea2.style.background = "";
  dropArea2.style.border = "";
}

function onDrop6(event) {
  var data = event.dataTransfer.getData("text3");
  event.target.appendChild(document.getElementById(data));
  dropArea3.innerHTML = "<img src=\"Img/stomach.png\>";
  score.innerHTML = i++;
  //changing the style back to normal after dragging is done
  dropArea3.style.background = "";
  dropArea3.style.border = "";
}

//PREVENTING DEFAULT BROWSER SETTINGS FROM ACTING WEIRD
function onDrop1(event) {
  event.preventDefault();
}

function onDrop2(event) {
  event.preventDefault();
}

function onDrop3(event) {
  event.preventDefault();
}

//SETTING UP A FUNCTION FOR "SUBMIT" BUTTON TO ALERT CONGRATS MESSAGE
function submitAnsw() {
  if (i > 3) {
    alert("Congratulations! You know the main human organs!");
  } else {
    alert("You are very close! Don't give up!");
  }
}

//CHANGING THE STYLE OF THE DROP AREAS ONCE THE IMAGE IS BEING DRAGGED ON THEM
function dragEnter1(event) {
  event.preventDefault();
  dropArea1.style.background = "lightblue";
  dropArea1.style.border = "3px solid black";
}

function dragEnter2(event) {
  event.preventDefault();
  dropArea2.style.background = "lightblue";
  dropArea2.style.border = "3px solid black";
}

function dragEnter3(event) {
  event.preventDefault();
  dropArea3.style.background = "lightblue";
  dropArea3.style.border = "3px solid black";
}

//CHANGING THE STYLE OF DROPAREAS ONCE THE DRAGGABLE IMAGE LEAVES THE DROP AREA
function dragLeave1(event) {
  event.preventDefault();
  dropArea1.style.background = "lightskyblue";
  dropArea1.style.border = "3px solid #666666";
}

function dragLeave2(event) {
  event.preventDefault();
  dropArea2.style.background = "lightskyblue";
  dropArea2.style.border = "3px solid #666666";
}

function dragLeave3(event) {
  event.preventDefault();
  dropArea3.style.background = "lightskyblue";
  dropArea3.style.border = "3px solid #666666";
}

/* STYLE BY AURIMAS RANSYS */

.dropArea {
  float: left;
  width: 210px;
  height: 150px;
  margin: 12px;
  padding: 10px;
  border: 3px solid #666666;
  background-color: lightskyblue;
  border-radius: 10px;
  top: 15%;
}

.dragImg {
  float: left;
  width: 210px;
  height: 150px;
  margin: 12px;
  padding: 10px;
  border: 3px solid white;
  top: 100px;
}

img {
  width: 210px;
  height: 150px;
  cursor: move;
}

header {
  color: navy;
  position: absolute;
  top: 2%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

h1 {
  color: navy;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

p {
  color: navy;
  position: absolute;
  top: 11%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
}


/*
Code is available at https://www.bestcssbuttongenerator.com/#/38
 */

.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #caefab;
  -webkit-box-shadow: inset 0px 1px 0px 0px #caefab;
  box-shadow: inset 0px 1px 0px 0px #caefab;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
  background: -moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
  background: -webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
  background: -o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
  background: -ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
  background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811', GradientType=0);
  background-color: #77d42a;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #268a16;
  display: inline-block;
  cursor: pointer;
  color: #306108;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #aade7c;
}

.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
  background: -moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
  background: -webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
  background: -o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
  background: -ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
  background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a', GradientType=0);
  background-color: #5cb811;
}

.myButton:active {
  position: relative;
  top: 1px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Anatomy Game</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="main.js"></script>
</head>

<body>

  <!-- HEADER -->
  <header>Human Anatomy Game</header>
  <h1>Level 1</h1> <br><br><br><br><br><br>

  <!-- ADDING THE SCORE -->
  <p>Score: <text id="score">0</text> </p>


  <!-- IMAGES FOR DROPPING -->
  <div class="dragImg" ondrop="onDrop1(event)">
    <img src="Img/heart.png" ondragstart="dragStart1(event)" draggable="true" id="img1">
  </div>

  <div class="dragImg" ondrop="onDrop2(event)">
    <img src="Img/lungs.png" ondragstart="dragStart2(event)" draggable="true" id="img2">
  </div>

  <div class="dragImg" ondrop="onDrop3(event)">
    <img src="Img/stomach.png" ondragstart="dragStart3(event)" draggable="true" id="img3">
  </div>

  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


  <!-- IMAGES DROPZONE -->
  <div id="dropArea1" class="dropArea" ondrop="onDrop4(event)" ondragover="dragOver1(event)" ondragenter="dragEnter1(event)" ondragleave="dragLeave1(event)">HEART</div>
  <div id="dropArea2" class="dropArea" ondrop="onDrop5(event)" ondragover="dragOver2(event)" ondragenter="dragEnter2(event)" ondragleave="dragLeave2(event)">LUNGS</div>
  <div id="dropArea3" class="dropArea" ondrop="onDrop6(event)" ondragover="dragOver3(event)" ondragenter="dragEnter3(event)" ondragleave="dragLeave3(event)">STOMACH</div>

  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


  <!-- BUTTON TO SUBMIT YOUR SELECTIONS -->
  <button class="myButton" onclick="submitAnsw()">Submit</button>

</body>

</html>

Я был бы очень признателен за хороший отзыв и ответы на мои проблемы, так как это моя первая работа, и я хочу значительно улучшиться. Также я хотел бы включить библиотеки JS в этот проект, так что любой совет, как это сделать!

P.S. Я прошу прощения за мой английский, это не мой родной язык, но я старался быть максимально ясным.

Заранее спасибо!