資訊專欄INFORMATION COLUMN
摘要：所以在此次開發(fā)中，嘗試了小步快跑快速迭代的方法。開發(fā)，不僅是在開發(fā)運(yùn)用上的提升，還是一個(gè)開源項(xiàng)目的完整實(shí)踐。由于時(shí)間原因，在開發(fā)完基礎(chǔ)版本后就去做別的項(xiàng)目。所以，好的文檔是項(xiàng)目的開門鑰匙。兩個(gè)項(xiàng)目相輔相成。
歡迎交換友鏈： laker.me--進(jìn)擊的程序媛涉及的兩個(gè)項(xiàng)目
Github：https://github.com/younglaker
V信: lakerHQ （請(qǐng)注明‘來自博客’）
Pixler：一個(gè)用于設(shè)計(jì)像素圖片（拼豆）的應(yīng)用。
Easycanvas.js： Canvas 繪圖庫
開發(fā)背景我對(duì)拼豆感興趣，在做拼豆前要設(shè)計(jì)圖紙，類似畫像素圖。我試用了網(wǎng)上能搜到的幾個(gè)拼豆圖紙?jiān)O(shè)計(jì)的應(yīng)用，但是沒有適合我的，我就想著自己開發(fā)一個(gè)。
算法原理拼豆圖紙就類似于像素圖，我剛開始構(gòu)思如何開發(fā)的時(shí)候，想著它有點(diǎn)像下棋。所以我參考了五子棋的下棋原理。我在五子棋的算法上優(yōu)化了鼠標(biāo)點(diǎn)擊時(shí)落腳的位置的計(jì)算方法，即鼠標(biāo)點(diǎn)擊時(shí)，獲取點(diǎn)擊位置，計(jì)算出它處于哪個(gè)方格中，在那個(gè)方格中畫上一個(gè)像素點(diǎn)，用一個(gè)二維數(shù)組記錄方格中已繪制的位置。這就完成了初步的拼豆像素圖的算法設(shè)計(jì)。
在以往的開發(fā)中，我都要求每一步都精益求精，導(dǎo)致整體進(jìn)度緩慢，常常停留在初步階段，就把自己繞暈。所以在此次開發(fā)中，嘗試了小步快跑、快速迭代的方法。
第一版：快速開發(fā)第一版本開發(fā)的時(shí)候，我盡量減少對(duì)性能、代碼優(yōu)化的思考，在最快的速度完成基本功能，也就是如何繪制像素點(diǎn)和刪除像素圖。
這樣沒有束縛的情況下，只需要集中精力完成功能的算法，很快就實(shí)現(xiàn)基本功能。
當(dāng)然，代碼也是很簡(jiǎn)單粗暴的，就需要第二版的完善。
第二版：性能和代碼優(yōu)化首先，把畫布分為兩層，一層是參考線畫布，一層是繪圖畫布。參考線畫布在初始化后就不需要修改，所有操作只需要在繪圖畫布上進(jìn)行，減少了繪圖時(shí)候的工作量。
然后，把通用功能的代碼封裝成公共函數(shù)，減少冗余。
第三版：封裝繪圖庫，并在應(yīng)用中不斷完善Pixler 主要代碼是 Canvas 繪圖，所以可以把 Canvas 主要繪圖功能封裝一下，多帶帶成一個(gè)繪圖庫，減少主代碼冗余，也方便在其他項(xiàng)目中引用。
在大學(xué)期間，我研究 jQuery 的時(shí)候就仿著寫了一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)的 JavaScript 框架 Oct.js，加上第一、第二版本對(duì) Canvas 接口的熟悉，所以開發(fā)起來并不困難。但在接口設(shè)計(jì)上重復(fù)弄了幾次，這部分的經(jīng)驗(yàn)我也寫了一篇文章 《EasyCanvas：連續(xù)畫圖的一些總結(jié)》 記錄了一下。
開發(fā) Easycanvas.js，不僅是在 JavaScript 開發(fā)、Canvas 運(yùn)用上的提升，還是一個(gè)開源項(xiàng)目的完整實(shí)踐。期間有一個(gè)小伙伴加入?yún)⑴c了合作，可惜沒參與太多功能就退出了，但還是一次很好的開源項(xiàng)目的體驗(yàn)。
在開發(fā)代碼的過程中，還編寫了相關(guān)的文檔。接口不斷優(yōu)化修改，文檔也不斷的調(diào)整，就連文檔格式也做了多次調(diào)整，工作量是不小，但也不厭其煩。
由于時(shí)間原因，在開發(fā)完 Easycanvas.js 基礎(chǔ)版本后就去做別的項(xiàng)目。間隔一段時(shí)間回來再看，基本沒有有最初開發(fā)時(shí)候的熟悉感，這就得靠我之前寫的文檔了。所以，好的文檔是項(xiàng)目的開門鑰匙。
就這樣，我像一個(gè)剛接觸這個(gè)繪圖庫的用戶一樣，參照文檔，把 Easycanvas.js 重構(gòu)了 Pixler 的繪圖代碼。同時(shí)，在應(yīng)用的過程中發(fā)現(xiàn)了 Easycanvas.js 的不足，又反過來進(jìn)行完善。兩個(gè)項(xiàng)目相輔相成。
小結(jié)相比之前開發(fā)的 Oct.js，只有開發(fā)和單元測(cè)試，并沒有大規(guī)模地應(yīng)用到實(shí)際項(xiàng)目中（我也嘗試過，但一旦項(xiàng)目做大，就涉及到 jQuery 插件 ，就不得不引入 jQuery，就和 Oct.js 重復(fù)了，就只好把 Oct.js 刪掉）。
所以，這次 Pixler 和 Easycanvas.js 的開發(fā)，從0到1再到100，是一個(gè)很好的經(jīng)歷。不僅是編程技能上的提升，還是項(xiàng)目管理上積累了經(jīng)驗(yàn)。
至此 Pixler 和 Easycanvas.js 完成了一個(gè)較為穩(wěn)定的版本，但還有很大的提升空間，我都一一記錄在 Todolist 上了，等我一一突破。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95202.html
摘要：在彈一彈游戲中，小球不能向上發(fā)射。這里又有一個(gè)坑彈一彈游戲中，剛射擊出去的小球是不受重力影響的不然瞄準(zhǔn)還有什么意義。 前言 半年前用js和canvas仿了熱血傳奇網(wǎng)游（地址），基本功能寫完之后，剩下的都是堆數(shù)據(jù)、堆時(shí)間才能完成的任務(wù)了，沒什么新鮮感，因此進(jìn)度極慢。這次看到微信《彈一彈》比較火，因?yàn)樯婕暗轿锢硪妫榱苏鎸?shí)），于是動(dòng)手試了一下。一共用了10個(gè)小時(shí)，不僅完成了這個(gè)demo，...
摘要：游戲開發(fā)實(shí)戰(zhàn)主要講解使用來開發(fā)和設(shè)計(jì)各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時(shí)，還通過游戲開發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實(shí)戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計(jì)各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時(shí)，還通過游戲開發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫有和等項(xiàng)目，這些圖表庫對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...
摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫有和等項(xiàng)目，這些圖表庫對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...
閱讀 1631·2021-11-16 11:44
閱讀 7582·2021-09-22 15:00
閱讀 4594·2021-09-02 10:20
閱讀 2007·2021-08-27 16:20
閱讀 2427·2019-08-26 14:00
閱讀 2935·2019-08-26 11:44
閱讀 1682·2019-08-23 18:33
閱讀 1906·2019-08-22 17:28
