基于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

2018-2019年上海市浦东新区泥城小学三年级上册科学模拟复习题无03-11

电子商务概论实践复习题及答案05-17

2012单元工程新质量评定表（XJ整理用于小农水）(1)0006-01

电子商务复习题及答案10-24

安徽省2014年政法干警申论备考：作文开头的三种方式07-24

电子商务法律与法规作业107-05

法律法规复习题2016（附答案）(1)12-28

电子商务复习题含答案（本科）04-26

连接词和常用词语替换词 - 图文05-12

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