2. 程式人生 > >遊戲開發入門之五子棋

遊戲開發入門之五子棋

阿新 • • 發佈：2019-02-12
有了棋盤了,下面就是要進行遊戲設計了.在設計之前我們先把棋子相關的配置資訊寫出來。

棋子配置資訊

var chessConfig = {
	cls : 'chess',//棋子元素預設樣式
	blackChess : {
		name : '黑棋',
		cls : 'black',
		lastCls : 'black-last',
		flag : 1
	},
	whiteChess : {
		name : '白棋',
		cls : 'white',
		lastCls : 'white-last',
		flag : 2
	},
	defFlag : 0,
	direction : {//棋子排列方向
		heng : [0, 1],//橫向
		shu : [1, 0],//豎向
		pie : [-1, 1],//撇
		na : [1, 1]//捺
	}
};

棋盤使用示例

為了提高興趣與驗證棋盤的可用性，我決定先測試下落子功能。落子功能很簡單，僅需繫結棋盤點選事件，然後在事件中對應的DOM元素內插入個棋子就可以。具體程式碼如下：

var board = new ChessBoard(15, 15, $('#board'));
board.bindBoardClick(function(event, row, col, $dom, ev){
	var $chess = $('<div/>').addClass(chessConfig.cls).addClass(chessConfig.blackChess.cls);
	$dom.empty().append($chess);
});
通過上面5行程式碼就可將棋子新增到棋盤中顯示了.

五子棋遊戲設計

分析遊戲規則

五子棋遊戲是在row*col大小的棋盤上使用黑子、白子來展開的對戰遊戲。其中每個落子點有3個狀態（空、黑子、白子），每次落子後都要檢查落子後選手是否贏得遊戲，遊戲的勝利規則為落子後該子所在點的橫豎撇捺四個方向上相同的棋子數量》=5即可贏得遊戲。

首先，根據棋盤大小我們建立一個row*col的二維陣列，用於儲存整個棋盤的狀態資訊，預設棋盤狀態為0（chessConfig.defFlag）。棋子資訊為chessConfig.xxxChess.flag，目前我們只有blackChess（黑棋）和whiteChess（白棋）兩個型別的棋子。

其次，每次落子後需要進行連子計算，分別計算4個方向上的連子數量。已落子點為原點建立直角座標系不難發現，4個方向上棋子的座標與原點座標都是遞增（從左向右看）或遞減（從右向左看）變化。根據這個規則我們分別定義了4個方向上的單步遞增量chessConfig.direction，這樣我們在計算某個方向上的連子數量時僅傳入落子點的座標row，col，棋子的標記，棋盤狀態資訊（二維陣列），方向遞增量即可計算出該方向上的連子數量（注意除了正向數量還要加上反向數量，反向遞增量僅需把遞增量個座標*-1即可）。

最終，每次落子後計算完是否勝利，如果勝利則提示遊戲結束XXX勝利，否則需要切換下棋方，比如之前是黑棋落子，經判斷沒有勝利則下次落子則應為白棋落子。

五子棋遊戲實現程式碼

