正式開博記錄，想和很久但一直沒有執行的新個人項目-- 拼圖游戲。 完全由前端技術完成。從簡單粗糙到復雜精細。

為了督促自己持續推進該項目，立博為證。 之后會陸續將文檔、計劃補充上來。都是非官方非正式的文檔，可能不遵從任何格式和規范，僅僅為了自己看得懂，方便開展工作而寫。

以下是簡要的分析文檔，會隨著項目進行不斷完善。

View Code 拼圖游戲分析文檔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/

? ? ? 下面是我的解決方案的代碼片段：? ? ?

View Code 1 var fl1 = $d("fl1"), 2 imgSrc; 3 4 if(window.getSelection) // is firefox 5 { 6 imgSrc = window.URL.createObjectURL(fl1.files[0]); 7 } 8 else 9 { 10 imgSrc = fl1.value; 11 } 12 13 var img = document.createElement("img"); 14 img.src = imgSrc; 15 img.alt = ''; 16 17 document.body.appendChild(img);

? ? ? 這里主要用到方法window.URL.createObjectURL，傳入參數為file控件的files中的一個實例，如file.files[0]。

? ? ? 第一個問題順利解決。

? ? ? 2013.01.25， 事后發現一個問題，原來在Chrome中返回的文件完整路徑顯示都是在C:\fakepath\目錄下的，這是一個遺漏，不過還好，這并不影響本項目的實現，因為一樣可以通過這個虛擬路勁實現加載本地圖片。

?

?

?

轉載于:https://www.cnblogs.com/bee0060/archive/2013/01/22/2861527.html

總結

以上是生活随笔為你收集整理的新个人项目-- 拼图游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。