这篇文章给大家分享的是有关如何利用原生的JavaScript实现简单拼图游戏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>一、游戏的基础逻辑
想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制,交互的处理,定时器等。
<强> 1,图形绘制
图形绘制是一切的基础,这里使用JavaScript在画布上进行绘制。即先在html中创建帆布元素,然后在JavaScript中,通过身份证拿到这个元素,并且通过帆布拿到对应的上下文环境的背景下,为后续的绘图做好准备。
通过上下文的drawImage方法可以绘制图片,这里进行了相应的封装:
<强>注:这里要等图片加载完毕后再进行绘制,即在> var drawImageItem =,函数(指数,位置),{ var img =, new 图像(); img.src =& # 39;。/图像/dog_0& # 39;, +,字符串(指数+ 1),+,& # 39;jpg # 39;; img.onload =,(),=祝辞,{ var rect =, rectForPosition(位置); context.drawImage (img,矩形[0],,矩形[1],,矩形[2],,矩形[3]); } }
在绘制图片之后,我们还需要去动态刷新视图,否则画布就只是一张静态的图片。如果是简单的图形刷新,只需在原来的位置重新绘制,进行覆盖即可。但有时候我们只需要将原来已存在的图形清除掉,而不需要绘制新图案。比如在拼图游戏中,将一个方块移动到另一个位置后,需要清空原来的位置。
通过上下文的clearRect方法可以达到清除的目的。以下是清除画布的某个区域的代码:
<强> 2,事件处理
有了图形的绘制后,我们还需要处理玩家的输入事件,然后根据输入事件,来决定什么时候刷新视图。输入事件可以分为3种:在手机上有触屏事件;在个人电脑上,有鼠标和键盘事件。
JavaScript中对触屏和鼠标点击的监听是一样的,都是通过画布的>//,屏幕点击 时间=background.onclick 函数(e), { };
我们可以通过e。offsetX e。offsetY来获取触控点在画布中的位置。
<强>注:画布的坐标原点在左上角,即左上角的坐标是(0,0)。
键盘的按键点击则是通过文档的> if (event.keyCode ==, & # 39; 37 & # 39;),{,//左//do 一些 },else if (event.keyCode ==, & # 39; 38 & # 39;),{,//上//do 一些 },else if (event.keyCode ==, & # 39; 39 & # 39;),{,//右//do 一些 },else if (event.keyCode ==, & # 39; 40 & # 39;),{,//下//do 一些 }
<强> 3,定时器
有时候,除了在玩家输入的时候需要去刷新视图,还需要每隔一段时间定时去刷新视图。比如在一个贪吃蛇游戏中,就需要每隔一段时间就去刷新蛇的位置。
这个时候我们就需要一个定时器,让它每隔一段时间去执行一段刷新视图的代码。我们通过setInterval方法来实现定时器功能:
上面这段代码表示每隔100毫秒,去执行一次运行方法。
<强>二、拼图的基础逻辑
有了游戏的基础逻辑、下面来看一下如何实现拼图的逻辑。
<强> 1,生成随机序列
因为不是任意序列都可以通过平移的方式来还原,所以我们不能简单地生成一个随机序列。比如1,0,2,3,4,5,6,7,8这个序列,无论怎么平移,都不可能还原。
这里采取的做法是:预先设置了4个可还原的序列,先从这4个序列中随机选取一个,然后再对序列进行模拟平移若干步骤。以此来尽可能地保证初始序列的多样性,也保证了序列的可还原性。具体代码如下:
