<!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. [未完成][Mooc]关于IO总结

    整个课程的大纲:1.编码问题.2.File类的使用3.RandomAccessFile的使用4.字节流的使用.5.字符流的使用.6.对象的序列化和反序列化. 视频1:文件的编码Eclipse的一大特点 ...

  2. 【概率dp，难度3颗星】hdu-5001（2014鞍山网络赛）

    给你一个连通的无向图,等概率随机选取一个起点,走d步,每一步等概率走到相邻的点.问走完d步之后,每个点没有被经过的概率. 推状态的关键当然就是对这个“从任意起点走完d步点node没被经过的概率”的理解 ...

  3. Android混淆打包配置总结

    Android打包失败出现Proguard returned with error code 1. See console的错误 这个问题是由于代码混淆引起的,找不到引用包. 只需在你的proguar ...

  4. Jersey(1.19.1) - WebApplicationException and Mapping Exceptions to Responses

    Previous sections have shown how to return HTTP responses and it is possible to return HTTP errors u ...

  5. DOS批处理命令-goto命令

    goto是一个流程控制语句 rem goto语句是一个大家都不怎么喜欢的语句,因为他的随意性太强,导致可维护性大大的降低. 语法: goto [lable]   [lable]是bat程序中任意定义的 ...

  6. ios Swift 国外资源

    Swift国外资源汇总(No.1) 此类分享贴暂定每2天更新一次,主要目的是让大家能跟国外开发者们同步,共享知识和共同提高. 对于一些非常有价值的文章,大家有兴趣可以自行翻译(回贴跟我说一声,避免重复 ...

  7. mysql定时脚本（event），类似oracle的job

    mysql定时脚本(event),类似oracle的job   我有2张表:tb_push_data 和 tb_push_data_log 现在需要每隔一段时间将tb_push_data 符合条件的 ...

  8. 创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来，并显示出来

    /*4.创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来*/ #import <Foundation/Foundation.h>#defin ...

  9. Query 快速入门教程

    Query 快速入门教程 http://www.365mini.com/page/jquery-quickstart.htm#what_is_jquery jquery常用方法及使用示例汇总 http ...

  10. 对于Linux和windows的个人的看法

    对于这两个系统,我和众多朋友一样的纠结.接触Linux是从大二就开始的,后来在某机构学习该系统服务器的配置,当时使用的是红帽子9. 经过这么多年的感悟,做过多系统,也用来装过虚拟机,搭建过网络.曾经为 ...