棋盤設計
用一個陣列來代表盤面，裡面儲存1~N來代表不同的圖形
隨機產生盤面
觀察連連看遊戲裡，同樣的圖形通常會有四個，因此如果盤面是10×10的話，總共會有100的icon，一種icon會有四個，則代表會有25種不同的icon。
一開始為了方便測試，先製作6*6=36的棋盤，這樣會有36/4=9種不同的icon。
|
1 2 3 4 5 6 7 8 9 |
var boardContent = [1,2,3,4,5,6,7,8,9]; //產生初始局面 boardContent = boardContent.concat(boardContent).concat(boardContent).concat(boardContent).sort(() => Math.random() > .5); boardContent = [boardContent.slice(0,6), boardContent.slice(6,12), boardContent.slice(12,18), boardContent.slice(18,24), boardContent.slice(24,30), boardContent.slice(30,36)]; |
這時候可以看到已經會有一個隨機產生不同資料的6×6盤面了
呈現陣列內容
接著在邏輯撰寫的版本因為為了測試方便，我們使用angularJS來呈現這個棋盤，因為angular有bindle資料的功能，可以讓棋盤消除更加的容易。
html檔案的內容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style>.red{background:red;}</style> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> select1=<input type="text" ng-model="select1" disabled> select2=<input type="text" ng-model="select2" disabled> <table border="1" width="200"> <tr ng-repeat="lines in boardContent track by $index"> <td ng-repeat="x in lines track by $index" ng-class="{'red':(select1[0]==$parent.$index&&select1[1]==$index && selected)}" ng-click="click($parent.$index,$index)">{{x}}</td> </tr> </table> </body> </html> |
js檔案的內容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var boardContent = [1,2,3,4,5,6,7,8,9]; //產生初始局面 boardContent = boardContent.concat(boardContent).concat(boardContent).concat(boardContent).sort(() => Math.random() > .5); boardContent = [boardContent.slice(0,6), boardContent.slice(6,12), boardContent.slice(12,18), boardContent.slice(18,24), boardContent.slice(24,30), boardContent.slice(30,36)]; //產生盤面 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.select1 = [-1,-1]; $scope.select2 = [-1,-1]; $scope.selected = false; $scope.boardContent= boardContent; $scope.click = function(x,y) { if($scope.selected){ console.log(boardContent[$scope.select1[0]][$scope.select1[1]]) console.log(boardContent[x][y]) if(boardContent[$scope.select1[0]][$scope.select1[1]] == boardContent[x][y]){ $scope.select2 = [x,y]; } $scope.selected = false; }else{ $scope.select1 = [x,y]; $scope.selected = true; } }; }); |
上面的程式碼可以產生一個符合陣列內容的table盤面，裡面標明數字，如果任選一個數字，底部會反紅做提示，若選擇的第二個數字與第一個所選的數字相同，則會把所選的值存在select2，並且把selected的標籤設定為false。
上面程式碼的產出如下：
這邊是js bin的連結：https://jsbin.com/raqilezuye/edit?html,js
改使用Typescript開發
因為後面的程式邏輯將會越來越複雜，因此要將上面在JS Bin開發的程式碼搬到本地端的project上。
改好後的專案在此：ironman2018-3
下載後請執行下列指令安裝
|
1 |
npm install |
安裝後可以用下列指令來打開網站
|
1 |
gulp default |
就可以成功打開網頁看到專案的結果了。