Javascript物品分拣小游戏

使用JavaScript实现物品分拣小游戏

最新推荐文章于 2024-08-22 22:13:49 发布

原创

最新推荐文章于 2024-08-22 22:13:49 发布 · 743 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #div #游戏 #float #html

本文介绍如何利用JavaScript创建一款物品分拣小游戏。玩家需将传送带上的物品拖动到正确分类，通过touch事件处理触摸开始和结束，判断物品是否放置在正确位置。文章涉及HTML布局、CSS样式及JavaScript函数实现。

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