var FiveChess = function(conf){
    this.conf = conf;
    var row = this.row = conf.row || 15;
    var col = this.col = conf.col || 15;
    var $board = this.$board = $(conf.board);
    this.chessDatas = new Array(row);
    this.chessBoard = new ChessBoard(row, col, $board);
    this.initFiveChess();
};
FiveChess.prototype = {
    userFirst : true,//是否使用者先手
    useBlack : true,//使用者是否使用黑色棋子
    userChess : chessConfig.blackChess,//使用者棋子資訊
    rivalChess : chessConfig.whiteChess,//對手棋子資訊
    userTurn : true,//是否輪到使用者下棋
    chessBoard : null,//棋盤物件
    lastChesses : {},//最後下棋資訊
    errors : {
        putChess : []
    },
    initFiveChess : function(){
        var me = this, row = me.row, col = me.col, $board = me.$board;
        me.userFirst = true;//黑棋先下
        me.useBlack = true;//當前使用者使用黑棋
    },
    initGame : function(){
        var me = this;
        me.chessBoard.bindBoardClick(me.getBoardClickListener());
        me.userChess = me.useBlack ? chessConfig.blackChess : chessConfig.whiteChess;
        me.rivalChess = me.useBlack ? chessConfig.whiteChess : chessConfig.blackChess;
        me.userTurn = me.userFirst;
        me.chessBoard.initBoard();
        for(var i = 0; i < me.row; i++){
            me.chessDatas[i] = new Array(me.col);
            for(var j = 0; j < me.col; j++){
                me.chessDatas[i][j] = chessConfig.defFlag;
            }
        }
    },
    gameStart : function(){
        var me = this;
        me.gameOver();
        me.initGame();
    },
    gameOver : function(){
        var me = this;
        me.chessBoard.unbindBoardClick(me.getBoardClickListener());
    },
    serviceNext : function(){
        var me = this;
        me.userTurn = !me.userTurn;
    },
    checkWin : function(row, col, chess, chessDatas){
        var me = this, chessDatas = me.chessDatas;
        var fx1 = me.chessLineNums(row, col, chess.flag, chessDatas, chessConfig.direction.heng, true),
        fx2 = me.chessLineNums(row, col, chess.flag, chessDatas, chessConfig.direction.shu, true),
        fx3 = me.chessLineNums(row, col, chess.flag, chessDatas, chessConfig.direction.pie, true),
        fx4 = me.chessLineNums(row, col, chess.flag, chessDatas, chessConfig.direction.na, true),
        maxLineNum = Math.max(fx1, fx2, fx3, fx4);//獲取四個方向上最大連子數量
        if(maxLineNum >= 5){
            alert(chess.name + '贏了!');
            me.gameOver();
            return true;
        }
        return false;
    },
    getBoardClickListener : function(){//繫結事件處理函式的作用域(對遊戲自身的引用).
        var me = this;
        if(!me.onBoardClick){
            me.onBoardClick = function(event, row, col, $dom, ev){
                var chessDatas = me.chessDatas,
                    chess = me.userTurn ? me.userChess : me.rivalChess;
                var putResult, isWin;
                putResult = me.putChess(row, col, chess);
                if(putResult){
                    isWin = me.checkWin(row, col, chess, chessDatas);
                    if(!isWin){
                        me.serviceNext();
                    }
                }
            };
        }
        return me.onBoardClick;
    },
    onBoardClick : undefined,
    putChess : function(row, col, chess){
        var me = this, chessDatas = me.chessDatas;
        var selector = 'div.{0}[row="{1}"][col="{2}"]'.format([boardConfig.cls, row, col]);
        $dom = me.chessBoard.ele.find(selector);
        if(chessDatas[row][col] == chessConfig.defFlag){
            var $chess = $('<div/>').addClass(chessConfig.cls).addClass(chess.lastCls);//新增棋子並標記最後落子樣式
            $dom.append($chess);
            chessDatas[row][col] = chess.flag;
            var $prevLastChess = me.lastChesses[chess.flag];
            if($prevLastChess && $prevLastChess.removeClass){//移除上一次標記的最後落子樣式
                $prevLastChess.removeClass(chess.lastCls).addClass(chess.cls);
            }
            me.lastChesses[chess.flag] = $chess;
            return 1;
        }else{
            return 0;
        }
    },
    chessLineNums : function(row, col, chessType, arr, direction, checkReverse){//下子座標row, 下子座標Y, 下子型別, 棋子陣列, 方向[行,列], 是否檢查反向
        var w = arr[0].length, h = arr.length;
        var dRow = direction[0], dCol = direction[1];
        var nums = 1;
        var srow = row, scol = col, multiple = 1;
        while(true){
            srow += dRow;//下一方向X座標
            scol += dCol;//下一方向Y座標
            if(srow < w && scol < h && srow >= 0 && scol >= 0){//座標是否在棋盤內
                var type = arr[srow][scol];
                if(type == chessType){//下一方向棋子型別相同
                    nums++;
                }else{//下一方向棋子型別不同,退出
                    break;
                }
            }else{
                break;
            }
            multiple++;
        }
        if(checkReverse){
            nums = nums + this.chessLineNums(row, col, chessType, arr, [-dRow, -dCol], false) - 1;//加上反向的資料
        }
        return nums;
    }
};

