龙年到，一起来玩龙年小游戏吧

鳄鱼儿

发布于 2024-05-21 16:39:44

1180

发布于 2024-05-21 16:39:44

文章被收录于专栏：鳄鱼儿的技术分享鳄鱼儿的技术分享

前言

每到春节期间，游戏里总是充满过节气氛，今年是龙年，咱也来凑个热闹，那就整一个龙年拼图小游戏吧。

完成拼图后，希望带来欢乐的同时也能给大家带来好运，龙年行大运！

游戏介绍

拼图游戏是一种古老而又经典的游戏，它在全世界范围内都备受欢迎。随着科技的发展和智能手机的普及，拼图游戏也逐渐走进了人们的生活。

拼图游戏最早可以追溯到18世纪，当时它是一种由木块拼成的游戏，主要是为了培养儿童的观察力和动手能力。20世纪初，拼图游戏逐渐开始使用纸板和卡片，这使得制作和销售变得更加容易。拼图游戏也叫九宫格游戏，所以是游戏中图片会被切割成9等分，所说的纸板、卡片都是由一整张完整的图片切割而来。

到现在，我们只需要有照片就可以将图片的电子切割，从而实现图片的分割与拼接。

今年24年是龙年，那必须整起龙年的拼图游戏。以下是游戏效果图：

在右侧图片区域选择龙的图片，之后点击九宫格中图片就可以移动图片。

功能实现

分割图片并初始化九宫格的大盒子，即img和div的宽高，并初始化九个格子的宽高。

function initImg(){  
        var $imgs=$(".box img");
        $imgs.attr("src",my$imgs[imgIndex]);
        var imgWidth=$imgs.eq(0).width();
        var imgHeight=$imgs.eq(0).height();			 
        boxHeight=Math.ceil(540*imgHeight/imgWidth);
        $imgs.width(boxWidth);   // 每个img中的图片缩放到大盒子的宽高一样
        $imgs.height(boxHeight);

        $(".box").width(boxWidth+2);   //缩放大盒子的宽度和高度
        $(".box").height(boxHeight+2);

        var divHeight=Math.ceil(boxHeight/3);  //计算出每个小格子的宽高
        var divWidth=Math.ceil(boxWidth/3);

        $divs.height(divHeight);   //缩放每个格子的宽高
        $divs.width(divWidth);

        initGrid(divWidth,divHeight);   //初始化格子系统，记录每个格子的位置

        $.each($imgs,function(i,v){		//每个格子中显示图片的某一部分		
                $(this).css({"top":-grids[i].top+"px","left":-grids[i].left+"px"});

        });

}

计算出每个格子的左上角位置和当前位置放的小图片div的序号，最后一个格子是空白的，即没有div，序号为-1

function initGrid(width,height){
        for(var i=0;i<9;i++){		
                if(i==8){
                        grids[i]={"top":parseInt(i/3)*height,"left":i%3*width,"div":-1};
                }else{
                        grids[i]={"top":parseInt(i/3)*height,"left":i%3*width,"div":i};
                }
        }
}

游戏交互逻辑，这里是通过点击实现，即当我们点击一个图片时，则开始游戏计时，并将它移动到它相邻的空格上

$divs.click(function(){  
			
        if(!isstart){   //游戏是否已经开始计时，如果没有开始，就开始计时				
                isstart=true;
                timer=setInterval(showTime,1000);
        }

        var divi=$divs.index($(this));	//获取当前点击的div序号		
        var grid=-1;
        for(g in grids){     //通过div序号获取到点击的格子序号
                if(grids[g].div==divi){
                        grid=g;
                }				
        }					 

        switch(grid){  //通过格子序号，获取格子能移动到的相邻的格子
                case '0':
                        move(0,[1,3]);					 
                        break;
                case '1':
                        move(1,[0,2,4]);					 
                        break;
                case '2':
                        move(2,[1,5]);					 
                        break;
                case '3':
                        move(3,[0,4,6]);					 
                        break;
                case '4':
                        move(4,[1,3,5,7]);					 
                        break;
                case '5':
                        move(5,[2,4,8]);					 
                        break;						
                case '6':
                        move(6,[3,7]);					 
                        break;		
                case '7':
                        move(7,[4,6,8]);					 
                        break;	
                case '8':
                        move(8,[5,7]);					 
                        break;				
        }			
});

移动图片小格子，这里需要注意，并不是所有的图片都可以移动，只有处在空白格四周的图片才能被移动，以下代码实现的就是这个逻辑，即判断目标格子是否为空，如果是空的，才将原格子中的图片移动到目标格子。

function move(fromIndex,toIndex){ 
        for(var i in toIndex){
                var index=toIndex[i];
                if(grids[index].div<0){
                        var divIndex=grids[fromIndex].div;								
                        $divs.eq(divIndex).animate({"left":grids[index].left+"px","top":grids[index].top},500);
                        grids[fromIndex].div=-1;
                        grids[index].div=divIndex;
                        isWin();
                }				
        }			
}

判断是否完成拼图，完成拼图则提示游戏赢了，并显示游戏用时

function isWin(){
        var win=true;
        for(var i=0;i<8;i++){
                if(grids[i].div!=i){
                        win=false;
                        break;
                }
        }
        if(win){
                clearInterval(timer);
                $divs.hide();
                $divs.eq(0).width(boxWidth);
                $divs.eq(0).height(boxHeight);
                $divs.eq(0).show(500,function(){$showTimeP.text("你成功了，用时"+time+"秒");});				
        }

}