新个人项目-- 拼图游戏

正式开博记录，想和很久但一直没有执行的新个人项目-- 拼图游戏。 完全由前端技术完成。从简单粗糙到复杂精细。

为了督促自己持续推进该项目，立博为证。 之后会陆续将文档、计划补充上来。都是非官方非正式的文档，可能不遵从任何格式和规范，仅仅为了自己看得懂，方便开展工作而写。

以下是简要的分析文档，会随着项目进行不断完善。

拼图游戏分析文档

1.    简要描述
玩家选择一个本地图片文件，提交后，游戏加载图片后，提供多种拼图数量模式，玩家选择模式后，根据选择的模式将图片拆成多个小块。玩家通过拼图方式将这些小块拼回原图的样子。 当拼得完全正确时，提示拼图完成。游戏结束。

2.    简要游戏流程
a)    UI上有选图区、拼图去、闲置区、预览区。
b)    玩家在客户端选择图片，作为拼图的原图
c)    玩家选择图片后，加载并计算图片尺寸。
d)    根据计算得到的图片尺寸计算出几种（暂定为2或3种）拼图模式，即决定拆成多少小块。
e)    玩家选择拼图模式后，将原图拆成所需的小块个数。
f)    将拆出的小块打乱
g)    将打乱的小块放置于闲置区。
h)    拼图区初始化时，出现和小块数量相同的小格，每个小格可以放一个小块，用于进行拼图。
i)    可将小块放置于拼图区的小格中，或丢回闲置区。
j)    每次移动小块时都检测是否拼图完成。
k)    完成拼图时弹出提示，游戏结束。
3.    对象分析
a)    对象列表
i.    拼图原图
1.    属性
a)    路径
b)    尺寸（宽、高）
c)    拆分模式（横向*纵向数量）
d)    小块数量
ii.    拼图区小格
1.    属性
a)    处于其中的拆分出的小块
b)    坐标
iii.    拆分出的小块
1.    属性
a)    当前坐标（可以是拼图区的坐标，若没有，表示处于闲置区）
b)    正确坐标
c)    背景position
iv.    小块工厂
v.    小块移动控制器
1.    改变小块坐标属性
2.    将小块从闲置区移至拼图区指定坐标
3.    将小块从拼图区一个坐标移至另一个坐标
4.    将小块从拼图区移至闲置区
vi.    拼图完成判断器
vii.    原图分析器
1.    新建原图缓存img对象
2.    计算原图尺寸（长宽）
3.    分析出原图可以提供的切割模式
4.    算出原图横向可切割数
5.    算出原图纵向可切割数
6.    
b)    对象属性：
i.    
4.    功能分析
5.    对象功能清单

 1.开发中遇到的第一个问题：

    firefox中，无法获取<input type='file' />控件中文件的完整路径。 但肯定是能解决的。 晚上再找方法。找到方法后将记录上来。

    找到解决方法了，先列出试过失败的方法：

     PS:也可能不是方法不对，而是我自己试的过程中出了错。我没严格验证过。

1.方法：使用选中file控件文本，然后用用firefox下的window.getSelection方法获取被选中的完整文件路径。
   结果： 失败。window.getSelection() 一直返回空。

2.方法：使用file控件.files[0].getAsDataURL()方法，获取文件完整路径。
   结果： 失败。因为FF7开始不认这个getAsDataURL方法了，而我用的版本是18.0.1。

3. 方法：使用firefox的nsIDOMFile接口，参考链接：
http://lz12366.iteye.com/blog/1198129
    结果： 失败。

      在经过多次失败后，在大牛微博（http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html）的评论中最后找到了解决方案。

      原来在safari、chrome、firefox、opera中，支持Data URI,Data URI的主要作用是以字符串代替数据，可以直接将Data URI设置给img对象的src属性，就能直接加载出图片，而且不需要新建http请求，直接将数据加载成img对象。具体可以查看另一位大牛的博客：http://dancewithnet.com/2009/08/15/data-uri-mhtml/

      下面是我的解决方案的代码片段：     

var fl1 = $d("fl1"),
            imgSrc;        

        if(window.getSelection) // is firefox
        {
            imgSrc = window.URL.createObjectURL(fl1.files[0]);            
        }
        else
        {
            imgSrc = fl1.value;
        }

        var img = document.createElement("img");
        img.src = imgSrc;
        img.alt = '';
        
        document.body.appendChild(img);

      这里主要用到方法window.URL.createObjectURL，传入参数为file控件的files中的一个实例，如file.files[0]。

      第一个问题顺利解决。

      2013.01.25， 事后发现一个问题，原来在Chrome中返回的文件完整路径显示都是在C:\fakepath\目录下的，这是一个遗漏，不过还好，这并不影响本项目的实现，因为一样可以通过这个虚拟路劲实现加载本地图片。