我目前正在利用HTML的拖放功能开发一个JavaScript游戏。 我在这里尝试做的是允许将随机生成的水果图像拖放到果冻图像上。然后,如果拖动的图像符合条件集(当数字图像数组索引== x,而水果图像索引== y时),则允许其丢弃。 为了声明这个if语句,我从背景图片中获取值。 (如果数字的背景图像是x,而水果的背景图像是y) 在尝试为它设置条件之前,我的代码执行得很好。从逻辑上说,我不明白为什么在有if语句时为什么它不起作用,甚至不显示图像。
编辑:尝试使用===代替=,但仍然没有响应
编辑:在注释中删除分号后,其余代码执行正常。但是拖放不会响应。
编辑:图像url的声明变量,而不是直接在on drop函数中使用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>
答案 0 :(得分:0)
因此使此代码起作用。
我稍微修改了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>
答案 1 :(得分:0)
我还发现了一种更理想的测试方法。 我没有使用背景条件,而是使用if条件来测试拖动数据的ID是否与所需div的ID相匹配。 为此,我必须将所有图像放置在一个阵列中,并更改水果图像的随机生成,以确保始终获得每个阶段想要的图像。