本文主要讲解如何使用原生JavaScript实现一个简单的拼图游戏。线上体验地址：谜题1.游戏的基本逻辑想要使用一种语言开发一款游戏，首先要了解如何使用这种语言来实现一些基本逻辑，比如图像绘制、交互处理、定时器、etc.1.图形绘制图形绘制是一切的基础。这里使用JavaScript在画布上绘制。即先在html中创建canvas元素，然后在JavaScript中通过id获取元素，通过canvas获取对应的context上下文，为后续的绘制做准备。varbackground=document.getElementById("background");varcontext=background.getContext('2d');drawImage通过context方法可以绘制图片，这里进行了相应的封装：注意：这里要等图片加载完成后才能绘制，也就是调用onload中的drawImage方法，否则绘制失败.vardrawImageItem=function(index,position){varimg=newImage();img.src='./image/dog_0'+String(index+1)+'.jpg';img.onload=()=>{varrect=rectForPosition(位置);context.drawImage(img,rect[0],rect[1],rect[2],rect[3]);}}绘制完图片后，我们还需要动态刷新视图，否则画布只是一张静态图片。如果是简单的图形刷新，在原来的位置重新绘制，覆盖即可。但有时我们只需要清除现有的图形而不绘制新的图形。比如在拼图游戏中，将一个方块移动到另一个位置后，需要将原来的位置清空。通过context的clearRect方法可以达到清除的目的。下面是清空画布某个区域的代码：varoriginRect=rectForPosition(origin);context.clearRect(originRect[0],originRect[1],originRect[2],originRect[3]);图形绘制完成后，我们还需要处理玩家的输入事件，然后根据输入事件来决定何时刷新视图。输入事件可以分为三种：在手机上，有触摸屏事件；在PC上，有鼠标和键盘事件。JavaScript中对触摸屏和鼠标点击的监听是一样的，都是通过canvas的onclick事件回调，如下：//screenclickbackground.onclick=function(e){};我们可以通过e.offsetX、e.offsetY来获取触摸点在画布中的位置。注意：canvas的坐标原点在左上角，即左上角的坐标为(0,0)。通过onkeyup、onkeydown等文档的事件回调键盘的按键点击。onkeyup指的是抬起按钮的事件，onkeydown指的是按下按钮的事件。我们可以通过keyCode知道当前是哪个键，然后根据不同的键处理不同的逻辑，如下：if(event.keyCode=='37'){//left//dosomething}elseif(event.keyCode=='38'){//上//做某事}elseif(event.keyCode=='39'){//右//做某事}elseif(event.keyCode=='40'){//Next//dosomething}3.Timer有时候，除了在玩家输入时刷新视图外，还需要定时刷新视图。比如在贪吃蛇游戏中，每隔一段时间就需要刷新贪吃蛇的位置。这时候我们就需要一个定时器，让它每隔一段时间就执行一段代码来刷新视图。我们使用setInterval方法来实现定时器功能：setInterval("run()",100);上面的代码表示run方法每100毫秒执行一次。2.拼图的基本逻辑有了游戏的基本逻辑，我们来看看拼图的逻辑是如何实现的。1.生成一个随机序列因为不是任何序列都可以通过翻译来恢复，所以我们不能简单地生成一个随机序列。比如序列1,0,2,3,4,5,6,7,8，不管怎么翻译，都无法还原。这里采取的做法是：预先设置4个可逆序列，随机选择4个序列中的一个，然后对序列进行模拟翻译几个步骤。这样就尽可能保证了初始序列的多样性，同时也保证了序列的可还原性。具体代码如下：varsetupRandomPosition=function(){varlist1=[4,3,2,8,0,7,5,6,1];varlist2=[2,0,5,6,8,7,3,1,4];varlist3=[3,7,2,4,1,6,8,0,5];varlist4=[3,2,4,1,7,6,5,0,8];varlists=[list1,list2,list3,list4];imageIndexForPosition=lists[parseInt(Math.random()*4)];//获取空位置varemptyPosition=0;对于(vari=imageIndexForPosition.length-1;i>=0;i--){if(imageIndexForPosition[i]==lastIndex()){emptyPosition=i;休息;}}background.emptyPosition=emptyPosition;//随机移动次数vartimes=10;while(times--){//获取一个随机数并决定移动到哪个位置vardirection=parseInt(Math.random()*4);变量目标=-1；if(direction==0){target=topOfPosition(emptyPosition);//up}elseif(direction==1){target=leftOfPosition(emptyPosition);//左}elseif(方向on==2){target=rightOfPosition(emptyPosition);//正确}elseif(direction==3){target=bottomOfPosition(emptyPosition);//down}if(target<0||target>lastIndex()){//位置不合法，继续下一个循环continue;}varresult=moveImageIfCanAtPosition(target);if(result>=0){//如果移动成功，更新空位的位置emptyPosition=target;}}}2.判断方块是否可以移动保存序列时，存储了0到8的9个数字，空白方块就是数字8所在的位置，所以判断是否可以移动的唯一条件可以移动的是目标位置的值是否为8。代码如下：varisPositionEmpty=function(position){if(position<0||position>lastIndex()){returnfalse;}if(imageIndexForPosition[position]==lastIndex()){returntrue;}else{返回false;}}上面lastIndex()的值为8。3.实现立方体的移动立方体移动的实现很简单，先清除旧位置的图形，然后在新位置绘制。varrefreshImagePositions=function(origin,target){varoriginRect=rectForPosition(origin);context.clearRect(originRect[0],originRect[1],originRect[2],originRect[3]);drawImageItem(imageIndexForPosition[target],target);}4.检查是否完成检查图案是否已经恢复，只需要遍历一次数组，看是否有序。varcheckIfFinish=function(){for(varindex=0;index
