今天學習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模拟的汉诺塔的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。