Claire's Blog

棋盤設計 用一個陣列來代表盤面，裡面儲存1~N來代表不同的圖形 隨機產生盤面 觀察連連看遊戲裡，同樣的圖形通常會有四個，因此如果盤面是10×10的話，總共會有100的icon，一種icon會有四個，則代表會有25種不同的icon。 一開始為了方便測試，先製作6*6=36的棋盤，這樣會有36/4=9種不同的icon。 這時候可以看到已經會有一個隨機產生不同資料的6×6盤面了 呈現陣列內容 接著在邏輯撰寫的版本因為為了測試方便，我們使用angularJS來呈現這個棋盤，因為angular有bindle資料的功能，可以讓棋盤消除更加的容易。 html檔案的內容如下： js檔案的內容如下： 上面的程式碼可以產生一個符合陣列內容的table盤面，裡面標明數字，如果任選一個數字，底部會反紅做提示，若選擇的第二個數字與第一個所選的數字相同，則會把所選的值存在select2，並且把selected的標籤設定為false。 上面程式碼的產出如下： 這邊是js bin的連結：https://jsbin.com/raqilezuye/edit?html,js 改使用Typescript開發 因為後面的程式邏輯將會越來越複雜，因此要將上面在JS Bin開發的程式碼搬到本地端的project上。 改好後的專案在此：ironman2018-3 下載後請執行下列指令安裝 安裝後可以用下列指令來打開網站 就可以成功打開網頁看到專案的結果了。

VS Code Visual Studio Code（簡稱VS Code）是一個由微軟開發的IDE，它最大的優點就是它是完全免費且Open Source的。它支援偵錯，並內建了Git版本控制功能，同時也具有開發環境功能。我個人覺得他在算是滿方便好用的，自動提示、自動補完和顏色選擇功能都很強大。 這邊是下載連結：Download Visual Studio Code NPM NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。 過去如果我們想要使用jQuery，就會需要去下載一個JQuery的Library檔案放進專案目錄裡。但是當這樣的Library庫檔案越來越大，而且越來越多時，就會較難管理，也會造成svn或git等版本管理系統要多去管控一些根本不屬於這個專案的程式碼，Library之間的版本管理也會較為困難。另外很多元件庫或許只需要在開發時期用到，在部署時不需要用到。這些都會讓套件的管理增加複雜度。因此現在大多數的前端工程師都會使用npm來做套件管理的工具，能夠解決上述的那些問題。 安裝npm要先去安裝Node.js。Node.js 在 0.6.3 版本開始內建 npm，讀者安裝的版本若是此版本或更新的版本，就可以略過以下安裝說明。 若要檢查 npm 是否正確安裝，可以使用以下的指令： 要初始化一個npm專案，則使用下列指令，然後依序出現相關項目來讓我們填寫 按下enter後就會在資料夾目錄裡面看到資料夾內增加了一個名為package.json的檔案，這個檔案會紀錄這個專案的許多相關資訊。 下面為一個簡單的package.json的範例 TypeScript TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個嚴格超集，並添加了靜態型別和類別基礎的物件導向特性。TypeScript是由C#的首席架構師以及Delphi和Turbo Pascal的創始人安德斯·海爾斯伯格參與了TypeScript的開發。 TypeScript設計目標是開發大型應用，然後轉譯成JavaScript。由於TypeScript是JavaScript的嚴格超集，任何現有的JavaScript程式都是合法的。TypeScript程式物件導向的特性能讓我們在寫TypeScript的時候，有像是寫強型別的語言一樣輕鬆自在，IDE 也可以幫你檢查基本的錯誤。在將TypeScript編譯成JS時，也可以設定是要轉成那種版本的JS，如：EC5、EC6。避免在寫程式還要去注意不同版本JS的兼容性。 安裝TypeScript的命令行工具安裝方法如下： 編譯ts文件的方法如下 但是當我們在開發一個較大型的專案時，一般我們不可能一個一個檔案用上面的指令去complier，這時候我們會設定一個typescript的config檔案：tsconfig.json…

