以OO的思想利用JS來實現五子棋

來源:互聯網
上載者:User

下載地址:http://files.cnblogs.com/helimin19/Gobang.rar

先說下我認為的五子棋的實現原理: 判斷橫向、樅向、斜線方同、反斜線方向 四個方向中是否存在連續五個一樣的棋子。

現在我們以OO的思想來分析期實現原理:

五子棋的基本就是棋盤,怎個棋盤又是由一個一個的格子組成,所以我們得到了兩個對象:棋盤、棋盤格子

我們先分析一下五子棋的基本單元(棋盤格子的)屬性與方法:

屬性:
 1.  單元格都有其大小,所以我們可以設定屬性寬與高來指定
 2.  當單元格放在棋盤中後,其單8個方向的單元格我們分別使用:Top,Bottom,Left,Right,TopRight,BottomRight,BottomLeft,TopLeft來表示
 3.  其8個方向上與自己相同的棋子數我們分別使用:TopNumber、RightNumber、BottomNumber、LeftNumber、TopRightNumber、BottomRightNumber、BottomLeftNumber、TopLeftNumber來表示
 4.  單元格是否存放棋子我們使用Player來表示,如我們使用1表示此單元格存放的是白子,2表示存放的是黑子,0表示沒有存放棋子

  5. 當單元格放在棋盤中後,我們使用RowIndex,CelIndex來表示單元格在棋盤中的橫與樅向的索引

事件:

 當我們在單元格中單擊的時候,會在單元格中添加對應的棋子,並且設定其8個方同的棋子數與修改對應的8個方向單元格的棋子數(這裡是關鍵)

至於棋盤的對象就很簡單了這裡不用講了,代碼一看就清楚了

最後創建一個遊戲對象

創建遊戲對象要注意一點就是我們看到的棋盤與實際控制的棋盤是不一樣的

實現控制棋盤就是我們可以在上面下棋的棋盤(我們下棋是下在格子中的)

看到的棋盤:為了使看起來下的棋是在網格線上,這裡我們添加了一個看到的棋盤,其顯示效果與實現控制的棋盤相差半個單元格

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.