<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style rel="stylesheet">

        .goods {

            width: 500px;

            border: 1px solid red;

            padding: 30px;

            height: 150px;;

        }

        .good {

            float: left;;

            margin: 10px 20px;;

            width: 100px;

            height: 100px;;

        }

        #one {

            background: green;

        }

        #two {

            background: black;

            color: #ffffff;

        }

        #three {

            background: pink;

        }

        .destination {

            width: 600px;;

            height: 500px;

            border: 1px solid deepskyblue;

        }

    </style>

</head>

<body>

默认顺序 1 2 3

<div class="goods">

    物品容器

    <div class="good" id="temp" data-type="one"> </div>

    <div class="good" id="" data-type="two">2</div>

</div>

仓库

<div class="destination">

</div>

<script type="text/javascript">

    //容器类

    function Container(obj) {

        this.goods = document.querySelectorAll(obj.goods) || [];

        this.rule = obj.rule || [];

        this.relSort = [];

        this.container = document.querySelector(obj.container) || document.body;

        this.ondrag = obj.ondrag || null;

        this.addEvent(this.goods);

        this.count = this.goods.length;

        this.success = obj.success || null;

        this.failed = obj.failed || null;

    }

    Container.prototype.compare = function (arr1, arr2) {

        var result = true;

        arr1.forEach(function (item, index) {

            if (item != arr2[index]) {

                result = false;

            }

        })

        return result;

    }

    Container.prototype.addEvent = function (goods) {

        var me = this;

        Array.prototype.forEach.call(goods, function (item) {

            item.setAttribute('draggable', true);

            item.ondragstart = function (e) {

                if (me.ondrag) {

                    e.dataTransfer.setData("id", e.target.id);

                    me.ondrag.call(me, e);

                }

            }

        });

        this.container.ondrop = function (e) {

            e.preventDefault();

            var source = e.dataTransfer.getData("id");

            e.target.appendChild(document.querySelector('#' + source));

            me.relSort.push(source);

            if (me.relSort.length == me.count) {

                if (me.compare(me.rule, me.relSort)) {

                    me.success && me.success.call(me);

                } else {

                    me.failed && me.failed.call(me);

                }

            }

        }

        this.container.ondragover = function (e) {

            e.preventDefault();

        }

    }

    var a = new Container({

        goods: '.good',//需呀拖动物体的选择器

        rule: ['one', 'two', 'three'], //正确的顺序

        container: '.destination',// 载体选择器

        ondrag: function (e) { //开始拖动事件

        },

        success: function () {//如果游戏成功 回调函数

            alert('你赢了');

        },

        failed: function () {//如果游戏失败 回调函数

            alert('游戏失败');

        }

    });

</script>

</body>

</html>

　　

drag drop小游戏的更多相关文章

  1. canvas drag 实现拖拽拼图小游戏

    博主一直心心念念想做一个小游戏-  前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...

  2. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  3. Draggabilly – 轻松实现拖放功能（Drag & Drop）

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  4. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

    Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...

  5. 2048小游戏（Java）（swing实现）（二）

    这里是上一次的成果,只能用鼠标点,没法用键盘 最近扩充了一下知识面,实现了用键盘操控2048小游戏 但是还是不支持同时使用键盘和鼠标同时操作 import javax.swing.*; //impor ...

  6. 2048小游戏（Java）（swing实现）（一）

    自己写的2048小游戏,仅支持鼠标操作 主要是我不知道怎么添加键盘监听 import javax.swing.*; import java.awt.*; import java.awt.event.* ...

  7. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【重点突破】——Drag&Drop拖动与释放

    一.引言 在学习HTML5新特性的时候,学到了Drag&Drop这两种拖放API,这里根据拖动的是“源对象”还是“目标对象”做两个小练习,主要是为了理解与应用HTML5为拖放行为提供的7个事件 ...

  9. Chrome自带恐龙小游戏的源码研究(完)

    在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...

随机推荐

  1. 【杨氏矩阵+勾长公式】POJ 2279 Mr. Young's Picture Permutations

    Description Mr. Young wishes to take a picture of his class. The students will stand in rows with ea ...

  2. 【转】测试用例设计——WEB通用测试用例

    现在项目做完了,我觉得还是有必要总结一下,学习到的内容.毕竟有总结才能有提高嘛!总结一下通用的东西,不管什么项目基本都可能会遇到,有写地方也有重复的或者有的是按照个人的习惯来总结的不一定都对,有不对的 ...

  3. 利用ADO方式连接SQLServer2008出现的问题

    在利用ADO方式连接SQLServer2008的过程中遇到了很多问题,在网上也没有找到许多有利的信息,花了两天时间,终于把所有问题都搞定了.在这里和大家分享一下经验,希望后来者能少走弯路. 很多教程说 ...

  4. Agile.Net 组件式开发平台 - 权限管理组件

    RBAC原则       (1)最小权限原则之所以被RBAC所支持,是因为RBAC可以将其角色配置成其完成任务所需要的最小的权限集.       (2)责任分离原则可以通过调用相互独立互斥的角色来共同 ...

  5. Unity User Group 北京站图文报道：《Unity3D VR游戏与应用开发》

    很高兴,能有机会回报Unity技术社区:我和雨松MOMO担任UUG北京站的负责人, 组织Unity技术交流和分享活动. 本次北京UUG活动场地–微软大厦 成功的UUG离不开默默无闻的付出:提前2小时到 ...

  6. 第三十一篇、iOS 9版本适配

    1.网络适配(强制回退HTTP) 为了强制增强数据访问安全, iOS9 默认会把 所有的http请求 所有从NSURLConnection . CFURL . NSURLSession发出的 HTTP ...

  7. select2 取值 赋值

    项目中心引入了select2的插件.优势:可以多选.搜索,缺点:存取值不如select方便. select2 取值: <script type="text/javascript&quo ...

  8. C#中String类的几个方法(IndexOf、LastIndexOf、Substring)

    String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. ...

  9. javascript笔记——js面试问题

    1:javascript中的变量提升(先使用再声明,js中的函数也存在函数提升) 2:js中的事件捕获和事件冒泡(是两个相反的过程) 3:js中的动画队列(比如animate动画没有在点击的时候阻止正 ...

  10. [Guava学习笔记]Basic Utilities: Null, 前置条件, Object方法, 排序, 异常

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3842433.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...