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