何為演算法 演算法的簡單定義：輸入 + 演算法 = 輸出 這一篇文章有非常詳細的介紹演算法是什麼：初學者學演算法-談什麼是演算法和時間複雜度 一般判斷演算法的好壞是使用『空間複雜度』和『時間複雜度』來評估， 時間複雜度 所謂時間複雜度，指的是執行一段演算法，跑完整個運算邏輯所要花的時間。 雖然這個複雜度名為『時間複雜度』，但實際上，我們要真正衡量某個演算法時，是以步驟次數來看。 如果一個演算法執行的步驟是固定的，無關輸入的值而改變，那我們會記成 O(1)，例如： 而下面這個演算法： function(int n){ for(i=0;i

連連看遊戲起源 遊戲《連連看》顧名思義就是找出相關聯的東西連起來，做關連配對的一種益智遊戲。 最早是使用在幼兒教育的教具上，由於玩法簡單，常用作兒童啟蒙教育遊戲，建立兒童對物品之間的關連性連結。有一種字圖連連看，是專供幼童識字認圖的遊戲，與一般連連看不同的是它並非以一對相同圖案成對，而是以字配圖成對。相關內容連連看則是以兩張內容相關的卡片（可以是字或圖）配成對代替相同圖案。 後來出現了桌面遊戲的連連看，最早期的形式是一副卡片中每種圖案有相同的兩張，先洗牌，然後排好卡片，背面朝上，玩家輪流揭開卡片，每次揭兩張，如兩張圖案不同則回復背面朝上的狀態，如揭到兩張圖案相同則取走卡片，到桌上所有卡片都被取走時即結束遊戲，手上最多卡片者為勝利者。 隨著電腦的普及，連連看遊戲也成為一款經典的電腦小遊戲。在電腦遊戲中的一種規則則是在找到兩幅相同圖案後，若能用三條以內的直線將兩幅圖案連接起來，分別點一下兩幅圖案，即可消除。連連看遊戲後來經歷了桌面遊戲、在線遊戲、社交遊戲三個過程。 連連看電腦版最初是由台灣的陳一進和簡誠志從街機里的四川省（四川麻將）和中國龍改進、移植到PC上的，現在有了各種不同的版本。 台灣的連連看流入大陸以後風靡一時，也吸引眾多程式師開發出多種版本的連連看，其中kawai所開發的《寵物連連看》受到很大的歡迎。隨著Flash應用的流行，網上出現了多種線上Flash版本連連看。如：水晶連連看、果蔬連連看、阿達連連看等，連連看以簡單不無聊的遊戲特色吸引了一大批的女性玩家。2008年，隨著網際網路的普及和開放平台的興起，《連連看》被引入了社交網站，與個人空間相結合，被快速的傳播，成為一款熱門的社交遊戲。 益智遊戲發展介紹 益智遊戲可以是一人玩家，也可以是多人對戰。 連連看是一種益智型遊戲，屬消除型益智遊戲。益智遊戲要求玩家用自己的智慧來解決遊戲中的難題，達到過關的目的。新的商業遊戲通常會加上動作要素，要讓玩家手腦並用，訓練協調性，經典的代表作有俄羅斯方塊、泡泡龍系列、憤怒鳥、Candy Crush以及幾年前很紅的2048。傳統的益智遊戲以動腦為主，如數獨、推箱子等。這類遊戲對玩家而言較難過關，導致大量玩家中途放棄。 後來俄羅斯方塊出現，為落下型遊戲始祖，此遊戲最初是由阿列克謝·帕基特諾夫在蘇聯設計和編寫。此遊戲除了成為一個熱門的家用電腦和街機遊戲外，還成為Game Boy史上最受歡迎的遊戲。《電子遊戲月刊》在2007年將此遊戲列為「最偉大的100個遊戲」中的第1位。直到今日，俄羅斯方塊是有史以來最暢銷的電子遊戲。 最新的許多益智遊戲結合了消除型與落下型遊戲的特色，利用落下隨機元素增加了遊戲的隨機性，並增加遊戲特殊道具，讓遊戲更加有趣。如Candy Crush便為一例，Candy Crush與連連看相同皆為消除遊戲，三個相同顏色的方塊可以互相消除，並會隨機落下新的不同顏色的方塊，特殊的消除模式可以產生特殊道具。這樣的遊戲方式有挑戰性，而且適合打發時間，因此成為Facebook平台上最受歡迎遊戲，擁有4億5千6百萬每月玩家。 後來的神魔之塔、Dragon Puzzle更結合了角色扮演與卡牌遊戲及線上對戰的特色，使得益智型遊戲的樣貌更加的多元化。植物大戰殭屍則添加了即時戰略遊戲及卡牌遊戲的特色，讓益智型遊戲的面向變得更多元化，此作品獲得了相當正面的評價，在GameRankings的評分達到89.5%，Metacritic的評分則是88。 下圖為不同遊戲中所包含的遊戲性元素： 由上圖可知益智型遊戲在現今的手機市場上，因手機版面限制與操作便利性的關係，益智遊戲比起傳統RPG遊戲或動作遊戲在手機市場上占上更多的優勢。也因著益智遊戲的市場越來越大，後期的益智遊戲所包含的遊戲元素的面向越來越廣，不論是卡牌元素、即時戰略遊戲元素、操作手感元素等，都可以讓遊戲的趣味性更加提升，線上多人遊戲的模式更能增加玩家的黏著度。 設計一款有趣的益智遊戲，其中的演算法設計十分重要，例如物理遊戲的物理公式設計、相消遊戲的消除條件、每個關卡的過關條件、道具設計、遊戲競爭性，上述的每一個項目若能夠越符合大自然的法則，會讓玩家玩起來更加的直覺，也是遊戲好玩的必要關鍵。當然開發一款大型的遊戲，美術、音效、程式、企劃缺一不可，對於程式開發者而言，學習適合的語言工具也十分重要。這些與遊戲設計相關的元素，在這次的鐵人賽裡面，我都會在不同的章節裡提到。 連連看開發模式規劃 這一次的鐵人賽主題裡，我主要會分為兩個教學線。 主線為連連看遊戲邏輯的分析與程式碼撰寫，目標為撰寫出正確的邏輯，需能正確判別兩個圖形間是否存在小於兩個轉彎處的連線存在，並且能夠隨機產生隨機的遊戲牌面，以陣列來儲存遊戲現在的資料。 副線則為使用Pixi.js來實際開發一款具有畫面、效果及音效，真正具有遊戲性的網頁H5遊戲。 在這邊所使用的PixiJS是一款2D的HTML5遊戲引擎，可以利用WebGL的功能來做2D的圖像處理，因此在網頁上能夠有著很不錯的效能表現。PixiJS是採用Javascript來開發的，但我在這邊為了開發容易度及順暢度以及不同版本JS的兼容性考量，我採用了TypeScript版本的PixiJS來做開發，並用npm來做套件管理、利用gulp來做自動化管理工具。 在美術素材來源上，我是至Unity Asset Store尋找並下載免費素材來使用。在遊戲畫面設計及圖片動畫處理上，則是利用Adobe Animate CC來繪圖並產生連續圖檔（同Texture Packer的功能），動態效果則使用了GSAP的Tween工具來實現。 在音效的部份，我滿推薦小森平的免費音效，裡面的音效都有分門別類的整理好，並且可以線上試聽後直接下載，可以很容易的找到適合的音效。程式上的音效處理我則使用howler來做音效載入與播放管理的工具。背景音樂的部份，我則是至Youtube音樂音效庫尋找並下載適合的背景音樂。 在IDE的部份，我是使用VS Code來做開發，配合PixiJS devtools及chrome dev tools來做除錯、測試和畫面檢查。 教學項目 下圖為這30天內，我預計會提到的必要項目，也就是連連看邏輯的教學項目：…