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

更新时间：2024-03-20 14:08:01 阅读量：综合文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

javascript制作年历推荐度：
相关推荐

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

<!DOCTYPE html> <html>

<head>

<title>pingtu.html</title>

#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 id=\

<img class=\ <img class=\

<img class=\

<img class=\ <img class=\

<img class=\

<img class=\ <img class=\

<div id=\ 目标图形：

<div id=\ 游戏提示：<br> <br> 点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时，即可移动方块。。 </div>

<input type=\开始新游戏\ <script type=\ var times=0; var src= Array();

src.push(\ src.push(\ src.push(\ src.push(\

src.push(\ 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(\ var Arrps=ps.getElementsByTagName(\ for(var i=0;i<Arrps.length;i++){ Arrps[i].onclick=function(){

if (this.getAttribute(\ changeP(this,Arrps); }; } }

function tostar(){

var butt=document.getElementById(\ 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(\ Nj=i; }

if(Math.abs(Ni-Nj)==3) { var temperOb=ob.getAttribute(\

ob.setAttribute(\ Arrps[Nj].setAttribute(\

times++; ifright(); }else if((Ni-Nj)==1&&(Ni%3)!=0){ var temperOb=ob.getAttribute(\

ob.setAttribute(\

Arrps[Nj].setAttribute(\

times++; ifright(); }else if((Ni-Nj)==-1&&(Ni%3)!=2){ var temperOb=ob.getAttribute(\

ob.setAttribute(\ Arrps[Nj].setAttribute(\

times++; ifright(); } }

function ifright(){

var ps=document.getElementById(\ var Arrps=ps.getElementsByTagName(\ for(var i=0;i<src.length;i++){

if(src[i]!=Arrps[i].getAttribute(\ }

if(times<50)

alert(\恭喜，你成功了。。\仅用了\步哦\

else alert(\恭喜，你成功了。。\用了\步\

} function toST(){

var srcUsing= new Array();

for(var p=0; p<src.length;p++){ srcUsing[p]=src[p]; }

var ps=document.getElementById(\ var Arrps=ps.getElementsByTagName(\ 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(\ }

}

addLoadEvent(tostar); </script> </body> </html>

希望本文所述对大家学习javascript程序设计有所帮助，让大家动手亲自实现自己最喜

爱的游戏——拼图。

}

addLoadEvent(tostar); </script> </body> </html>

希望本文所述对大家学习javascript程序设计有所帮助，让大家动手亲自实现自己最喜

爱的游戏——拼图。

本文来源：https://www.bwwdw.com/article/r7x8.html

相关文章：

正在阅读：

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

亲子教育-精选幼儿园优秀观察记录【三篇】精品04-25

三年级上数学解决实际问题06-02

诸暨市卫生系统医疗器械协议定点采购项目中标公告09-14

工业和信息化部电子第五研究所增城总部新区（生活区）赛宝花园施工01-24

曹庄小学防溺水应急预案05-04

二年级语文下册课文文本06-28

福建省人民政府关于同意厦门市海沧区撤销海沧镇建制设立海沧、新11-29

ECRS指导意见10-18

六级新题型必背单词(更新版)(真题单词)06-09

上一篇：历史趣谈：永乐帝的“靖难”夺权之路一块西瓜引发的政变？下一篇：党风廉政及作风建设自查报告（信访）