`
bcyy
  • 浏览: 1823894 次
文章分类
社区版块
存档分类
最新评论

使用HTML5的drag&drop做一个数独游戏

 
阅读更多

数独是很好玩的游戏，之前我用jQuery做了一个数独游戏，因为用javaScript来实现drag和drap非常麻烦，jQuery的UI提供了一套非常不错的drag和drap（以后就简称DnD算了），方便我们开发。现在HTML5支持原生的DnD了，那我们来学习下，并且将原先的数独游戏迁移到HTML5的DnD应用来。


先简单的了解下HTML5的DnD事件模型，事件发生在源元素（被拖动的元素）和目标元素（被进入的元素）上，为了简单的描述，我们将源元素称为src，目标元素叫des。

drag：src[拖动中] dragstart：src[开始拖动]
dragenter：des[进入目标]
dragover：des[在目标移动]
dragleave：des[离开目标]
drop：des[释放拖动]
dragend：src[拖动完成]
所有的事件我们知道肯定都应该给我们一个event对象，帮助我们获得一些信息或我们来设置一些信息，以上事件都可以得到一个event，如果我们的事件函数是function(e)那

e.dataTransfer.effectAllowed，只能在dragstart事件设置，值为以下之一："none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized"

e.dataTransfer.dropEffect，返回拖来的行为，对应上面的effectAllowed，值是："none", "copy", "link", and "move"

e.target，可以得到当前事件的dom对象，比如你可以得到e.target.innerHTML，或者设置e.target.classList.add，或者e.target.classList.remove

e.dataTransfer.setData(foramt,value)，为拖动赋值，foramt的值是为了描述值的类型，一般有text/plain 和text/uri-list

e.dataTransfer.getData(foramt)，获取被拖来的元素通过setData存储的值

e.stopPropagation，阻止事件冒泡，这样可以防止子元素的拖动处理被带到父元素事件中（触发父元素事件），在IE中可以用e.cancelBubble = true

e.preventDefault，阻止默认事件发生，也可以简单的写return false，在IE中可以用e.returnValue = false

有了上面的基本概念，我们先做一个小小的模型，来测试几个技术要点：监视拖放事件，改变元素在拖放中的样式，传递值和检查值什么的

在body里面，我们声明了10个div元素，并且都标记允许拖放

  1. <body>
  2. <divstyle="width:50px;height:50px;background-color:Red;"draggable="true">
  3. 1
  4. </div>
  5. <divstyle="width:50px;height:50px;background-color:Yellow;"draggable="true">
  6. 2
  7. </div>
  8. <divstyle="width:50px;height:50px;background-color:Blue;"draggable="true">
  9. 3
  10. </div>
  11. <divstyle="width:50px;height:50px;background-color:Lime;"draggable="true">
  12. 4
  13. </div>
  14. <divstyle="width:50px;height:50px;background-color:Maroon;"draggable="true">
  15. 5
  16. </div>
  17. <divstyle="width:50px;height:50px;background-color:Black;"draggable="true">
  18. 6
  19. </div>
  20. <divstyle="width:50px;height:50px;background-color:Orange;"draggable="true">
  21. 7
  22. </div>
  23. <divstyle="width:50px;height:50px;background-color:Olive;"draggable="true">
  24. 8
  25. </div>
  26. <divstyle="width:50px;height:50px;background-color:Teal;"draggable="true">
  27. 9
  28. </div>
  29. <divstyle="width:50px;height:50px;background-color:Green;"draggable="true">
  30. 10
  31. </div>
  32. </body>
现在我们想做一个应用，只有相互有倍数关系的div之间才可用拖放。

首选我们做一个用于输出调式的小工具代码

  1. $.log=function(msg){
  2. console.log(msg);
  3. }
这个我们可以方便的$.log()输出，而不要写冗长的console.log了

第一步，编写dragStart事件函数

  1. functionhandleDragStart(e){
  2. this.style.opacity="0.5";
  3. e.dataTransfer.effectAllowed="move";
  4. e.dataTransfer.setData("text/plain",this.innerHTML);
  5. //$.log(this.innerHTML);
  6. //$.log(e.target.innerHTML);
  7. //$.log(e.srcElement.innerHTML);
  8. [].forEach.call(document.querySelectorAll("div"),
  9. function(item){
  10. vara=parseInt(e.target.innerHTML);
  11. varb=parseInt(item.innerHTML);
  12. if(a%b!=0&&b%a!=0){
  13. item.style.opacity="0.1";
  15. }
  16. });
  17. }
以上的代码有几个要点

1 对事件来讲this、e.target和e.srcElement都是同一对象

2 在forEach中，this是指item，所以forEach中，我们要用e.target来引用



但是一测试我们就发现虽然元素可以拖拉，但并没有事件激活，那是应为我们没有为元素绑定事件，所以现在我们用addEventListener来将元素和事件绑定

  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. }
  7. );
  8. }
  9. );
现在我们可以看到，当任意元素拖动的时候，不和其元素有相互倍数的元素变了很淡了。

第二步，当我们拖放完成后，所有div恢复原先颜色，那自然是编写handleDragEnd

  1. functionhandleDragEnd(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. [].forEach.call(document.querySelectorAll("div"),
  6. function(item){
  7. item.style.opacity="1";
  8. }
  9. );
  10. }
记得将上面的事件做绑定哦，应该类似以下代码
  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. item.addEventListener("dragend",handleDragEnd,false);
  7. }
  8. );
  9. }
  10. );
第三步，我们要通知那些互为倍数的元素允许我们做拖入操作

我们先需要为目标元素定义些事件函数

  1. functionhandleDragEnter(e){
  2. $.log(e);
  3. }
  5. functionhandleDragOver(e){
  6. if(e.preventDefault){
  7. e.preventDefault();//不要执行与事件关联的默认动作
  8. }
  9. if(e.stopPropagation){
  10. e.stopPropagation();//停止事件的传播
  11. }
  12. $.log(e);
  13. returnfalse;
  14. }
  17. functionhandleDragLeave(e){
  18. $.log(e);
  19. }
  21. functionhandleDrop(e){
  22. if(e.preventDefault){
  23. e.preventDefault();//不要执行与事件关联的默认动作
  24. }
  25. if(e.stopPropagation){
  26. e.stopPropagation();//停止事件的传播
  27. }
  28. console.log(e);
  29. returnfalse;
  30. }

注意我们使用了preventDefault和stopPropagation消除了浏览器默认的一些动作。

显然这些事件不是所有的元素都有的，只有互为倍数才有，所以我们要去修改handleDragStart函数了

修改后的代码大致如下

  1. functionhandleDragStart(e){
  2. this.style.opacity="0.5";
  3. e.dataTransfer.effectAllowed="move";
  4. e.dataTransfer.setData("text/plain",this.innerHTML);
  5. //$.log(this.innerHTML);
  6. //$.log(e.target.innerHTML);
  7. //$.log(e.srcElement.innerHTML);
  8. //$.log(this.innerHTML);
  9. [].forEach.call(document.querySelectorAll("div"),
  10. function(item){
  11. vara=parseInt(e.target.innerHTML);
  12. varb=parseInt(item.innerHTML);
  13. if(a%b!=0&&b%a!=0){
  14. item.style.opacity="0.1";
  15. }
  16. else{
  17. item.addEventListener("dragover",handleDragOver,false);
  18. item.addEventListener("dragenter",handleDragEnter,false);
  19. item.addEventListener("dragleave",handleDragLeave,false);
  20. item.addEventListener("drop",handleDrop,false);
  21. }
  22. });
  23. }
现在你可以发现，当我们拖动互为倍数的元素是，视觉效果明显是允许拖入，否则就不允许了。当然记得在handleDragEnd函数中要恢复哦
  1. functionhandleDragEnd(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. [].forEach.call(document.querySelectorAll("div"),
  6. function(item){
  7. item.style.opacity="1";
  8. item.removeEventListener("dragover",handleDragOver,false);
  9. item.removeEventListener("dragenter",handleDragEnter,false);
  10. item.removeEventListener("dragleave",handleDragLeave,false);
  11. item.removeEventListener("drop",handleDrop,false);
  12. }
  13. );
  14. }
第四步，当我们在可以放置的元素上结束拖放后，我们希望两个元素的值累计，并出现在被放置的元素里面，我们需要修改handleDrop函数
  1. functionhandleDrop(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. if(e.stopPropagation){
  6. e.stopPropagation();//停止事件的传播
  7. }
  8. this.innerHTML=parseInt(this.innerHTML)+parseInt(e.dataTransfer.getData("text/plain"))
  9. console.log(e);
  10. returnfalse;
  11. }
好了，到现在为止，准备知识都差不多了，而且作品我们也可以得意的玩玩，你可以发现div被累计都，再次拖拉的时候，是重新计算相互的倍数的，对不？

最后，我感觉黑色的字不好看，我们修改下初始化的函数

  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. item.addEventListener("dragend",handleDragEnd,false);
  7. item.style.color="White";
  8. }
  9. );
  10. }
  11. );


好了，现在这个无聊的拖动作品，至少可以打发下你的时间，对不，欣赏下自己的作品吧，接下来，我们开始做正式做数独游戏了。

第一步，我们先生成一个1-9的数字对象矩形，这个矩形可以拖动。

先设计htmltag

  1. <olid="numberBox"style="list-style-type:none;width:90px;height:90px;">
  2. </ol>
然后准备些样式
  1. #numberBox>li
  2. {
  3. width:30px;
  4. height:25px;
  5. text-align:center;
  6. font-size:20px;
  7. padding-top:5px;
  8. float:left;
  9. color:White;
  10. }
最后是脚本
  1. $(
  2. function(){
  3. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  4. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  5. {number:6,bgcolor:"rgb(255,165,0)"},
  6. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  7. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  8. function(key,index){
  9. $.log(key);
  10. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  11. $.log(li);
  12. li[0].addEventListener("dragstart",function(){
  13. },false);
  14. $("#numberBox").append(li);
  15. }
  16. );
  17. }
  18. );

好，然后你运行下页面，可以看到一个九宫格，并且每一个格子都可以拖动。


第二步，我们要类似的创建我们填数字得的区域了。

首先还是htmlTag

  1. <olid="player"style="list-style-type:none;width:450px;height:450px;">
  2. </ol>
然后是样式设定
  1. #player.default
  2. {
  3. float:left;
  4. width:48px;
  5. height:33px;
  6. border:solid1pxrgb(0,0,0);
  7. font-size:20px;
  8. padding-top:15px;
  9. text-align:center;
  10. background-color:#B8860B;
  11. }
  12. #player.fix
  13. {
  14. float:left;
  15. width:48px;
  16. height:33px;
  17. border:solid1pxrgb(0,0,0);
  18. font-size:20px;
  19. padding-top:15px;
  20. text-align:center;
  21. background-color:#FFFABC;
  22. }
  23. #player.ation
  24. {
  25. float:left;
  26. width:48px;
  27. height:33px;
  28. border:solid1pxrgb(0,0,0);
  29. font-size:20px;
  30. padding-top:15px;
  31. text-align:center;
  32. background-color:#FFA07A;
  33. }
然后初始化这个区域。数独填字区域有的格子有值有的没有值，我用0表示没有值将来你可以填制，非0表示是固定区不可以改
  1. $(
  2. function(){
  3. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  4. function(item,index){
  5. $.log(item);
  6. varli=$("<li>")
  7. if(item!="0"){
  8. li.addClass("fix");
  9. li[0].innerHTML=item;
  10. }
  11. else{
  12. li[0].classList.add("default");
  13. li[0].addEventListener("dragenter",
  14. function(e){
  15. $.log(e);
  16. },false);
  18. li[0].addEventListener("dragover",
  19. function(e){
  20. if(e.preventDefault){
  21. e.preventDefault();//不要执行与事件关联的默认动作
  22. }
  23. if(e.stopPropagation){
  24. e.stopPropagation();//停止事件的传播
  25. }
  26. $.log(e);
  27. returnfalse;
  28. },false);
  30. li[0].addEventListener("dragleave",
  31. function(e){
  32. },false);
  34. li[0].addEventListener("drop",
  35. function(e){
  36. if(e.preventDefault){
  37. e.preventDefault();//不要执行与事件关联的默认动作
  38. }
  39. if(e.stopPropagation){
  40. e.stopPropagation();//停止事件的传播
  41. }
  43. },false);
  44. }
  45. $("#player").append(li);
  46. }
  47. );
  48. }
  49. );
现在你已经可以在页面上看到一个非常威武的“独”字了！


第三步：我们拖动数字之后，希望可以填数字的区域有明显的颜色变化并给出提示，同时固定区域不可以拖进去，其他区域可以拖进去，并且拖动的时候要send值。

有了前面的知识，我们马上知道去哪里改事件控制了：dragstart事件

  1. $(
  2. function(){
  3. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  4. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  5. {number:6,bgcolor:"rgb(255,165,0)"},
  6. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  7. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  8. function(key,index){
  9. //$.log(key);
  10. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  11. //$.log(li);
  12. li[0].addEventListener("dragstart",function(e){
  13. e.dataTransfer.effectAllowed="copyMove";
  14. e.dataTransfer.setData("text/plain",this.innerHTML);
  15. $.log(this.innerHTML);
  16. [].forEach.call(document.querySelectorAll("#player.default"),
  17. function(item){
  18. //$.log(item);
  19. item.classList.remove("default");
  20. item.classList.add("ation");
  21. });
  22. },false);
  24. li[0].addEventListener("dragend",function(){
  25. [].forEach.call(document.querySelectorAll("#player.ation"),
  26. function(item){
  27. item.classList.remove("ation");
  28. item.classList.add("default");
  29. });
  30. },false);
  32. $("#numberBox").append(li);
  33. }
  34. );
  35. }
  36. );
现在你可以测试下了，当你拖动数字的时候，有明显的颜色改变，并且不同的区域你的鼠标样式也不同哦。

第四步，我们接受值，并且判断这个值是否存在行列冲突，如果冲突就提示，否则改写

  1. $(
  2. function(){
  3. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  4. function(item,index){
  5. $.log(item);
  6. varli=$("<li>")
  7. if(item!="0"){
  8. li.addClass("fix");
  9. li[0].innerHTML=item;
  10. }
  11. else{
  12. li[0].classList.add("default");
  13. li[0].addEventListener("dragenter",
  14. function(e){
  15. $.log(e);
  16. },false);
  18. li[0].addEventListener("dragover",
  19. function(e){
  20. if(e.preventDefault){
  21. e.preventDefault();//不要执行与事件关联的默认动作
  22. }
  23. if(e.stopPropagation){
  24. e.stopPropagation();//停止事件的传播
  25. }
  26. $.log(e);
  27. returnfalse;
  28. },false);
  30. li[0].addEventListener("dragleave",
  31. function(e){
  32. },false);
  34. li[0].addEventListener("drop",
  35. function(e){
  36. if(e.preventDefault){
  37. e.preventDefault();//不要执行与事件关联的默认动作
  38. }
  39. if(e.stopPropagation){
  40. e.stopPropagation();//停止事件的传播
  41. }
  43. varsendData=e.dataTransfer.getData("text/plain");
  44. //获得#player>li矩阵数组
  45. varmatrix=Array.prototype.slice.call(document.querySelectorAll("#player>li"));
  46. varcurrIndex=matrix.indexOf(this);//获得当前元素的位置
  47. varrowIndex=currIndex-currIndex%9;//行开始的位置
  48. varcolIndex=currIndex%9//列开始的位置
  49. for(vari=rowIndex;i<rowIndex+9;i++){
  50. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  51. alert("对不起行上有数据重复，请小心哦！亲");
  52. return;
  53. }
  54. }
  55. for(vari=colIndex;i<81;i=i+9){
  56. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  57. alert("对不起列上有数据重复，请小心哦！亲");
  58. return;
  59. }
  60. }
  61. this.innerHTML=sendData;
  63. },false);
  64. }
  65. $("#player").append(li);
  66. }
  67. );
  68. }
  69. );


现在你可以开始玩啦，虽然颜色不怎么好看，但至少可以玩，对不，我们第一个html5的实用游戏。我后期的blog打算再做些类似新浪微博的“你画我猜”还有“接龙游戏”。

下面是完整的代码，你要懒的话，就直接copy吧

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  6. <scriptsrc=../../"js/jquery-1.7.1.min.js"type="text/javascript"></script>
  8. <scripttype="text/javascript">
  9. $.log=function(msg){
  10. console.log(msg);
  11. }
  13. $(
  14. function(){
  15. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  16. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  17. {number:6,bgcolor:"rgb(255,165,0)"},
  18. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  19. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  20. function(key,index){
  21. //$.log(key);
  22. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  23. //$.log(li);
  24. li[0].addEventListener("dragstart",function(e){
  25. e.dataTransfer.effectAllowed="copyMove";
  26. e.dataTransfer.setData("text/plain",this.innerHTML);
  27. $.log(this.innerHTML);
  28. [].forEach.call(document.querySelectorAll("#player.default"),
  29. function(item){
  30. //$.log(item);
  31. item.classList.remove("default");
  32. item.classList.add("ation");
  33. });
  34. },false);
  36. li[0].addEventListener("dragend",function(){
  37. [].forEach.call(document.querySelectorAll("#player.ation"),
  38. function(item){
  39. item.classList.remove("ation");
  40. item.classList.add("default");
  41. });
  42. },false);
  44. $("#numberBox").append(li);
  45. }
  46. );
  47. }
  48. );
  50. $(
  51. function(){
  52. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  53. function(item,index){
  54. $.log(item);
  55. varli=$("<li>")
  56. if(item!="0"){
  57. li.addClass("fix");
  58. li[0].innerHTML=item;
  59. }
  60. else{
  61. li[0].classList.add("default");
  62. li[0].addEventListener("dragenter",
  63. function(e){
  64. $.log(e);
  65. },false);
  67. li[0].addEventListener("dragover",
  68. function(e){
  69. if(e.preventDefault){
  70. e.preventDefault();//不要执行与事件关联的默认动作
  71. }
  72. if(e.stopPropagation){
  73. e.stopPropagation();//停止事件的传播
  74. }
  75. $.log(e);
  76. returnfalse;
  77. },false);
  79. li[0].addEventListener("dragleave",
  80. function(e){
  81. },false);
  83. li[0].addEventListener("drop",
  84. function(e){
  85. if(e.preventDefault){
  86. e.preventDefault();//不要执行与事件关联的默认动作
  87. }
  88. if(e.stopPropagation){
  89. e.stopPropagation();//停止事件的传播
  90. }
  92. varsendData=e.dataTransfer.getData("text/plain");
  93. //获得#player>li矩阵数组
  94. varmatrix=Array.prototype.slice.call(document.querySelectorAll("#player>li"));
  95. varcurrIndex=matrix.indexOf(this);//获得当前元素的位置
  96. varrowIndex=currIndex-currIndex%9;//行开始的位置
  97. varcolIndex=currIndex%9//列开始的位置
  98. for(vari=rowIndex;i<rowIndex+9;i++){
  99. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  100. alert("对不起行上有数据重复，请小心哦！亲");
  101. return;
  102. }
  103. }
  104. for(vari=colIndex;i<81;i=i+9){
  105. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  106. alert("对不起列上有数据重复，请小心哦！亲");
  107. return;
  108. }
  109. }
  110. this.innerHTML=sendData;
  112. },false);
  113. }
  114. $("#player").append(li);
  115. }
  116. );
  117. }
  118. );
  122. </script>
  124. <styletype="text/css">
  125. #numberBox>li
  126. {
  127. width:30px;
  128. height:25px;
  129. text-align:center;
  130. font-size:20px;
  131. padding-top:5px;
  132. float:left;
  133. color:White;
  134. }
  135. #player.default
  136. {
  137. float:left;
  138. width:48px;
  139. height:33px;
  140. border:solid1pxrgb(0,0,0);
  141. font-size:20px;
  142. padding-top:15px;
  143. text-align:center;
  144. background-color:#B8860B;
  145. }
  146. #player.fix
  147. {
  148. float:left;
  149. width:48px;
  150. height:33px;
  151. border:solid1pxrgb(0,0,0);
  152. font-size:20px;
  153. padding-top:15px;
  154. text-align:center;
  155. background-color:#FFFABC;
  156. }
  157. #player.ation
  158. {
  159. float:left;
  160. width:48px;
  161. height:33px;
  162. border:solid1pxrgb(0,0,0);
  163. font-size:20px;
  164. padding-top:15px;
  165. text-align:center;
  166. background-color:#FFA07A;
  167. }
  168. </style>
  169. </head>
  170. <body>
  171. <olid="numberBox"style="list-style-type:none;width:90px;height:90px;">
  172. </ol>
  173. <olid="player"style="list-style-type:none;width:450px;height:450px;">
  174. </ol>
  175. </body>

分享到：
| Android虚拟键盘弹出时挡住EditText解决方 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics