Well，今天正式决定开这个坑，主要用来记录我在开发flash小游戏的时候所掌握的一些小心得吧。碍于我写的小游戏都是别人公司的外包项目，所以我不可以把源代码发布出来，而是把核心的算法记录在这里，给那些小游戏开发新手做个教程（博主又TMD中二病发）。

———————————————————————————————————————————————————

思路

首先，我们要明白拼图游戏的玩法，玩家必须把一堆散乱的图片拼接成一幅完整的图片。那么对于开发者而言，如何实现把那堆散乱的图片和检测拼接完整就是拼图游戏的核心算法。

那么，接下来就是对着两个算法的初步分析：

｛1.打散的图片｝如果作为一个刚接触游戏开发的新手，初步想到的解决办法就是事先把图片用修图软件切割好，然后在批量导入到游戏中，随机打乱摆放。没错，对于新手，这个方法也许是最简单的方法，但是如果是有开发经验的游戏工程狮，那就不会单单看到这浅层的便捷而着急的开始写代码。

写代码最忌胡思乱想乱敲一通，有时候不妨花多点时间去想想，对于一个程序方案的最优解是什么，而作为新手，更应该去花这个时间。回到游戏，如果按照上面的思维把图在代码外先分割好在导入，那就会带来一个很大的问题：可扩展性。

如果在你做好这个游戏以后，客户或者玩家提出：“9张图片，太少了，玩起来很简单啊，没意思！”又或者“分割成了120张图，丧心病狂啊？这哪是小游戏？”再或者“唉，这图不好看，换一张试试”，这时候你要修改游戏了，现在有没有发现问题所在？你必须再打开修图软件，再次一张张等比例的分割原图，一两次这样的工作也许你还能吃得消，万一客户或者玩家提出修改上十次呢？那就是别人玩了两三局LOL你还在默默的修图了。

那怎么办？第二个思路，导入一张完整的图片，利用代码把它切割。如果又能是实现，那只需要用几个变量来控制分割的尺寸和张数，那修改这几个变量就能轻而易举的完成了。

｛2.检测拼接是否完整｝所谓完整，也就是把散乱的图片正确的拼接成了原图，如果打散图片那个步骤做得好，这个问题就很容易解决，只需要在分割后打乱顺序前给所有图片编号，随后再把用于填放小图片的碰撞盒也编上号码，如果检测到拖动到碰撞盒上的图片编号均与碰撞盒编号相同且全部都填上了，那就代表游戏通关。（下图帮助理解）

———————————————————————————————————————————————————

实现

｛1.用代码把图片切割｝

要做到这个功能，你必须先了解BitmapData类型和BitmapData.copyPixels 方法。BitmapData类型，你可以简单的理解成，当你new一个BitmapData，就等于new了一张图。而copyPixels方法是在目标 BitmapData 对象的目标点将源图像的矩形区域复制为同样大小的矩形区域。原型如下：

public copyPixels(sourceBitmap:BitmapData  ― 要从中复制像素的输入位图图像。源图像可以是另一个 BitmapData 实例，可以指当前 BitmapData 实例,
sourceRect:Rectangle                ― 一个矩形，定义要用作输入的源图像的区域,
destPoint:Point             ― 目标点，表示将在其中放置新像素的矩形区域的左上角,
[alphaBitmap:BitmapData][可选]                    ― 第二个 Alpha BitmapData 对象源,
[alphaPoint:Point][可选]              ― Alpha BitmapData 源中与 sourceRect 参数的左上角对应的点,
[mergeAlpha:Boolean][可选]            ― 布尔值：若要使用 Alpha 通道，请将该值设置为 true。若要复制不含 Alpha 通道的像素，设置为 false
) : Void

了解这两个东西后，那就好办了；

var PlayerBmp:Array = new Array  ;<span style="white-space:pre">   </span>//分割后的小图存放的数组
for (var i:int=0; i<分割数量; i++)
{var pos:Point = new Point(0,0);var rect:Rectangle=new Rectangle(需切割区域左上角X,需切割区域左上角Y,矩形区域宽度,矩形区域高度);var Texturebuf:BitmapData = new BitmapData(矩形区域宽度,矩形区域高度);Texturebuf.copyPixels(原图BitmapData,rect,pos);PlayerBmp[i] = new Array  ;PlayerBmp[i][0] = i;     //编码PlayerBmp[i][1] = new Bitmap(Texturebuf,PixelSnapping.AUTO,true);//贴图
}

