drag drop小游戏
<!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小游戏的更多相关文章
- canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏- 前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...
- HTML5魔法堂:全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- Draggabilly – 轻松实现拖放功能(Drag & Drop)
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
- 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...
- 2048小游戏(Java)(swing实现)(二)
这里是上一次的成果,只能用鼠标点,没法用键盘 最近扩充了一下知识面,实现了用键盘操控2048小游戏 但是还是不支持同时使用键盘和鼠标同时操作 import javax.swing.*; //impor ...
- 2048小游戏(Java)(swing实现)(一)
自己写的2048小游戏,仅支持鼠标操作 主要是我不知道怎么添加键盘监听 import javax.swing.*; import java.awt.*; import java.awt.event.* ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【重点突破】——Drag&Drop拖动与释放
一.引言 在学习HTML5新特性的时候,学到了Drag&Drop这两种拖放API,这里根据拖动的是“源对象”还是“目标对象”做两个小练习,主要是为了理解与应用HTML5为拖放行为提供的7个事件 ...
- Chrome自带恐龙小游戏的源码研究(完)
在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...
随机推荐
- 关于Excle中的VLookUp的函数的使用
VLookUp函数的使用,VLookUp中的V是垂直的(vertical)意思,此外与此相类似的函数还有HLOOKUP(Horizonal水平的)意思. 下面主要谈谈VLookUp的使用方法. VLo ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- Java解析XMl文件之SAX和DOm方法
如题,这两种方法的jar包都在jdk中,不需要下载. 先来说下目录结构: 首先建一个Peron类封装person.xml的属性:DomParseService和SaxParseService分别为两种 ...
- Java Concurrency - Semaphore 信号量
Semaphore 是一个控制访问多个共享资源的计数器. 当一个线程想要访问某个共享资源,首先,它必须获得 semaphore.如果 semaphore 的内部计数器的值大于 0,那么 semapho ...
- Ehcache(2.9.x) - API Developer Guide, Cache Decorators
About Cache Decorators Ehcache uses the Ehcache interface, of which Cache is an implementation. It i ...
- 检测SqlServer服务器CPU是否瓶颈
初次写博文,分享个人心得,欢迎大虾小虾来拍砖. 系统自带的性能监视器 在开始命令框中输入perfmon按enter键即可打开性能监视器 可以通过监视 % Processor Time 的值察看cpu是 ...
- PHP学习笔记 - 进阶篇(1)
PHP学习笔记 - 进阶篇(1) 数组 数组定义 $arr = array();表示创建一个空数组,并把创建的空数组赋值给变量$arr. 索引数组初始化 PHP有两种数组:索引数组.关联数组. 索引和 ...
- iOS开发——时间格式类
目前只实现了三个类方法, 第一个获取当前时间,以字符创的形式返回,例如"201606161532" 第二个以当前时间与给定时间的时间差(秒) 第三个以当前时间与给定时间的时间差(分 ...
- 给label text 上色 && 给textfiled placeholder 上色
1.给label text 上色: NSInteger stringLength = ; stringLength = model.ToUserNickName.length; NSMutableAt ...
- iOS 非ARC基本内存管理系列 4-autorelease方法和@autoreleasepool
1.autorelease 基本用法 对象执行autorelease方法时会将对象添加到自动释放池中 当自动释放池销毁时自动释放池中所有对象作release操作 对象执行autorelease方法后自 ...