原生javascript制作的拼图游戏实现方法详解

2023-07-31 19:16:04 213

本文实例讲述了原生javascript制作的拼图游戏实现方法。分享给大家供大家参考，具体如下：

实现方法

//1、让所有的li（在ul里）可以拖拽

//2、交换li的位置计算背景图位置

//1、让所有的li（在ul里）可以拖拽
//根据鼠标的位置，计算目标li的序号

//根据行号和列号计算下标
//行号*3+列号
//2、归位

此处没有背景图请自行添加css样式







html,body{
margin:0;
padding:0;
}
#box{
list-style:none;
position:relative;
width:600px;
height:600px;
box-sizing:border-box;
margin:10pxauto;
}
li{
position:absolute;
width:200px;
height:200px;
border:1pxsolidwhite;
background-image:url(img/b1.jpg);
background-size:600px600px;
}
#boxli:nth-child(1){
left:0px;
top:0px;
background-position:0px0px;
}
#boxli:nth-child(2){
left:200px;
top:0px;
background-position:-200px0px;
}
#boxli:nth-child(3){
left:400px;
top:0px;
background-position:-400px0px;
}

#boxli:nth-child(4){
left:0px;
top:200px;
background-position:0px-200px;
}
#boxli:nth-child(5){
left:200px;
top:200px;
background-position:-200px-200px;
}
#boxli:nth-child(6){
left:400px;
top:200px;
background-position:-400px-200px;
}

#boxli:nth-child(7){
left:0px;
top:400px;
background-position:0px-400px;
}
#boxli:nth-child(8){
left:200px;
top:400px;
background-position:-200px-400px;
}
#boxli:nth-child(9){
left:400px;
top:400px;
background-position:-400px-400px;
}

这个是这连个js连接的代码

//csstools
//功能：获取某个DOM元素的样式属性的兼容性写法
//参数：dom元素，样式属性名
//返回值：样式属性的值
functiongetStyle(domObj,attr){
if(domObj.currentStyle){//domObj.currentStyle如果能够正确获取到，那就真
returndomObj.currentStyle[attr];//当对象的属性名是变量时，用方括号而不是点。
}else{
returnwindow.getComputedStyle(domObj)[attr];
}
}

//eventTools
//功能：阻止浏览器默认行为的封装
//参数：事件对象
//返回值：无
functionpreventDefault1809(evt){
if(evt.returnValue){
evt.returnValue=false;
}else{
evt.preventDefault();
}
}
//功能：绑定事件
//参数：
//事件源
//事件类型名，不带on
//事件处理函数,
//是否冒泡
//返回值：无
functionaddEvent1809(domObj,eventType,func,isBubble){
if(domObj.addEventListener){
domObj.addEventListener(eventType,func,isBubble);
}elseif(domObj.attachEvent){
domObj.attachEvent('on'+eventType,func);
}else{
domObj['on'+eventType]=func;
}
}
//当对象的属性是变量时，不能用点，只能用方括号
/*
varobj={
id:'007'
}
obj.id;
vartemp="id";
obj[temp]
*/

js部分


function$(id){
returndocument.getElementById(id);
}
window.onload=function(){
drag();
}
//1、让所有的li（在ul里）可以拖拽
functiondrag(){
varlis=$("box").children;
varcurrIndex=-1;//记录被按下的那个li
vartargetIndex=-1;
for(vari=0;i600-200||top1<0||top1>600-200){
return;
}

liDom.style.left=left1+"px";
liDom.style.top=top1+"px";
targetIndex=getTargetIndex(mouseX,mouseY);
console.log(targetIndex);
}
}
document.body.onmouseup=function(){
$("box").onmousemove=null;
if(currIndex>-1){
lis[currIndex].style.zIndex=0;
exchangeLi(currIndex,targetIndex);
}
}
}
}
//根据鼠标的位置，计算目标li的序号
functiongetTargetIndex(x,y){
//计算行号
varrowIndex=parseInt(y/200);//
//计算列号
varcolIndex=parseInt(x/200);//
//根据行号和列号计算下标
//行号*3+列号
returnrowIndex*3+colIndex;
}
functionexchangeLi(sourceIndex,targetIndex){
//varlis=$("box").children;
//if(sourceIndex<-1||sourceIndex>lis.length-1||targetIndex<-1||targetIndex>lis.length-1){
//return;
//}
if(sourceIndex!=targetIndex){
varlis=$("box").children;
//1、交换backgroundPosition
vartemp=getStyle(lis[sourceIndex],"backgroundPosition");
lis[sourceIndex].style.backgroundPosition=getStyle(lis[targetIndex],"backgroundPosition");
lis[targetIndex].style.backgroundPosition=temp;
}
//2、归位
rowIndex=parseInt(sourceIndex/3);
colIndex=sourceIndex%3;
lis[sourceIndex].style.left=colIndex*200+"px";
lis[sourceIndex].style.top=rowIndex*200+"px";
}

PS：这里给大家推荐一款相似的在线工具供大家参考：

在线美女拼图游戏：
http://tools.jb51.net/games/pintu

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

原生javascript制作的拼图游戏实现方法详解

热门推荐

随机推荐