利用HTML5拖拽的功能，实现识别水果和蔬菜的幼儿辅助教育程序。
-
图形界面UI要求：
a.屏幕左上角显示得分，随着答题的正确+10分，满分100分。
b.屏幕中间有左右两个大区域，一个数蔬菜区域，一个是水果区域。
c.两个区域可以接受拖拽进来的图片
d.屏幕下方，随机出现蔬菜和水果的图片供10张，用户可以拖拽这些图片，放入上方的两个区域，来答题。
e.自定义提示框。游戏结束的时候出现。里面显示总得分，还有重新开始按钮。
-
逻辑要求：
a. 起始时，游戏得分0分。当用户进行答题后，相应的进行加分，答错不扣分。b. 当所有的10张图片都拖拽分类完毕后，显示最终结果。弹出提示框。
-
提交要求：
a. 提交所有的网页文件、图片文件等在内的程序问价。
参考原型
<!DOCTYPE html>
水果？蔬菜？
<br> #veg{<br> width: 400px;<br> height: 400px;<br> background-color:coral;<br> display: inline-block;<br> }<br> #fru{<br> width: 400px;<br> height: 400px;<br> background-color:deepskyblue;<br> display: inline-block;<br> }<br> .cube{<br> width: 50px;<br> height: 50px;<br> border:1px solid green;<br> display: inline-block;<br> margin: 20px 20px 0 0;<br> line-height: 50px;<br> text-align: center;<br> }<br> #aZone,#bZone{<br> margin: 0 auto;<br> width: 1000px;<br> }<br>
<div id="bZone">
</div>
<br>
<script>
var VEG = ["西红柿","黄瓜","大白菜","洋葱","白萝卜","茄子","山药","南北瓜","土豆","大蒜","冬瓜","姜","大葱","菌类","蒜薹","豆角","胡萝卜","生菜","芹菜","莴笋","菜花","椒类","红薯","西葫芦","菠菜","特菜","甘蓝","藕"];
var FRU = ["苹果","梨","西瓜","香蕉","木瓜","芒果","葡萄","猕猴桃","哈密瓜","甜瓜类","桃李杏","荔枝","樱桃"];
var ALL = VEG.concat(FRU);
window.onload = function(){
veg.ondragover = allowDrop;
veg.ondrop = drop;
fru.ondragover = allowDrop;
fru.ondrop = drop;
for(var i=0; i<10; i++){
var newDiv = document.createElement("div");
newDiv.className = "cube";
newDiv.setAttribute("draggable", true);
newDiv.ondragstart = drag;
newDiv.id = "d" + i;
bZone.appendChild(newDiv);
var word = ALL[Math.floor(Math.random()*ALL.length)];
newDiv.innerHTML = word;
}
}
function drag(e){
e.dataTransfer.setData("sid", e.target.id);
}
function drop(e){
var that = e.dataTransfer.getData("sid");
var thatDrop = document.getElementById(that);
// e是事件，e.target是发生在什么里面，这里的里面就是要接受落下的区域
e.target.appendChild(thatDrop);
e.preventDefault(); // 默认不允许坠入，这里允许坠入
}
function allowDrop(e){
e.preventDefault(); // prevent方式 default默认情况 规避默认的不允许移动的要求，变成可以移动
}
</script>
