五子棋小遊戲 - 原生Javascript製作

 

var config = {
    piecesArr : null,
    nextPieces : 1, //下一個棋子
    rowNum: 15,
    columnNum: 15,
    piecesBox : [], //裝棋子的數組，方便悔棋
    oChessBoard: document.getElementById('chessboard'),
    oHeadInfo: document.getElementsByClassName('head-info')[0],
    oReStart: document.getElementsByClassName('restart-btn')[0],
    oRegret: document.getElementsByClassName('regret-btn')[0],
    piecesGap: 40, // 棋子間的間隔
    gameIsOver: false
}

function init() {
    config.nextPieces = 1;
    isGameOver = false;
    config.oChessBoard.innerHTML = ''; // 重新開始的初始化
    initPieces();
    clickEvent();
    showHeadInfo('遊戲開始：');
}

init();

/**
 * 初始化所有棋子, 0代表空，1代表黑子，2代表白子
 */
function initPieces() {
    config.piecesArr = new Array(15);
    for (var i = 0; i < config.piecesArr.length; i++) {
        config.piecesArr[i] = new Array(15);
        config.piecesArr[i].fill(0);
    }

}

/**
 * 將棋子放入指定的行和列，黑棋先落子
 */
function setPieces(row, column) {
    if (row < 0 || row > config.rowNum - 1 || column < 0 || column > config.columnNum - 1) {
        return;
    }
    if (config.piecesArr[row][column] !== 0) {
        return;
    }
    config.piecesArr[row][column] = config.nextPieces;

    var oDiv = document.createElement('div');
    oDiv.className = 'chess ' + (config.nextPieces === 1 ? 'black' : 'white');
    oDiv.style.left = column * config.piecesGap + 'px';
    oDiv.style.top = row * config.piecesGap + 'px';
    config.oChessBoard.appendChild(oDiv);

    if (config.nextPieces === 1) {
        config.nextPieces = 2;
    } else {
        config.nextPieces = 1;
    }
    if (gameOver(row, column)) {
        config.gameIsOver = true;
        showHeadInfo('');
        config.oChessBoard.onclick = null;
    }
    showHeadInfo('');
}


/**
 * 點擊落子事件
 */
function clickEvent(row, column) {
    config.oChessBoard.onclick = function (e) {
        if (e.target.classList.contains("chess")) {
            //如果鼠標點擊的dom，類樣式中包含了chess，則表示，你點擊的是棋子
            //不做任何操作
            return;
        }
        var x = e.offsetX - 20;
        var y = e.offsetY - 20;
        var row = Math.round(y / 40);
        var column = Math.round(x / 40);
        setPieces(row, column);
    }
    config.oReStart.onclick = init;

}

/**
 * 得到指定位置的棋子
 */
function getTargetPiece(row, column) {
    if (config.piecesArr[row] === undefined) {
        return;
    }
    if (config.piecesArr[row][column] === undefined) {
        return;
    }
    return config.piecesArr[row][column];
}

function gameOver(row, column) {
    var piece = getTargetPiece(row, column);
    
    // 橫向
    var count = 1;
    for (var i = column - 1; getTargetPiece(row, i) === piece; i--) {
        count++;
    }
    for (var i = column + 1; getTargetPiece(row, i) === piece; i++) {
        count++;
    }
    if (count === 5) {
        return true;
    }
    // 縱向
    var count = 1;
    for (var i = row - 1; getTargetPiece(i, column) === piece; i--) {
        count++;
    }
    for (var i = row + 1; getTargetPiece(i, column) === piece; i++) {
        count++;
    }
    if (count === 5) {
        return true;
    }

    // 撇
    var count = 1;
    for (var i = row - 1, j = column + 1; getTargetPiece(i, j) === piece; i-- , j++) {
        count++;
    }
    for (var i = row + 1, j = column - 1; getTargetPiece(i, j) === piece; i++ , j--) {
        count++;
    }
    if (count === 5) {
        return true;
    }

    // 捺
    var count = 1;
    for (var i = row - 1, j = column - 1; getTargetPiece(i, j) === piece; i-- , j--) {
        count++;
    }
    for (var i = row + 1, j = column + 1; getTargetPiece(i, j) === piece; i++ , j++) {
        count++;
    }
    if (count === 5) {
        return true;
    }
}

/**
 * 顯示信息
 */
function showHeadInfo(begin) {
    if (config.gameIsOver) {
        var text = '遊戲結束！' + (config.nextPieces === 1 ? '白' : '黑') + '棋勝利';
        config.oHeadInfo.innerText = text;
        return;
    }
    var text = begin + (config.nextPieces === 2 ? '白' : '黑') + '棋落子';
    config.oHeadInfo.innerText = text;
}