用原生JavaScript实现简单拼图

前言

本文主要解释如何使用原生JavaScript

来实现一个简单的拼图游戏。

一、游戏的基本逻辑

想要用一种语言开发游戏，首先要知道如何用这种语言来实现一些基本的逻辑，比如图像绘制、交互处理、定时器等等。

1.绘图图形

图形绘制是一切的基础，这里用JavaScript在画布上进行绘制。也就是说，先在html中创建canvas元素，然后在JavaScript中通过id获取这个元素，再通过canvas获取对应的上下文，为后续的绘制做准备。

canvasvar id=' background ' width=' 450 px ' height=' 450 px '/canvasvar background=document . getelementbyid(' background ')；var context=background . getcontext(' 2d ')；您可以通过上下文的drawImage方法来绘制图片，该方法被相应地封装：

注意：我们应该等图片加载后再绘图，即在onload中调用drawImage方法，否则绘图会失败。

var drawImageItem=函数(索引，位置){ var img=new Image()；img.src='。/image/dog _ 0“String(索引1)”。jpg '；img . onload=()={ var rect=rectForPosition(position)；context.drawImage(img，rect[0]，rect[1]，rect[2]，rect[3])；}}画完图片后，我们需要动态刷新视图，否则画布只是一张静态图片。如果是简单的图形刷新，只需在原来的位置重新绘制并覆盖即可。然而，有时我们只需要移除现有的图形，而不需要绘制新的图案。例如，在拼图游戏中，将一个方块移动到另一个位置后，需要清空原来的位置。

Clear可以通过上下文的clearRect方法来实现。以下是清除画布区域的代码：

var origin rect=rectForPosition(origin)；context . clear rect(origin rect[0]，originRect[1]，originRect[2]，origin rect[3])；2.事件处理

在绘制完图形之后，我们还需要对玩家的输入事件进行处理，然后根据输入事件决定什么时候刷新视图。输入事件可以分为三种：手机上的触摸屏事件；在电脑上，有鼠标和键盘事件。

JavaScript中对触摸屏和鼠标点击的监控是一样的，是通过canvas的onclick事件回调的，如下所示：

//点击background . onclick=function(e){ }；我们可以通过e.offsetX和e.offsetX获得触摸点在画布中的位置。

注：画布坐标原点在左上角，即左上角坐标为(0，0)。

键盘的按键点击通过onkeyup、onkeydown和文档的其他事件被调用。Onkeyup指的是提键事件，onkeydown指的是按键事件。我们可以通过keyCode知道当前具体哪个键，然后根据不同的键处理不同的逻辑，如下：

if(event . key code==' 37 '){//left//做点别的} if(event。key code==' 38 '){//up//做点别的} if(event。keycode==' 39') {//right//做点别的} if(event。keycode==' 40') {//down //做点什么}3。计时器

有时，除了在玩家输入时刷新视图，还需要定期刷新视图。例如，在吃蛇游戏中，需要定期刷新蛇的位置。

此时，我们需要一个计时器来执行代码，以定期刷新视图。我们通过setInterval方法实现定时器功能：

setInterval('run()'，100)；上面的代码意味着每100毫秒执行一次run方法。

二、拼图游戏的基本逻辑

有了游戏的基本逻辑，我们再来看看拼图的逻辑是如何实现的。

1.生成随机序列

因为不是任何序列都可以通过翻译还原，所以我们不能简单地生成一个随机序列。例如，序列1、0、2、3、4、5、6、7、8无论如何翻译都无法还原。

这里我们预先设置四个可恢复的序列，随机选择这四个序列中的一个，然后进行几个步骤的模拟翻译。为了尽可能保证初始序列的多样性，也保证了序列的可约性。具体代码如下：

var setupRandomPosition=function(){ var list 1=[4，3，2，8，0，7，5，6，1]；var list2=[2，0，5，6，8，7，3，1，4]；var list3=[3，7，2，4，1，6，8，0，5]；var list4=[3，2，4，1，7，6，5，0，8]；var list=[list 1，list2，list3，list 4]；imageIndexForPosition=list[parsent(math . random()* 4)]；//获取空位置var emptyPosition=0；for(var I=imageindexfor position . length-1；I=0；I-){ if(imageindexfor position[I]==last index()){ emptyPosition=I；打破；} } background . emptyPosition=emptyPosition；//随机运动次数var次数=10；while(times-){////获取随机数，决定要移动空缺的哪个位置。var direction=parseint(数学。random()* 4)；var target=-1；if(方向==0){ target=topOfPosition(emptyPosition)；//up} else if(方向==1) {target=leftofposition(空位置)；//left } else if(direction==2){ target=right of position(空位置)；//right} else if(方向==3) {target=位置底部(空位置)；//if(target 0 | | target last index()){//的位置非法。继续下一个循环。} var result=moveImageIfCanAtPosition(目标)；如果(结果=0) {//如果移动成功，更新emptyPosition=target}}}2.确定盒子是否可以移动

保存序列时，用9个数字0 ~ 8保存，空白方块是数字8的位置。因此，判断是否可以移动的唯一条件是目标位置的值是否为8。代码如下：

var isposionempty=function(position){ if(position 0 | | position last index()){ return false；} if(imageindexfor position[position]==last index()){ return true；} else { return false}}上面lastIndex()的值是8。

3.实现区块移动

箱体运动的实现非常简单。首先，清除旧位置的图形，然后在新位置绘制它。

var refreshImagePositions=函数(原点，目标){var originRect=rectForPosition(原点)；context . clear rect(origin rect[0]，originRect[1]，originRect[2]，origin rect[3])；draw imageitem(imageindexfor position[target]，target)；}4.检查是否完成

要检查模式是否已经恢复，您只需要遍历数组一次，看看它是否有序。

var checkifffinish=function(){ for(var index=0；index imageindexfor position . length；index ) {if (index！=imageindexfor position[index]){ return false；} }返回true}5.交互式事件屏蔽

模式恢复后，我们不希望玩家通过键盘或鼠标移动盒子。此时，我们需要屏蔽交互事件。

实现这个目标只需要一个标志位：

//

单击background . onclick=function(e){ if(is finish){ return；}//做某事}；//键盘按钮事件document . onkeyup=function(event){ if(is finish){ return；}//做点什么}模式恢复后，标志位isFinish会设置为true，然后在屏幕点击和键盘按键响应事件开始时加入判断。如果结束了，箱子移动的逻辑就不会继续了。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。