<!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. [改善Java代码] 枚举项数量限定为64个以内

    建议89:枚举项的数量限制在64个以内 为了更好的使用枚举,java 提供了两个枚举集合:EnumSet和EnumMap,这两个集合的使用都比较简单,EnumSet表示其元素必须是某一枚举的枚举项,E ...

  2. Linux内核开发基础

    1.Linux内核简介 1.1.Linux系统如何构成 内核空间(Kernel Space)+用户空间(User Space) 用户空间 = 用户程序 + C语言库(例如:GNC C Library) ...

  3. SharePoint中 服务器发出意外响应。响应状态代码是"500"。

    原因是由于服务器内存不够.  

  4. 移动端开发的meta标签作用

    一.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  5. mvc Web api 如何在控制器中调用

    关于如何调用 mvc Web api 的方法,网上一搜就是一大把,基本都是在前台jq中调用的,但是如何在后台调用呢? 本楼主做了一下测试,仅供参考. 先写一个简单的api,如下:[域1] namesp ...

  6. Linux命令(6)：mv命令

    1.作用: 为文件或目录改名或将文件由一个目录移入另一个目录中 2.格式: mv  [选项] 源文件或目录 目标文件或目录 3.常见参数: 4.使用实例: [root@localhost ~]# mv ...

  7. iOS - 字典(NSDictionary)

    1. 字典类型的常用处理 //---------------不可变字典 //1.字典的创建 NSArray *array1 = [NSArray arrayWithObjects:@"zha ...

  8. self指向函数地址 动态调用函数的简单例子

    #import <Foundation/Foundation.h> @interface Person : NSObject - (void)test1; - (void)test2:(N ...

  9. Tomcat遇到的问题The Tomcat server configuration at ServersTomcat v5.5 Server at localhost-config is missing. Check..

    一.解决方法 删除Servers视图,重新创建一个即可.

  10. SpringMVC中注解和非注解方式下的映射器和适配器总结

    1. 非注解方式 1.1 处理器适配器 上一节中使用的处理器适配器是:org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapte ...