汉诺塔html5游戏代码,用html5模拟的汉诺塔

今天学习html5拖动的时候突然想到可以用html5来模拟个汉诺塔，说做就做。以下是我的实现，比较简单勿喷，不过欢迎指正和探讨

.container{border:solid 1px black;width:200px; height:200px; padding:10px;}

.hanoi{border:solid 1px black; padding:5px;}

#hanoi3{width:150px; height:150px;}

#hanoi2{width:100px; height:100px;}

#hanoi1{width:60px; height:60px;}

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

var droper = document.getElementById(data);

if (droper.childElementCount == 0) { //判断是否是多个一起拖动，不是才可以进行拖动

if (droper.clientHeight < ev.target.clientHeight && droper.clientWidth < ev.target.clientWidth) {

ev.target.appendChild(document.getElementById(data));

}

else {alert("一次只能拖动一个汉诺塔");}

}

总结：html5还是很强大的，几个方法就能搞定拖动效果！！

汉诺塔html5游戏代码,用html5模拟的汉诺塔相关推荐

html5+游戏+广告,给html5 游戏添加admob广告挣钱盈利
给html5游戏添加admob广告挣钱盈利经过几年的发展,html5逐渐发展起来,特别是今年以来已经有不少html5游戏作品面世,作为开发者,如何通过html5游戏挣钱还是个问题. 这里就先介绍下通 ...
html5 游戏算法,JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...
html5游戏封装安卓,html5游戏移植到android并打包成apk，加广告《二》
html5游戏移植到android并打包成apk,加广告<二> 这篇则讲解开发集成,先看看工程目录结构 ? qqbrowser_sdk_v1.2.jar为X5内核sdk,下载注册开发者 B ...
js开发html5游戏,JS开发HTML5游戏《神奇的六边形》（五）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击这里可进入游戏体验) 因内容 ...
html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
五子棋游戏代码html,HTML5网页版黑白子五子棋游戏代码
特效描述:HTML5 网页版黑白子五子棋五子棋游戏. 通过原生js和canvas实现五子棋,可以试下左右手互搏代码结构 1. HTML代码 PK 您的浏览器不支持canvas var text = ...
html5游戏加入计时器,html5倒计时插件制作圆形计时器代码
特效描述:html5倒计时插件圆形计时器代码.计时器代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 jQuery计时器插件TimeCircles演示1 演示1(默认+美化) 演示2 ...
html5初学者小游戏源代码,html5游戏代码练习,跑动的小人儿！
HTML5跑动的小人您的浏览器不支持canvas标签,推荐您更换谷歌游览器,全面兼容html5. /** * Basic event handling object * @type {Object} ...
html5 游戏可视化编译,HTML5可视化编辑器工具
HTML5可视化编辑器工具是一款好用的且功能强大的编辑系统,操作简单,上手容易,没有编程知识一样可以使用,也能轻松生成html5页面,相当于是一款可视化编辑器,可兼容所有的框架,使用很灵活.有需要的小 ...

汉诺塔html5游戏代码,用html5模拟的汉诺塔

汉诺塔html5游戏代码,用html5模拟的汉诺塔相关推荐

最新文章

热门文章