程式原始碼下載

相關推薦

遊戲開發入門之五子棋

有了棋盤了,下面就是要進行遊戲設計了.在設計之前我們先把棋子相關的配置資訊寫出來。棋子配置資訊 var chessConfig = { cls : 'chess',//棋子元素預設樣式 blackChess : { name : '黑棋', cls : 'black', lastCls :

遊戲開發入門之俄羅斯方塊

程式分析 俄羅斯方塊是由多種型別的方塊與遊戲邊界背景組成，根據面向物件的方法，把整個程式分隔成兩部分--遊戲主體、形狀兩個物件。 其中游戲主體處理的事情包括： 繪製遊戲介面與邊界。容納方塊與形狀並繪製。控制器：監聽鍵盤事件，並將之轉換成對形狀物件的控制，如變形、左移、右移、

【Unity3D入門教程】Unity3D開發實戰之五子棋

前言經過前面《Unity3D入門教程》系列講解，再加上我們自己的探索，相信大家已經掌握了Unity3D的相關知識和基本方法。本文將使用前面學到的知識，開發一款簡單的五子棋程式。本文用到的東西其實不多，非常簡單。在最後我們會把完整工程的原始碼釋出出來，以供初學者參考。先展示一下

android——kotlin開發入門之開發環境搭建

style blog extension activity image plugins 重要 打開 對話框 一.打開android studio—Setting—Plugins 註意，第一次是搜索不到的，會彈出一個對話框，在對話框中輸入Kotlin，選中第二個。在右邊點擊

最新h5牛牛平臺遊戲開發框架之架構

內存 cal 引用 構造 autot auto 新的 clas 線程同步 Q1446595067官網：h5.haozibbs.com或http:\\www.aqbaa.cn 現在來和大家分享下怎麽架構和實現框架來滿足棋牌遊戲需求的。 一、原型 符合棋牌項目框架，快速換皮

【開發記錄】微信小遊戲開發入門——俄羅斯方塊

了解 分享 公眾 lib 不必要 並且 視頻 text box 叨叨 　　我在前一陣子，打算做一個微信小遊戲，當然是單機的，只是為了了解小遊戲開發的過程，最終選擇了俄羅斯方塊這一經典小遊戲作為demo，源代碼已托管值github，當然，這個遊戲demo對用不並不友好，但是已

遊戲開發入門（一）遊戲開發概述

str 要掌握 strong 簡單 動手 屬於 掌握 技術 遊戲機 視頻鏈接：遊戲開發入門（一）遊戲開發概述請添加鏈接描述（3節課 時常：約1小時03分鐘） 該視頻圍繞電子遊戲的發展與開發簡單介紹了一些基本常識，同時提出並解決了幾個問題 筆記與總結（請先學習視頻內容）：

微信小遊戲開發入門

什麼是微信小遊戲？ 看前幾天的科技新聞，微信中的“跳一跳”小遊戲從去年12月釋出，截至到今年3月份已經積累了3.9億玩家，這是一個多麼恐怖的數字，“跳一跳”遊戲帶火了整個微信小遊戲開發圈。微信小遊戲是個什麼東西呢？ 參考一下萬能的百度百科： 微信小遊戲是基於微信客戶端的遊戲，它即

Godot3遊戲引擎入門之二：第一個簡單的遊戲場景

一、前言 最近工作時間安排地非常緊湊，除了週日一天，已經沒有其他空閒時間了。不過到了 10 月份會慢慢恢復，目前我在抽出一點時間好好準備這個 Godot 系列，邊寫邊學習邊迎接Godot 3.1 版本的到來，也算是一件高興地事情，哈哈。 :sunglasses:

Godot3遊戲引擎入門之三：移動我們的主角

一、前言 說明：我目前使用的 Godot 3.1 預覽版，所以會與 Godot 3 的版本有一些區別，介面影響不大，如果要使用我上傳的 Github Demo 程式碼，記得去官網下載 3.1 預覽版（或者等之後正版釋出）然後就可以正常開啟執行 Demo 了。

title: Godot3遊戲引擎入門之四：給主角新增動畫（下）

一、前言 本篇是上一節文章：Godot3遊戲引擎入門之四：給主角新增動畫（上）的繼續。在這兩篇文章裡，我會詳細講述 Godot 3 中製作簡單精靈動畫的三種方法，其中上部分包含兩種，下部分討論第三種方式。 :smile: 二、正文 本篇目標 使用動

Android開發入門之第一個安卓工程：HelloWorld!

前提： 已安裝完畢AndroidStudio，安裝指導可以參考：https://www.jianshu.com/p/a0e0e11cac1f 開始第一個安卓工程 新建工程 第一步中如果是Kotlin，就勾選“Include Kotlin support”；否則就不勾選

unity遊戲開發入門-聲音控制遊戲

聲音控制遊戲中人物的移動，關鍵在於聲音的傳入，這裡關機鍵在於使用了Microphone 怎麼使用呢？下面給一段我編寫的聲音傳入的程式碼：（關鍵處已被標識） using System.Collections; using System.Collections.Ge

Godot3遊戲引擎入門之五：上下左右移動動畫（下）

一、前言 本篇是上一節文章：Godot3遊戲引擎入門之五：上下左右移動動畫（上）的繼續。上一篇使用動畫和程式碼實現了玩家的上下左右移動功能，接下來我們解決一個問題：給遊戲新增碰撞體，讓玩家在有限的地圖中移動。 注意：我目前使用的是 Godot 3.1 預覽版，與

Godot3遊戲引擎入門之六：製作TileMap瓦片地圖

一、前言 收到一個高興的訊息： 2018 年 Github 最新統計出爐， Godot 是所有專案裡增長速度最快的第三位！所以，我還是非常看好它的，哈哈！連結在此： Fastest growing open source projects ，截圖如下： 吹逼結

phaser遊戲開發入門1

使用phaser開發十幾款遊戲，感覺這個引擎不錯，給大家分享下。demo地址 phaser這個引擎封裝做的比較好，常用的物理引擎都有封裝，音訊方面也特別給力，開發起來就一個字---------------------------“快” 學習一款遊戲引擎只需要做的事情有

phaser遊戲開發入門2

上一節我們展示了phaser構建遊戲的基本結構 本文繼續深入，展示圖片 下面先將圖片放在res資料夾中 然後再用game.load.image("指定資源名稱"，"資源地址")載入到遊戲緩衝中，以便使用時呼叫 載入後就可以直接使用了，下面是一個旋轉的美眉程式碼 其他

【 Visual C 】遊戲開發筆記之二 最簡單的DirectX vc視窗的編寫

                筆記一中我們介紹瞭如何用程式碼建立空的win32視窗，然而建立空的win32視窗只完成了一半的工作，接下來要做的工作是設定Direct3D，從而可以在螢幕上渲染圖形。Direct3D要呼叫很多函式才能成功設定API。一旦完成設定，並且設定成功，就可以向螢幕上渲染圖形。下面是函式

【Visual C++】遊戲開發筆記之十一 基礎動畫顯示（四） 排序貼圖

                ------------------------------------------------------------------------------------------------------------------------------淺墨歷時一年為遊戲程式設計

【Visual C++】遊戲開發筆記之十 基礎動畫顯示（三） 透明動畫的實現

                作者：毛星雲    郵箱： [email protected]    歡迎郵件交流程式設計心得"透明動畫”是遊戲中一定會用到的基本技巧，它通過圖案的連續顯示及圖案本身背景的透明化處理，在背景圖上產生出栩栩如生的動畫效果。看過之前筆記的朋友們應該知道，在筆記六裡我們介紹