Javascript物品分拣小游戏

最新推荐文章于 2022-05-06 19:09:56 发布

俊涛

最新推荐文章于 2022-05-06 19:09:56 发布

阅读量667

点赞数

文章标签： javascript function div 游戏 float html

本文链接：https://blog.csdn.net/kyleven/article/details/7109758

版权

最近需要用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>

程序本身则包含三个定时器&

最低0.47元/天解锁文章

俊涛

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Javascript物品分拣小游戏

最近需要用javascript实现一个物品分拣的小游戏，游戏内容大致是:在一条传送带上，传送着各种各样的物品，用手指将物品拖动到相应的分类上，类别相符则消去，不符则弹回到传送带上。首先是内容的html代码，content是盒子的区域，而move则是指传送带的区域。
复制链接

扫一扫