Posted on by — Leave a comment

[4 – 遊戲邏輯] 產生初始盤面

棋盤設計

用一個陣列來代表盤面，裡面儲存1~N來代表不同的圖形

隨機產生盤面

觀察連連看遊戲裡，同樣的圖形通常會有四個，因此如果盤面是10×10的話，總共會有100的icon，一種icon會有四個，則代表會有25種不同的icon。

一開始為了方便測試，先製作6*6=36的棋盤，這樣會有36/4=9種不同的icon。

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檔案的內容如下：

<!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&#91;0&#93;==$parent.$index&&select1&#91;1&#93;==$index && selected)}"
        ng-click="click($parent.$index,$index)">{{x}}</td>
  </tr>
</table>
</body>
</html>

js檔案的內容如下：

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

下載後請執行下列指令安裝
npm install

安裝後可以用下列指令來打開網站
gulp default

就可以成功打開網頁看到專案的結果了。

Leave a Reply