JavaScript拖放游戏新关卡
你好，堆栈溢出团队 我是web开发的初学者，在开发简单的JS拖放游戏时遇到了一些问题。我将尽可能清楚地解释我在这个小项目中面临的问题JavaScript拖放游戏新关卡,javascript,html,css,drag-and-drop,Javascript,Html,Css,Drag And Drop,你好，堆栈溢出团队 我是web开发的初学者，在开发简单的JS拖放游戏时遇到了一些问题。我将尽可能清楚地解释我在这个小项目中面临的问题 我想不出如何在游戏中达到第二关。因此，一旦玩家提交了他的答案，下一个级别就会出现（相同的风格，只是不同的身体部位）。我在谷歌上寻找答案，但似乎我只是不知道如何找到它，或者它不在那里 我想解决的另一个问题是，当您将图片拖动到拖放区域时，我希望该图片显示在拖放区域上，而不是空白区域 我想解决的最后一个问题是，当您将目标拖到拖放区域时，您不能将其拖放到除“右侧”区域之外
//创建变量以增加分数
var i=0；
i++；
//设置要移动的ONDRAGSTART事件数据/图像
函数dragStart1（事件）{
event.dataTransfer.setData（“text1”，event.target.id）；
}
函数dragStart2（事件）{
event.dataTransfer.setData（“text2”，event.target.id）；
}
函数dragStart3（事件）{
event.dataTransfer.setData（“text3”，event.target.id）；
}
//阻止默认浏览器设置，使其不会出现异常行为
功能dragOver1（事件）{
event.preventDefault（）；
}
功能dragOver2（事件）{
event.preventDefault（）；
}
功能dragOver3（事件）{
event.preventDefault（）；
}
//将数据/图像拖放到拖放区域时获取所需的数据/图像
功能onDrop4（事件）{
var data=event.dataTransfer.getData（“text1”）；
event.target.appendChild（document.getElementById（数据））；
dropArea1.innerHTML=“”；
score.innerHTML=i++；
//完成拖动后，将样式更改回正常
dropArea1.style.background=“”；
dropArea1.style.border=“”；
}
功能onDrop5（事件）{
var data=event.dataTransfer.getData（“text2”）；
event.target.appendChild（document.getElementById（数据））；
dropArea2.innerHTML=“”；
score.innerHTML=i++；
//完成拖动后，将样式更改回正常
dropArea2.style.background=“”；
dropArea2.style.border=“”；
}
功能onDrop6（事件）{
var data=event.dataTransfer.getData（“text3”）；
event.target.appendChild（document.getElementById（数据））；
dropArea3.innerHTML=“”；
score.innerHTML=i++；
//完成拖动后，将样式更改回正常
dropArea3.style.background=“”；
dropArea3.style.border=“”；
}
//防止默认浏览器设置行为怪异
功能onDrop1（事件）{
event.preventDefault（）；
}
功能onDrop2（事件）{
event.preventDefault（）；
}
功能onDrop3（事件）{
event.preventDefault（）；
}
//设置“提交”按钮的功能，以提醒祝贺消息
函数submitAnsw（）{
如果（i>3）{
警惕（“祝贺你！你知道人体的主要器官！”）；
}否则{
警惕（“你们很接近！不要放弃！”）；
}
}
//在拖放图像后更改拖放区域的样式
功能dragEnter1（事件）{
event.preventDefault（）；
dropArea1.style.background=“浅蓝色”；
dropArea1.style.border=“3px纯黑”；
}
功能dragEnter2（事件）{
event.preventDefault（）；
dropArea2.style.background=“浅蓝色”；
dropArea2.style.border=“3px纯黑”；
}
功能dragEnter3（事件）{
event.preventDefault（）；
dropArea3.style.background=“浅蓝色”；
dropArea3.style.border=“3px纯黑”；
}
//可拖动图像离开放置区域后更改放置区域的样式
功能dragLeave1（事件）{
event.preventDefault（）；
dropArea1.style.background=“lightskyblue”；
dropArea1.style.border=“3px solid#666666”；
}
功能dragLeave2（事件）{
event.preventDefault（）；
dropArea2.style.background=“lightskyblue”；
dropArea2.style.border=“3px solid#666666”；
}
功能dragLeave3（事件）{
event.preventDefault（）；
dropArea3.style.background=“lightskyblue”；
dropArea3.style.border=“3px solid#666666”；
}