<!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:多种最值算法,适时选择. 对一批数据进行排序,然后找出其中的最大值或最小值,这是基本的数据结构知识.在Java中我们可以通过编写算法的方式,也可以通过数组先排序再取值的方式来实现.下面以求最 ...

  2. 关于Object[]数组强转成Integer[]类型的数组.

    为什么不能由Object[]数组强转成Integer[]数组. Object[] ins= { new Integer(0), new Integer(1), new Integer(2), new ...

  3. Sqlite官方下载对应版本注意细节

    官网下载地址: http://system.data.sqlite.org/index.html/doc/trunk/www/downloads.wiki 下载注意事项: 1.对应.net平台 2.对 ...

  4. js学习笔记—转载（闭包问题）

    ---恢复内容开始--- 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.     一.变量的作用域 要理解闭包,首先必须理解Javascrip ...

  5. jBPM - Eclipse 安装 jBPM 插件

    假设 jBPM 包的解压路径为 E:/jbpm-installer,Eclipse 的安装目录为 E:/eclipse. 安装 jBPM 插件 1. 将 E:/jbpm-installer/lib 目 ...

  6. 诡异的问题“该字符串未被识别为有效的 DateTime”

    问题描述:"该字符串未被识别为有效的 DateTime"这个异常相信大家都会碰到,但是这一次真的无法理解,服务器运行一段时间之后才会出现这个问题,并且是系统中所有和日期相关的模块, ...

  7. javascript笔记—— call 简单理解

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...

  8. Session 的配置和特性

    session的配置 对于session的配置是php.ini中配置 session数据都是保存在文本文件中 设置session文件的保存位置 说明:     默认是保存在windows/temp目录 ...

  9. vim 跳转命令

    基本跳转: hjkl:左下上右 HML:当前屏幕顶.中.底部 web:下一单词词首.下一单词词尾.前一单词词首 gg:文件首  G:文件末尾  ngg/nG:第n行 ta:移动到所在行之后第一个字符a ...

  10. 《C++ Qt 设计模式》8|15拼图 小游戏的简单实现。拜托，别乱点！

    第零章:介绍 看到这个游戏了,感觉蛮好玩的,实现了一下. 界面如下: 游戏玩法:在3×*3的矩阵中,每个按钮都可以点击,如果按钮四周有一个是空白,则点击此按钮则会移动到这个空白.按钮字母顺序变成“AB ...