五指棋人機大戰之ui篇

最近作了一個五指棋的demo，今天好好總結一下，之後用。

五指棋主要分爲ui部分和ai部分

ui部分主要分爲畫棋盤和畫棋子 流程圖以下

 

首先在頁面上建立一個canvas

<canvas id="chess" width="450px" height="450px"></canvas>

View Code

開始js部分

步驟一：初始化一系列工做 + 畫背景圖

var me    = true  // 黑子
var chessBoardArr = []  // 棋盤交叉點
var chess = document.getElementById('chess')
var ctx   = chess.getContext('2d')


for(var i = 0;i < 15;i++){
    chessBoardArr[i] = []
    for(var j = 0;j < 15;j++){
        chessBoardArr[i][j] = 0
    }
}

ctx.strokeStyle = '#bfbfbf'  // 棋盤線條

// 畫水印  這裏須要在畫完圖片以後在畫棋盤  不然  背景圖會覆蓋棋盤
var logo = new Image()
logo.src = '../public/chess/images/whiteBg.png'
logo.onload = function () {
    ctx.drawImage(logo,0,0,450,450)
    drawChessBoard()  // 畫棋盤

}

View Code

步驟二：畫棋盤

var drawChessBoard = function () {
    for(var i = 0; i < 15; i++){
        // 畫橫線
        ctx.moveTo(15 + i * 30,15) // 15 是棋盤邊緣的留白  30 是一格的大小
        ctx.lineTo(15 + i * 30,435)
        ctx.stroke()

        // 畫縱線
        ctx.moveTo(15,15 + i * 30)
        ctx.lineTo(435,15 + i * 30)
        ctx.stroke()
    }
}

View Code

步驟三：畫棋子

畫棋子時用到了canvas的createRadialGradient(x1,y1,r1,x2,y2,r2)函數，前三個參數表示第一個圓的原點和半徑，後面三個參數是第二個圓的原點和半徑

gradient.addColorStop(0,'#0a0a0a') // 表示第一個圓的顏色
gradient.addColorStop(1,'#636766') // 表示第二個圓的顏色

// i,j 表示當前棋子的索引，me 表示黑棋或者白棋
var oneStep = function (i, j, me) {

    // 畫棋子 畫圓須要開始路徑
    ctx.beginPath()
    ctx.arc(15 + i * 30,15 + j * 30,13,0,2 * Math.PI)
    ctx.closePath()
    //畫棋子的漸變
    var gradient = ctx.createRadialGradient(15 + i * 30 - 2,15 + j * 30 - 2,13,15 + i * 30 - 2,15 + j * 30 - 2,0)

    if(me){ // 黑棋
        gradient.addColorStop(0,'#0a0a0a')
        gradient.addColorStop(1,'#636766')
    }else{ // 白棋
        gradient.addColorStop(0,'#d1d1d1')
        gradient.addColorStop(1,'#f9f9f9')
    }

    ctx.fillStyle = gradient
    ctx.fill()
}

View Code

步驟四：當點擊棋盤交叉點的時候，畫棋子

1. 使用e.offsetX、e.offsetY來獲取當前點擊位置相對於畫布原點的偏移

2. 計算相對於畫布原點棋盤座標i,j  

3. 判斷當前chessBoard[i][j]是否已經存在棋子，不存在棋子才畫

4.使用me 的值來判斷應該畫黑棋或者白棋

chess.onclick = function (e) {

    var chessX = e.offsetX
    var chessY = e.offsetY

    var i = Math.floor(chessX / 30) // 由於棋盤留白15px 棋子半徑15px 因此在30px範圍內的點都畫棋子
    var j = Math.floor(chessY / 30)

    // 畫棋子
    // 沒有棋子才能落子
    if(chessBoardArr[i][j] == 0){
        oneStep(i,j,me)
        if(me){  // 黑子
            chessBoardArr[i][j] = 1
         }else{ // 白子
             chessBoardArr[i][j] = 2
         }
        me = !me; // 畫完以後  改變棋子顏色
        
    }
}    

View Code

好了如今 簡單的五指棋就實現了。。。。

未知AI篇如何，請聽下回分解