拼图游戏一续

最新推荐文章于 2025-04-28 12:27:13 发布

muzhonger

最新推荐文章于 2025-04-28 12:27:13 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签：游戏 div function c table stylesheet

本文链接：https://blog.youkuaiyun.com/muzhonger/article/details/1874814

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

前些日子写了个拼图小游戏，这两天终于有时间做了些改进，改进了功能，同时做了些美化。

代码如下，o(∩_∩)o...哈哈！

1.pintu.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<!-- -------------------------------------------------------------------------------------------

版本升级功能说明（+：新增 -：删除 ~：修改）

ver1.0 2007-10-22

+ 随机拼图

+ 拼图算法（画图、移动、判断）

+ 使用完整图片作为拼图图片

+ 选择图片

+ 是否对比原图

+ 刷新拼图

ver1.1 2007-11-6

~ 重构代码并分离出js和css

+ 移动模式

ver1.2 2007-11-8

+ 选择格数设置

~ 移动模式：改为可移动多格

-----------------------------------------------------------------------------------------------

未实现功能：

1 时间模式：限时、计时

2 自由选择图片

http://hi.youkuaiyun.com/muzhonger

-------------------------------------------------------------------------------------------- -->

< HTML >

< HEAD >

< TITLE > 拼图游戏 </ TITLE >

</ HEAD >

< LINK rel ="stylesheet" href ="css/pintu.css" type ="text/css" />

< SCRIPT language ="JavaScript" src ="js/pintu.js" id ="JSKitBag" ></ SCRIPT >

< BODY onload ="init();" >

< TABLE >

< TR >

< TD colspan ="2" >

< TABLE class ="table0" width ="450px" >

< TR >

< TD class ="td_h" colspan ="2" > 设置 </ TD >

</ TR >

< TR >

< TD class ="td_l" > 选择图片： </ TD >

< TD class ="td_r" >

< SELECT onchange ="changePictrue(this.value)" >

< OPTION value ="img/default.jpg" > 默认 <? OPTION>

</SELECT>

</TD>

</TR>

<TR>

</SELECT>

</TD>

</TR>

<TR>

<TD class="td_l">是否参考原图：</TD>

<INPUT type="radio" name="ckb1" οnclick="dependIt('0');" CHECKED>是 <INPUT type="radio" name="ckb1" οnclick="dependIt('1');">否

</TD>

</TR>

<TR>

</TD>

</TR>

</TABLE>

</TD>

</TR>

<TR>

拼图

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</TD>

原图：

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</DIV>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

2.js/pintu.js

var c = 4 ,r = 4 ; // 分格

var myArr,tempArr;

var x = 0 ;y = 0 ; // myArr[ 0 ][ 0 ]的位置

var img = " img/default.jpg " ; // 默认图片

function init(){

initDate();

initIt();

drawIt();

}

//测试

function testIt(){

var s="";

for (i=0;i<r;i++){

for (j=0;j<c;j++){

s+="myArr["+i+"]["+j+"]:"+myArr[i][j];+" ";

}

alert(s);

}

//初始化数据

function initDate(){

myArr = new Array();

tempArr = new Array();

//var s="";

for (i=0;i<r;i++){

myArr[i] = new Array();

for (j=0;j<c;j++){

myArr[i][j] = i*c+j;

tempArr[i*c+j] = i*c+j;

//s+="myArr["+i+"]["+j+"]:"+myArr[i][j];+" ";

}

//alert(s);

}

//随机排序

function randomIt(){

var temp=0,rn=0;

for(i=1;i<c*r;i++){

rn=Math.ceil((c*r-1)*Math.random())

temp=tempArr[i];

tempArr[i]=tempArr[rn];

tempArr[rn]=temp;

}

for(i=0;i<c*r;i++){

var m=Math.floor(i/c);

var n=i%c;

myArr[m][n]=tempArr[i];

}

//画图(拼图)

function drawIt(){

var v=0,t=null;

for (i=0;i<r;i++){

for (j=0;j<c;j++){

v=myArr[i][j];

t=eval(document.getElementById('r'+i+'c'+j));

if(v!=0){

t.style.display="block";

t.scrollTop=Math.floor(v/c)*50;

t.scrollLeft=(v%c)*50;

}else{

t.style.display="none";//不显示原图左上角图片

x=i;

y=j;

}

//画图(原图)

function initIt(){

var v=0,t=null;

for (i=0;i<r;i++){

for (j=0;j<c;j++){

v=myArr[i][j];

t=eval(document.getElementById('r'+i+'c'+j+'t'));

if(v!=0){

//t.style.display="block";

t.scrollTop=Math.floor(v/c)*50;

t.scrollLeft=(v%c)*50;

}else{

//t.style.display="none";

}

//重画

function rePaint(m,n){

document.getElementById('td1').innerHTML="";

var htmlStr="";

var comStr="";

htmlStr+="拼图<TABLE class='table1'>";

comStr+="<DIV id='div1'> 原图：<TABLE class='table1'>";

for(i=0;i<m;i++){

htmlStr+="<TR>";

comStr+="<TR>";

for(j=0;j<n;j++){

htmlStr+="<TD class='td1'><DIV class='div1' id='r"+i+"c"+j+"' οnclick='clickIt(this.id);' οnmοuseοver='mouseIt(this.id,1);' οnmοuseοut='mouseIt(this.id,2);'><img src='"+img+"'></DIV></TD>";

comStr+="<TD class='td1'><DIV class='div1' id='r"+i+"c"+j+"t'><img src='"+img+"'></DIV></TD>";

}

htmlStr+="</TR>";

comStr+="</TR>";

}

htmlStr+="</TABLE>";

comStr+="</TABLE></DIV>";

document.getElementById('td1').innerHTML=htmlStr;

document.getElementById('td2').innerHTML=comStr;

}

//随机洗牌

function changeIt(){

randomIt();

drawIt();

}

//判断是否成功

function judgeIt(){

for (i=0;i<r;i++){

for (j=0;j<c;j++){

if(myArr[i][j]!=(i*c+j)) return;

}

alert("You win!");

}

//交换

function swapIt(i,j,m,n){

var temp=myArr[i][j];

myArr[i][j]=myArr[m][n];

myArr[m][n]=temp;

}

//移动 type 1:一次移动一格 2:一次移动多格

function moveIt(i,j){

if(i==x&&j<y){

for(t=y;t>j;t--){

swapIt(i,t,i,t-1)

}

drawIt();

return judgeIt();

}

if(i==x&&j>y){

for(t=y;t<j;t++){

swapIt(i,t,i,t+1)

}

drawIt();

return judgeIt();

}

if(i<x&&j==y){

for(t=x;t>i;t--){

swapIt(t,j,t-1,j)

}

drawIt();

return judgeIt();

}

if(i>x&&j==y){

for(t=x;t<i;t++){

swapIt(t,j,t+1,j)

}

drawIt();

return judgeIt();

}

//点击图片

function clickIt(id){

var i=parseInt(id.substring(1,2));

var j=parseInt(id.substring(3,4));

moveIt(i,j);

}

//选择图片

function choosePictrue(imgSrc){

}

//改变图片

function changePictrue(imgSrc){

var imgs=document.getElementsByTagName('img');

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

imgs[i].src=imgSrc;

img=imgSrc;

}

//改变格数

function changeGrid(id){

var i=parseInt(id.substring(0,1));

var j=parseInt(id.substring(1,2));

r=i;

c=j;

document.styleSheets[0].rules.item(7).style.width = 50*j+"px";

document.styleSheets[0].rules.item(7).style.height = 50*i+"px";

initDate();

rePaint(i,j);

drawIt();

initIt();

}

//鼠标移入/移出状态

function mouseIt(id,obj){

var t = document.getElementById(id);

obj==1?t.style.border = "2px solid red":t.style.border = "1px solid red";

}

//刷新

function reflashIt(imgSrc){

initDate();

drawIt();

}

//是否参考原图

function dependIt(flag){

var div1=document.getElementById('div1');

flag==1?div1.style.display="none":div1.style.display="block";

}

3.css/pintu.css

.table0 {

border :1px solid red;

background-color :white;

}

.table1 {

border :1px solid red;

background-color :pink;

}

.td_h {

background-color :#AAAAAA;

text-align :center;

}

.td_l {

background-color :#CCCCCC;

}

.td_r {

background-color :#EEEEEE;

}

.td1 {

width :50px;

height :50px;

cursor :hand;

}

.div1 {

overflow:hidden;

border :1px solid red;

width :50px;

height :50px;

}

IMG {

overflow:hidden;

width :200px;

height :200px;

}

4 img下图片若干，参见pintu,html中图片选择。默认为default.jps