js写的拼图游戏

最新推荐文章于 2024-04-29 09:59:06 发布

muzhonger

最新推荐文章于 2024-04-29 09:59:06 发布

阅读量1.7k

点赞数

文章标签：游戏 function random c border table

本文链接：https://blog.csdn.net/muzhonger/article/details/1837873

版权

下载地址：http://download.csdn.net/source/268138

闲来无事，写了一个拼图游戏，算法很简单，由js实现；主要的是使用一张完整的图片，用js+css进行图片截取是以前没有做过的；

当然这只是一个初步产品，还有待加工，增加功能使其更加完善，同时作美化使其更好看一些！

准备增加如下功能：

1 动态读取拼图图片；

2 难度调整：通过时间限制，分格个数，是否记忆模式等元素增加难度；

3 试玩过的朋友帮我想想，欢迎留言！

附上代码：

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

< HTML >

< HEAD >

< TITLE > 拼图游戏 </ TITLE >

</ HEAD >

< STYLE >

TABLE {

width :210px;

height :210px;

}

TD {

width :50px;

height :50px;

border :1px solid red;

cursor :hand;

}

DIV {

position:absolute;

overflow:hidden;

border :1px solid red;

width :50px;

height :50px;

}

IMG {

position:absolute;

overflow:hidden;

width :200px;

height :200px;

}

</ STYLE >

< SCRIPT >

var myArr = [[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];

var tempArr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function init(){

initIt();

drawIt();

}

//随机排序

function randomIt(){

var temp=0;

var random=0;

var s="";

for(i=1;i<16;i++){

random=Math.ceil(15*Math.random())

temp=tempArr[i];

tempArr[i]=tempArr[random];

tempArr[random]=temp;

}

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

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

var n=i%4;

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

}

//画图(拼图)

function drawIt(){

var v=0;

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

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

v=myArr[i][j];

if(v!=0){

document.getElementById('r'+i+'c'+j).style.display="block";

document.getElementById('r'+i+'c'+j).scrollTop=Math.floor(v/4)*50;

document.getElementById('r'+i+'c'+j).scrollLeft=(v%4)*50;

}else{

document.getElementById('r'+i+'c'+j).style.display="none";

}

//画图(原图)

function initIt(){

var v=0;

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

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

v=myArr[i][j];

if(v!=0){

//document.getElementById('r'+i+'c'+j+'t').style.display="block";

document.getElementById('r'+i+'c'+j+'t').scrollTop=Math.floor(v/4)*50;

document.getElementById('r'+i+'c'+j+'t').scrollLeft=(v%4)*50;

}else{

//document.getElementById('r'+i+'c'+j+'t').style.display="none";

}

//随机洗牌

function changeIt(){

randomIt();

drawIt();

}

//判断是否成功

function judgeIt(){

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

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

if(myArr[i][j]!=(i*4+j)){

return false;

}

return true;

}

function moveIt(m,n){

var i=parseInt(m);

var j=parseInt(n);

var temp;

if(i-1>=0&&myArr[i-1][j]==0){

temp=myArr[i][j];

myArr[i][j]=myArr[i-1][j];

myArr[i-1][j]=temp;

drawIt();

if(judgeIt()){

alert("You win!");

return;

}

return;

}

if(i+1<4&&myArr[i+1][j]==0){

temp=myArr[i][j];

myArr[i][j]=myArr[i+1][j];

myArr[i+1][j]=temp;

drawIt();

if(judgeIt()){

alert("You win!");

return;

}

return;

}

if(j-1>=0&&myArr[i][j-1]==0){

temp=myArr[i][j];

myArr[i][j]=myArr[i][j-1];

myArr[i][j-1]=temp;

drawIt();

if(judgeIt()){

alert("You win!");

return;

}

return;

}

if(j+1<4&&myArr[i][j+1]==0){

temp=myArr[i][j];

myArr[i][j]=myArr[i][j+1];

myArr[i][j+1]=temp;

drawIt();

if(judgeIt()){

alert("You win!");

return;

}

return;

}

function clickIt(id){

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

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

moveIt(i,j);

}

function chooseIt(imgSrc){

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

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

imgs[i].src=imgSrc;

}

function reflashIt(imgSrc){

myArr = [[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];

drawIt();

}

</ SCRIPT >

< BODY onload ="init();" >

原图：

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

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

</SELECT>

<BR>

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

拼图：

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

muzhonger

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js写的拼图游戏

下载地址：http://download.csdn.net/source/268138 闲来无事，写了一个拼图游戏，算法很简单，由js实现；主要的是使用一张完整的图片，用js+css进行图片截取是以前没有做过的；当然这只是一个初步产品，还有待加工，增加功能使其更加完善，同时作美化使其更好看一些！准备增加如下功能：1 动态读取拼图图片；2 难度调整：通过时间限制，分格
复制链接

扫一扫