基于javascript制作经典传统的拼图游戏

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：700 次日期：2016-07-19 13:41:17

温馨提示：小编为您整理了“基于javascript制作经典传统的拼图游戏”,方便广大网友查阅！

这篇文章主要为大家详细介绍了基于javascript制作拼图游戏的相关内容，经典传统的拼图游戏是大家最喜爱的游戏之一，具有挑战性，感兴趣的小伙伴们可以参考一下

实现代码：

<!DOCTYPE html>

<html>

<head>

<title>pingtu.html</title>

*{ margin-bottom:0px;

margin-top: 0px;

margin-left: 0px;

margin-right: 0px;

padding-right: 0px;

padding-left: 0px;

padding-top: 0px;

padding-bottom: 0px;

border: 0px;

}

#box{

position:absolute;

top:0px;

left:0px;

width: 300px;

height: 300px;

border: 1px solid red;

}

#box img{

float:left;

width: 100px;

height: 100px;

}

#box .pj,#box .p2,#box .p3,#box .p4,#box .p5,#box .p6,#box .p7,#box .p8,#box .p9{

position: absolute;

}

#box .pj,#box .p2,#box .p3{

top:0px;

}

#box .p4,#box .p5,#box .p6{

top:100px;

}

#box .p7,#box .p8,#box .p9{

top:200px;

}

#box .pj,#box .p4,#box .p7{

left:0px;

}

#box .p2,#box .p5,#box .p8{

left:100px;

}

#box .p3,#box .p6,#box .p9{

left:200px;

}

#button{

font-size:25px;

font-weight:20px;

float: left;

position: absolute;

top:400px;

left:100px;

}

#output{

position:absolute;

width: 270px;

height: 170px;

top:130px;

left: 350px;

}

#output img{

height: 170px;

width:170px;

float: right;

}

#notice{

position: absolute;

left: 650px;

top:150px;

width: 150px;

height: 120px;

border: 1px solid blue;

font-size: 15px;

}

</style>

</head>

<body>

</div>

目标图形：

</div>

游戏提示：<br>

<br>

点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时，即可移动方块。。

</div>

var times=0;

var src= Array();

src.push("img1/pj.png");

src.push("img1/p2.png");

src.push("img1/p3.png");

src.push("img1/p4.png");

src.push("img1/p5.png");

src.push("img1/p6.png");

src.push("img1/p7.png");

src.push("img1/p8.png");

src.push("img1/p9.png");

function addLoadEvent(func) {

//为window添加新事件函数

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

};

}

function getInfor(){

var ps=document.getElementById("box");

var Arrps=ps.getElementsByTagName("img");

for(var i=0;i<Arrps.length;i++){

Arrps[i].onclick=function(){

if (this.getAttribute("src")=="img1/pj.png");

changeP(this,Arrps);

};

}

function tostar(){

var butt=document.getElementById("button");

butt.onclick=function(){

toST();

times=0;

getInfor();

};

}

function changeP(ob,Arrps){

var Ni=0;

var Nj=0;

for(var i=0;i<Arrps.length;i++){

if(Arrps[i]==ob)

Ni=i;

if(Arrps[i].getAttribute("src")=="img1/pj.png")

Nj=i;

}

if(Math.abs(Ni-Nj)==3)

{

var temperOb=ob.getAttribute("src");

ob.setAttribute("src","img1/pj.png");

Arrps[Nj].setAttribute("src",temperOb);

times++;

ifright();

}else if((Ni-Nj)==1&&(Ni%3)!=0){

var temperOb=ob.getAttribute("src");

ob.setAttribute("src","img1/pj.png");

Arrps[Nj].setAttribute("src",temperOb);

times++;

ifright();

}else if((Ni-Nj)==-1&&(Ni%3)!=2){

var temperOb=ob.getAttribute("src");

ob.setAttribute("src","img1/pj.png");

Arrps[Nj].setAttribute("src",temperOb);

times++;

ifright();

}

function ifright(){

var ps=document.getElementById("box");

var Arrps=ps.getElementsByTagName("img");

for(var i=0;i<src.length;i++){

if(src[i]!=Arrps[i].getAttribute("src")) return;

}

if(times<50)

alert("恭喜，你成功了。。"+"\n"+"仅用了"+times+"步哦");

else alert("恭喜，你成功了。。"+"\n"+"用了"+times+"步");

}

function toST(){

var srcUsing= new Array();

for(var p=0; p<src.length;p++){

srcUsing[p]=src[p];

}

var ps=document.getElementById("box");

var Arrps=ps.getElementsByTagName("img");

var newArry= new Array();

for(var i=0;i<Arrps.length;i++){

newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));

}

for(var j=0;j<newArry.length;j++) {

//var newarrValue=newArry[j];

Arrps[j].setAttribute("src",String(newArry[j]));

}

addLoadEvent(tostar);

</script>

</body>

</html>

希望本文所述对大家学习javascript程序设计有所帮助，让大家动手亲自实现自己最喜爱的游戏——拼图。

上一篇：JS函数定义方式的区别介绍

下一篇：javascript函数命名的三种方式及区别介绍

手机网站地址：基于javascript制作经典传统的拼图游戏

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！