Question

你好，堆栈溢出团队！

我是Web开发的初学者，在开发简单的JS拖放游戏时遇到了一些问题。我将尽力解释这个小项目所面临的问题。

我不知道如何为游戏创建第二关。因此，一旦玩家提交了答案，就会出现下一个级别（相同的样式，只是身体部位不同）。我一直在Google上寻找答案，但似乎我只是不知道如何找到它，或者它不存在。
我要解决的另一个问题是，当您将图片拖到放置区时，我希望该图片显示在放置区而不是空白处。
我要解决的最后一个问题是，将目标拖动到放置区域时，除了“右侧”区域之外，无法将其放置在其他任何地方。如何进行更改，以便将目标放到任何放置区域？
最后一个问题是如何将所有元素保留在中间？我经常玩css，但我做不到。我尝试更改位置，并使用了以下属性：

左：50％；保证金权利：-50％；转换：translate（-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。对我的英语感到抱歉，这不是我的母语，但我尝试尽可能清晰。

提前谢谢！

JavaScript拖放游戏新水平

0 个答案: