<!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. 关于线程池ThreadPoolExecutor使用总结

    本文引用自: http://blog.chinaunix.net/uid-20577907-id-3519578.html 一.简介 线程池类为 java.util.concurrent.Thread ...

  2. [未完成]关于DOM的总结

    这样有什么好处吗? 一但这些东西变成了节点对象,意味着每一个节点对象都会有很多属性和行为提供出来. 如果div是一个对象,那么就可以针对这个对象调用其中的一些方法,对div操作. 这个操作可以包括,比 ...

  3. 晒下自己App广告平台积分墙收入，顺便点评几个广告平台

    这是我之前发在爱开发App源码论坛的文章.分享了我从2011年到现在移动广告方面的收入和一些心得. 产品类型:FC.街机模拟器类App游戏 广告平台:万普世纪 广告形式:积分墙,用户先试玩几次,再玩需 ...

  4. JAVA之经典Student问题1

    通过“三目运算符”求最大值与最小值. class student { //定义学生编号 private String stu; //学生姓名 private String name; //学生书信成绩 ...

  5. TFS2012常见问题及解答

    1.删除workItem工作项(包括Bug,用户场景,任务等) 需要利用到witadmin工具,目录在cd %programfiles%\Microsoft Visual Studio 11.0\Co ...

  6. Objective-C 【在手动内存管理中如何写set方法】

    ------------------------------------------- set方法的内存管理 代码: #import <Foundation/Foundation.h> @ ...

  7. CSS 样式二

    CSS文本样式 text-align:设置文本的对齐方式 取值: left 向左对齐 right:向右对齐 center:居中对齐 text-indent:设置文本的首行缩进 例如,字体设为12px, ...

  8. maven入门程序(二)

    这里就使用myeclipse简单创建一个实例程序. 一.创建项目 在myeclipse中创建项目选Maven Project,然后直接下一步用默认的项目空间.在archetype中选择quicksta ...

  9. 【Linux】rsync同步文件 & 程序自启动

    rsync使用 1. 为什么使用rsync? rsync解决linux系统下文件同步时, 增量同步问题. 使用场景: 线上需要定时备份数据文件(视频资源), 使用rsync完成每天的增量备份. 参见: ...

  10. apache和php扩展问题

    1.redis扩展: windows下开发用的xampp集成的环境,想装个php-redis扩展,扩展的github地址:  https://github.com/nicolasff/phpredis ...