这里需要注意的是new Rectangle的后面两个参数并不是right和bottom,而是width和height，也就是矩形区域的宽高。

这些都完成以后，只要把PlayerBmp[i][1]逐个放到随机的位置，便实现了打乱顺序。

｛2.检测拼接是否完整｝这个问题主要用到hitTestPoint方法，这个方法是AS3.0自带的其中一种碰撞检测方法，大家应该不会陌生，结合着这个方法在判断PlayerBmp[i][0]是否和所填放的碰撞盒的编码是否一致即可。

———————————————————————————————————————————————————

结语

看吧，其实这个小游戏很简单，相信就算是第一次写这个游戏的童鞋，看完这个以后应该也有一定的思路了。而我第一次写这一类的文章（其实就没写过文章！！），也不知道写的是好是坏，如果有错误的，请大家务必指出。最后，希望有人看，希望有人喜欢。

常见Flash小游戏开发核心思想笔记——《拼图》相关推荐

微信小游戏腾讯课堂《白鹭教育 - 成语大挑战小游戏开发》学习笔记
腾讯课堂<白鹭教育 - 成语大挑战小游戏开发>:https://ke.qq.com/course/287266 学习笔记首先这个视频课程简单介绍了一个小游戏的制作,包括新建项目.适配模式 ...
周云的FLASH小游戏开发教室
http://bbs.blueidea.com/thread-2799019-1-1.html
【第二届青训营-寒假前端场】- 「小游戏开发」笔记
前端场景下的游戏开发开发角色和链路为什么要用游戏引擎前端过渡到游戏开发游戏引擎市面上常见游戏引擎特定类型的客户端游戏引擎 The NVL Maker **RPG Maker** Web游戏 ...
微直播笔记｜三十分钟微信小游戏开发入门
微信小游戏在2017年12月28日正式上线.相对于传统的H5游戏,小游戏的优势十分明显,拥有微信庞大的用户量以及更好的兼容性,在天生适合微信社交生态的同时还不用担心被屏蔽.无疑,这或许是一个巨大的风口 ...
鹅厂内部干货|微信小游戏开发技术怎么应用？
作者介绍:陈阳(Younger) 2011年加入腾讯,现就职于腾讯游戏增值服务部,负责AMS游戏营销平台,致力于研究和推动Web及大前端相关技术的发展. 一.微信小游戏--H5小游戏及微信小程序微信 ...
微信小游戏开发技术与应用
作者介绍:陈阳(Younger) 2011年加入腾讯,现就职于腾讯游戏增值服务部,负责AMS游戏营销平台,致力于研究和推动Web及大前端相关技术的发展. 一.微信小游戏--H5小游戏及微信小程序微信 ...
基于Unity3D的AR小游戏开发【100011412】
本科毕业设计(论文) GRADUATION DESIGN(THESIS) 基于 Unity3D 的增强现实游戏程序摘要增强现实(AR)作为一项新兴技术近年来被越来越多的人群所获知,AR 也渐渐走进 ...
Cocos Crator开发攻略，小游戏开发全过程
COCOS微信小游戏开发完整记录 -> 结尾有惊喜背景因为我个人喜欢游戏,一直想做一小游戏,但是一直拖着,没时间做,现在终于在周末空闲时间做了一个微信小游戏. 第一次写技术文章,篇幅可能较长 ...
Flash 联网游戏开发基础课程
最新提示: A 课程 4月3号开始.课程刚刚开始... 课程主要教授AS3面向对象编程知识以及Flex开发环境.[适合的人群]适合那些还没有足够AS3编程经验以及不熟悉面向对象方式编程的开发者,比如: ...
《HTML5 Canvas核心技术图形、动画与游戏开发》读书笔记
<HTML5 Canvas核心技术图形.动画与游戏开发> 读书笔记文章目录 <HTML5 Canvas核心技术图形.动画与游戏开发> 读书笔记第1章基础知识第2章 ...

常见Flash小游戏开发核心思想笔记——《拼图》

思路

实现

结语

常见Flash小游戏开发核心思想笔记——《拼图》相关推荐

最新文章

热门文章