Я хочу немного взаимодействия в моей игре.В настоящее время я могу перетащить их через корзину, и они останутся там.Я хотел бы, чтобы они исчезли и оставили сообщение, в котором говорилось: «Да, вы правы или хорошо перерабатываете.Как мне это сделать?Я просто изучаю JavaScript, поэтому мне нужно просто.
Вот код, который у меня есть.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
}
#div1 {
width:478px;
height:331px;
padding:10px;
background-image:url(../Images/recycle_bin.png);
background-repeat:no-repeat;
vertical-align:middle;
margin:auto;
text-align:center;
position:absolute;
left:40%;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
.instructions {
font-family:Arial, Helvetica, sans-serif;
font-size:19px;
color:#255e02;
font-weight:bold;
line-height:12px;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div class="instructions">
<p>This is Ms. Mumford's Recycle Game. You will learn about recycling. Some items on this page cannot be recycled. Others can. </p>
<p>Drag the things that you can recycle to the recycle bin.</p>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div>
<img id="drag1" src="../Images/Mountaindew.png" draggable="true" ondragstart="drag(event)" />
<img id="drag2" src="../Images/snapple.png" draggable="true" ondragstart="drag(event)" />
<img id="drag3" src="../Images/newspaper.png" draggable="true" ondragstart="drag(event)" />
</div>
</body>
</html>