最近需要用javascript实现一个物品分拣的小游戏,游戏内容大致是:
在一条传送带上,传送着各种各样的物品,用手指将物品拖动到相应的分类上,类别相符则消去,不符则弹回到传送带上。
首先是内容的html代码,content是盒子的区域,而move则是指传送带的区域。
<body>
<section id="page_start" data-role="page">
<div id="content">
<div id="box_1">
</div>
<div id="box_2">
</div>
<div id="box_3">
</div>
<div id="box_4">
</div>
</div>
<div id="move">
</div>
</section>
</body>
对它们设定一些简单的样式:
<style type="text/css">
.elem
{
position: absolute;
width: 40px;
height: 40px;
left: 440px;
}
#content
{
height: 220px;
width: 480px;
background-color: silver;
}
#content div
{
width: 100px;
height: 220px;
margin-left: 10px;
margin-right: 10px;
float: left;
background-color: rgba(24, 24, 24, 0.6);
}
#move
{
height: 100px;
width: 480px;
background-color: black;
}
</style>
程序本身则包含三个定时器&