js实现简单拼图小游戏
本文实例为大家分享了js实现简单拼图小游戏的具体代码，供大家参考，具体内容如下
游戏很简单，拼拼图，鼠标拖动一块去和另一块互换。语言是HTML+js，注释写的有不明白的可以留言问一下。
截图
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> </head> <style type='text/css'> div{ width: 200px; height: 200px; } .tu{ background-image:url(anni.jpg); } //利用background-position给每个div添加不同的图片；即9个div组成一幅完成的图片; #z-1{ background-position: 0px 0px; } #z-2{ background-position:-200px 0px; } #z-3{ background-position:-400px 0px; } #z-4{ background-position:0 -200px; } #z-5{ background-position: -200px -200px; } #z-6{ background-position: -400px -200px; } #z-7{ background-position: 0px -400px; } #z-8{ background-position: -200px -400px; } #z-9{ background-position: -400px -400px; } </style> <script> //完成两个图片拖拽后的互换; function over(e){ e.preventDefault();//阻止默认 } //抓起 function drag(e){ var id=e.target.id; // console.log(e.target.id); e.dataTransfer.setData('id',id);//设置传输的是被抓id； } //经过 function drop(e){ var beizhuaId=e.dataTransfer.getData('id');//接受被抓id; // console.log(beizhuaId);//被抓ID var fangID=e.target.id;//所放位置的id; var beizhua=document.getElementById(beizhuaId);//获取被抓对象; var fang=document.getElementById(fangID);//获取放的对象； var f_beizhua=beizhua.parentNode;//分别找到对应的父节点 var f_fang=fang.parentNode; //互换儿子 f_beizhua.appendChild(fang); f_fang.appendChild(beizhua); win(); } //判断赢得方法；每个父和子id名字序号相同，循环 ,累加count; function win(){ var tus=document.getElementsByClassName(’tu’); var count=0; for(var i=0;i<tus.length;i++){ var tu=tus[i]; var fu=tu.parentNode; var tu_id=tu.getAttribute('id'); var fu_id=fu.getAttribute('id'); if(tu_id.replace('z-','')==fu_id.replace('f-','')){ count++; console.log(count); }else{ return; } }if(count==9){ alert('you win!'); } } //打乱按钮；通过生成随机数；appenChild方法去多次互换，则为打乱； function daluan(){ for(var i=0;i<100;i++){ var tus=document.getElementsByClassName(’tu’); var m=parseInt(Math.random()*9); var n=parseInt(Math.random()*9); var tusmp=tus[m].parentNode; var tusnp=tus[n].parentNode; tusmp.appendChild(tus[n]); tusnp.appendChild(tus[m]); } } </script> <body> <table border='1'> <tr> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> </tr> <tr> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> </tr> <tr> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> <td> <div ondragover='over(event)' ondrop='drop(event)'> <div draggable='true' ondragstart='drag(event)'></div> </div> </td> </tr> </table> <input type='button' value='打乱' onclick='daluan()' /> </body></html>结语
东西很少，逻辑也不算强，但是思路需要清晰。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备