Перетащите Javascript, если проблема - PullRequest
Новая
       14

Перетащите Javascript, если проблема

1 голос
/ 02 мая 2019

В настоящее время я разрабатываю javascript-игру, использующую функцию перетаскивания HTML.Я пытаюсь сделать так, чтобы случайно сгенерированные изображения фруктов можно было перетаскивать на изображение желе.Затем, если перетаскиваемое изображение соответствует установленному условию (то есть, когда индекс массива числовых изображений == x, а индекс фруктового изображения == y), разрешите его сброс.И для того, чтобы объявить это, если заявление, я беру значение из фонового изображения.(Если фоновое изображение числа равно x, а фоновое изображение фруктов - y) Мой код выполнялся нормально, пока я не попытался установить для него условие.И логически я не понимаю, почему это не будет работать, если к нему есть оператор if, он даже не будет отображать изображения.

Редактировать: попытался использовать === вместо =, все еще не отвечает

Редактировать: после удаления точки с запятой, как в комментарии, остальная часть кода выполняется нормально.Однако перетаскивание не будет отвечать.

Редактировать: объявленные переменные URL-адресов изображений вместо использования URL-адресов непосредственно в функции перетаскивания.Перетаскивание по-прежнему не работает. 

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';

var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
var numberImage2 =  "url(" + numberAddress + myNumber[1] + ")";
var numberImage3 =  "url(" + numberAddress + myNumber[2] + ")";
var numberImage4 =  "url(" + numberAddress + myNumber[3] + ")";
var numberImage5 =  "url(" + numberAddress + myNumber[4] + ")";
var numberImage6 =  "url(" + numberAddress + myNumber[5] + ")";
var numberImage7 =  "url(" + numberAddress + myNumber[6] + ")";
var numberImage8 =  "url(" + numberAddress + myNumber[7] + ")";
var numberImage9 =  "url(" + numberAddress + myNumber[8] + ")";



var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';

fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';

fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';

var apple3 = "url(" + fruit1Address + fruitCloudOne[0] + ")";
var banana3 = "url(" + fruit1Address + fruitCloudOne[1] + ")";
var blueberry3 = "url(" + fruit1Address + fruitCloudOne[2] + ")";
var plum3 = "url(" + fruit1Address + fruitCloudOne[3] + ")";
var strawberry3 = "url(" + fruit1Address + fruitCloudOne[4] + ")";

var apple5 = "url(" + fruit1Address + fruitCloudOne[5] + ")";
var banana5 = "url(" + fruit1Address + fruitCloudOne[6] + ")";
var blueberry5 = "url(" + fruit1Address + fruitCloudOne[7] + ")";
var plum5 = "url(" + fruit1Address + fruitCloudOne[8] + ")";
var strawberry5 = "url(" + fruit1Address + fruitCloudOne[9] + ")";

var apple8 = "url(" + fruit1Address + fruitCloudOne[10] + ")";
var banana8 = "url(" + fruit1Address + fruitCloudOne[11] + ")";
var blueberry8 = "url(" + fruit1Address + fruitCloudOne[12] + ")";
var plum8 = "url(" + fruit1Address + fruitCloudOne[13] + ")";
var strawberry8 = "url(" + fruit1Address + fruitCloudOne[14] + ")";



var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';

fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';

fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';

var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";

var apple2 = "url(" + fruit2Address + fruitCloudTwo[5] + ")";
var banana2 = "url(" + fruit2Address + fruitCloudTwo[6] + ")";
var blueberry2 = "url(" + fruit2Address + fruitCloudTwo[7] + ")";
var plum2 = "url(" + fruit2Address + fruitCloudTwo[8] + ")";
var strawberry2 = "url(" + fruit2Address + fruitCloudTwo[9] + ")";

var apple4 = "url(" + fruit2Address + fruitCloudTwo[10] + ")";
var banana4 = "url(" + fruit2Address + fruitCloudTwo[11] + ")";
var blueberry4 = "url(" + fruit2Address + fruitCloudTwo[12] + ")";
var plum4 = "url(" + fruit2Address + fruitCloudTwo[13] + ")";
var strawberry4 = "url(" + fruit2Address + fruitCloudTwo[14] + ")";



var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';

fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';

fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';

var apple6 = "url(" + fruit3Address + fruitCloudThree[0] + ")";
var banana6 = "url(" + fruit3Address + fruitCloudThree[1] + ")";
var blueberry6 = "url(" + fruit3Address + fruitCloudThree[2] + ")";
var plum6 = "url(" + fruit3Address + fruitCloudThree[3] + ")";
var strawberry6 = "url(" + fruit3Address + fruitCloudThree[4] + ")";

var apple7 = "url(" + fruit3Address + fruitCloudThree[5] + ")";
var banana7 = "url(" + fruit3Address + fruitCloudThree[6] + ")";
var blueberry7 = "url(" + fruit3Address + fruitCloudThree[7] + ")";
var plum7 = "url(" + fruit3Address + fruitCloudThree[8] + ")";
var strawberry7 = "url(" + fruit3Address + fruitCloudThree[9] + ")";

var apple9 = "url(" + fruit3Address + fruitCloudThree[10] + ")";
var banana9 = "url(" + fruit3Address + fruitCloudThree[11] + ")";
var blueberry9 = "url(" + fruit3Address + fruitCloudThree[12] + ")";
var plum9 = "url(" + fruit3Address + fruitCloudThree[13] + ")";
var strawberry9 = "url(" + fruit3Address + fruitCloudThree[14] + ")";



//random generation of number and fruits & display
var numberAddress = 'Assets/Numbers/';

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";

//refresh fruit images
function refreshFruits() {
    var fruit1Address = 'Assets/FruitCloud1/';
    var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
    var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    var fruit2Address = 'Assets/FruitCloud2/';
    var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
    var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    var fruit3Address = 'Assets/FruitCloud3/';
    var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
    var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}

//display number and three fruit images
function startGame() {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    document.getElementById("number").style.backgroundImage = numberImage1;

    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}


    
function dragOver(ev) {
    ev.preventDefault();
}

function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}

function onDrop(ev) {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
    var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
    var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
    var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
    var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";
    
    ev.preventDefault();
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == apple1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == banana1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == blueberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == plum1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == strawberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}

#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}

#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}

#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}

#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}

#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}

#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}

#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}

#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}
<!DOCTYPE html>

<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="script.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- 
<a id="download" href="index.html"></a>--->
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>

<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)"></div>

<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)"></div>
</div>

<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
</body>
    
</html>

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

Я также нашел более идеальный способ проверить это.Вместо тестирования фоновых изображений я использовал условие if, чтобы проверить, совпадает ли идентификатор перетаскиваемых данных с идентификатором нужного элемента div.Для этого мне пришлось собрать все изображения в один массив и изменить случайную генерацию изображений фруктов, чтобы быть уверенным, что я всегда получу желаемое изображение для каждой стадии.

0 голосов
/ 02 мая 2019

Итак, этот код работает.

Я немного изменил оператор if, оказалось, что в нем произошла ошибка типа. Я добавил несколько операторов журнала консоли, чтобы вы могли увидеть результат. Перетаскивание работает, когда условия совпадают, из-за случайной генерации мне приходилось часто обновлять экран во время тестирования, чтобы получить падение. Идея классная и нестандартная, но может потребоваться некоторый рефакторинг, чтобы помочь минимизировать код и обеспечить читабельность. При рассмотрении примера вам нужно будет показать его в полноэкранном режиме, потому что он объединяет все вместе ...

Надеюсь, это поможет 

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';


var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';
fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';
fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';


var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';
fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';
fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';


var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';
fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';
fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';


//random generation of number and fruits & display

var numberAddress = 'Assets/Numbers/';
var numberIndex = 0;
var fruitOneIndex = 0;
var fruitTwoIndex = 0;
var fruitThreeIndex = 0;

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));


function refreshFruits() {
  var fruit1Address = 'Assets/FruitCloud1/';
  var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  var fruit2Address = 'Assets/FruitCloud2/';
  var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  var fruit3Address = 'Assets/FruitCloud3/';
  var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}


function startGame() {
  document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[numberIndex] + ")";

  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}



function dragOver(ev) {
  ev.preventDefault();
}

function dragStart(ev) {
  ev.dataTransfer.setData("fruit", ev.target.id);
}

//PROBLEM ARISE HERE
function onDrop(ev) {
  ev.preventDefault();
  console.log(document.getElementById("number").style.backgroundImage);
  console.log("What we are expecting to see " + document.getElementById("fruit2").style.backgroundImage );
  console.log("What we are getting " + 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")');
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[numberIndex] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")') {
    var data = ev.dataTransfer.getData("fruit");
    ev.target.appendChild(document.getElementById(data));
    console.log('finally got one');
  }else{
    console.log('Try Again');
  }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
  }
  
  #background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
  }
  
  #number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
  }
  
  #fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
  }
  
  #fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
  }
  
  #fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
  }
  
  #fruit1 {
    position: absolute;
    top: 0px;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rosybrown;
  }
  
  #fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: aqua;
  }
  
  #fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  #jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
    background-color: white;
  }
  
  #startGame {
    width: 80px;
    height: 80px;
    background-color: green;
  }
  
  #refreshFruits {
    width: 80px;
    height: 80px;
    background-color: blue;
  }
  
  
<html>

<head>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="script.js"></script>
  <title>This is an experiment.</title>

</head>

<body>

  <button id="startGame" onclick="startGame()">Start</button>
  <button id="refreshFruits" onclick="refreshFruits()">Refresh</button>

  <div id="number"></div>

  <div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)">Jelly</div>

  <div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)">Fruit 1</div>
  </div>

  <div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)">Fruit 2</div>
  </div>

  <div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)">Fruit 3</div>
  </div>

</body>

<html>
...