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

来源：网络收集时间：2026-05-25

导读：这篇文章主要为大家详细介绍了基于javascript制作拼图游戏的相关内容，经典传统的拼图游戏是大家最喜爱的游戏之一，具有挑战性，感兴趣的小伙伴们可以参考一下实现代码： !DOCTYPE html html head titlepingtu.html/title meta http-equiv=\ meta http-equi

这篇文章主要为大家详细介绍了基于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(\

&nb …… 此处隐藏：1422字，全部文档内容请下载后查看。喜欢就下载吧 ……

基于javascript制作经典传统的拼图游戏.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wendang/598478.html（转载请注明文章来源）

上一篇：公共基础知识 - 宜宾市情 - 试题
下一篇：浅析当前农村老年人养老问题