Implement web puzzle game using javascript

Using javascript to write a puzzle game, you mainly need to achieve drag effect, block adsorption effect, puzzle disruption animation, and also need to do Impact checking. In order to make the experience of this game better, I also added a magnifying glass effect similar to the products on Taobao. Move the mouse up and a magnified image will appear. The effect is as follows:

##The following describes how this puzzle game works Implementation, HTML+CSS page layout is relatively simple and will not be described in detail. The focus is on how javascript achieves the effects mentioned in the first paragraph of .

(1) Puzzle generation

First you need to use js to generate the overall puzzle, as shown in the picture above; the code is as follows:

function init(){
	var imgArr=["pt1.jpg","pt2.jpg","pt3.jpg","pt4.jpg"];
	var imgIndex=parseInt(Math.random()*imgArr.length);
	var wih="";
	for(var i=0;i<5;i++){
		for(var j=0;j<9;j++){
			data.push({
				"order":order,
				"left":j*100,
				"top":i*100
			});
			wih+="<span style=&#39;background-image:url(img/拼图游戏/"+

					    imgArr[imgIndex]+"); background-position:"+

			(-j*100)+"px "+(-i*100)+"px;&#39; order=&#39;"+order+"&#39;></span>";//"+(i*9+j)+"
			order++;
		}
	}
	right.innerHTML=wih;
	var mps=document.querySelectorAll(".magnifier p");
	for(var i=0;i<mps.length;i++){
		mps[i].style.backgroundImage="url(img/拼图游戏/"+imgArr[imgIndex]+")";
	}
	ordersb(1);
}

<br/>

(2) Disrupt the puzzle Animation

scrambles the puzzle positions, i.e. scrambles the array that has the positions of all the tiles stored, then re-renders each tile s position. This can be achieved by using the method arr.sort() in JavaScript to scramble the array. The code implementation is as shown below:

##

function ordersb(n){
	var arr=[];
	if(n==1){

		//将数组按从小到大的顺序排列
		arr=data.sort(function(a,b){
			return a.order-b.order;
		});
	}else{

		//打乱数组
		arr=data.sort(function(){
			return Math.random()-0.5;
		});
	}
	for(var i=0;i<data.length;i++){
		spans[i].style.transition="1s";
		spans[i].style.left=data[i].left+"px";
		spans[i].style.top=data[i].top+"px";
		spans[i].setAttribute("order",data[i].order);
		spans[i].addEventListener("transitionend",function(){
			for (var j = 0; j < spans.length; j++) {
				spans[j].style.transition = "none";
			}
		})				
	}
}

Click the "Start" button, The puzzle is automatically scrambled with a shuffling animation effect, as shown below:

(3) Drag effect

##realizes drag and drop Effect Just grasp the drag and drop principle. That is, a complete drag and drop contains three steps: a. Mouse pressed; b. Mouse moved; c. Mouse raised.

(4)

Adsorption effect

To achieve the adsorption effect, the explanation from the code point of view is that when the mouse moves a certain module, the mouse is lifted at a position that is not allowed for any block. At this time, the position of the block needs to be Modify it so that its position is where the block allows.

(5) Collision Detection

所谓碰撞检测，在此处的通俗说法时，移动一个元素，使其靠近另一个元素，一旦靠近到两个元素刚开始有重叠,就需要立刻检测出来。此处不但要检测出移动的图块与哪些图块有重叠，还要判断与哪个图块重叠部分最多。因为在鼠标抬起时，移动的图块需要根据与哪个图块重叠最多，来决定与哪块图块交换位置。

为了游戏的体验更好一些，在鼠标移动图块时，就判断与哪个图块重叠最多，就把这块图块表示出来。这样用户就知道若抬起鼠标，即将会与哪块图块交换位置。如下图所示：

<br/>

这三种功能的实现代码，即关键代码如下所示：

function drag(obj){				
	obj.onmousedown=function(ev){
		obj.style.zIndex="99";
		var br=obj.offsetLeft;
		var bb=obj.offsetTop;
		var width=obj.offsetWidth;
		var height=obj.offsetHeight;
		var or=right.getBoundingClientRect().left;
		var ob=right.getBoundingClientRect().top;
		var rMax=right.clientWidth-width;
		var bMax=right.clientHeight-height;
		var oOrder=obj.getAttribute("order");
		var disX=ev.clientX- br-or;
		var disY=ev.clientY-bb-ob;
		var  l,t,eel,eet,erl;
		right.onmousemove=function(ev){
			l=ev.clientX-disX-or;
			t=ev.clientY-disY-ob;

			//图块移动的边界位置范围设置
			l=l>rMax?rMax:l;
			l=l<0?0:l;
			t=t>bMax?bMax:t;
			t=t<0?0:t;
			obj.style.left=l+"px";
			obj.style.top=t+"px";

			//修改此时图块的位置，使其在图块允许存在的位置上，并且是与某个图块重叠最多的那个图块位置		
			eel=Math.round(l/width)*width;
			eet=Math.round(t/height)*height;

			//根据图块位置找到在这个位置上的图块元素
			erl=find(obj,eel,eet);
			for(var i=0;i<spans.length;i++){
				spans[i].style.opacity="";
			}
			if(erl){							
				erl.style.opacity=".5";
			}
		}
		right.onmouseup=function(){
			right.onmousemove=null;
			obj.style.zIndex="";
			if(erl){
				obj.setAttribute("order",erl.getAttribute("order"));						
				erl.style.left=br+"px";
				erl.style.top=bb+"px";
				erl.style.opacity="";
				erl.setAttribute("order",oOrder);
			}					
			obj.style.left=eel+"px";
			obj.style.top=eet+"px";						
		}
		return false;
	}
}

（6）游戏输赢判断

在拼图完成后，点击“验证”按钮，弹出一个弹框提示拼图是否正确。

总体来说，用javascript实现拼图游戏，难度不大。本人在做的时候，遇到一个错误：图块移动到某个图块精确的位置上，此时拖拽效果和吸附效果都失效了。经过代码调试和分析，发现在对图块进行位置交换时，通过位置找到的被交换图块元素是不正确的，找到的是这个移动元素本身，导致图块的位置设置错误。找到出现bug的原因后，修改代码，在通过位置查找图块元素时，排除移动元素自身。修改后，经测试bug得到解决。

The above is the detailed content of Implement web puzzle game using javascript. For more information, please follow other related articles on the PHP Chinese website!