本文實例為大家分享了基于canvas的五子棋的具體代碼，供大家參考，具體內容如下

第一部分：核心類Gobang

屬性：

this.box = box; // 存放五子棋的容器this.canvas = null; // 畫布this.ctx = null;this.size = 600; // 棋盤大小this.cellNum = 20; // 單行棋格數量this.padding = this.size/this.cellNum; // padding值this.cellSize = (this.size-this.padding*2)/this.cellNum; // 棋格大小this.pieceSize = this.cellSize*3/4; // 棋子大小this.color = ['black', '#aaa']; // 棋子顏色this.myPieceType = null; // 玩家棋子類型this.aiPieceType = null; // 電腦棋子類型this.myPieces = []; // 玩家累計棋子this.aiPieces = []; // 電腦累計棋子this.isMyTurn = true; // 先手this.curPos = [this.cellNum/2-1, this.cellNum/2-1]; // 當前點擊位置this.timeId = null; // 定時器id

方法：

init// 初始化方法，獲取canvas設置寬高，獲取ctxcreateChessboard// 創建背景棋盤drawPiece// 畫一個棋子clearPiece// 清除棋子registClick// 注冊鼠標點擊事件，主要的邏輯函數isIn// 判斷否在所下的棋子里面isInAll// 判斷是否在所有下的棋子里面isFull// 是否下滿aiPutPiece// 電腦落子，只是簡單的實現了，獲取玩家落子位子周圍一格的隨機位置putPiece// 實現下棋的函數isWin// 勝利判斷，個人人為比較男一點點的算法run// 運行，類的入口函數，里面調用了，·init·/createChessBoard/registClick方法

第二部分：源代碼

Gobang.js

/** 五子棋 **/function Gobang(box){ this.box = box; // 存放五子棋的容器 this.canvas = null; // 畫布 this.ctx = null; this.size = 600; // 棋盤大小 this.cellNum = 20; // 單行棋格數量 this.padding = this.size/this.cellNum; // padding值 this.cellSize = (this.size-this.padding*2)/this.cellNum; // 棋格大小 this.pieceSize = this.cellSize*3/4; // 棋子大小 this.color = ['black', '#aaa']; // 棋子顏色 this.myPieceType = null; // 玩家棋子類型 this.aiPieceType = null; // 電腦棋子類型 this.myPieces = []; // 玩家累計棋子 this.aiPieces = []; // 電腦累計棋子 this.isMyTurn = true; // 先手 this.curPos = [this.cellNum/2-1, this.cellNum/2-1]; // 當前點擊位置 this.timeId = null; // 定時器id // 初始化方法 this.init = function(){ // 創建canvas this.canvas = document.createElement('canvas'); // 設置寬高 this.canvas.width = this.canvas.height = this.size; // 加入到容器中 this.box.appendChild(this.canvas); // 獲取ctx this.ctx = this.canvas.getContext('2d'); }; // 創建背景棋盤 this.createChessboard = function(){ // ----------- 邊框 ----------- this.ctx.lineWidth = 10; this.ctx.lineJoin = 'round'; this.ctx.strokeRect(0, 0, this.size, this.size); // ----------- 創建棋盤 ----------- this.ctx.lineWidth = 1; for (var i = 0; i <= this.cellNum; i++) { // 畫橫線 this.ctx.beginPath(); this.ctx.moveTo(this.padding, this.padding+i*this.cellSize); this.ctx.lineTo(this.size-this.padding, this.padding+i*this.cellSize); this.ctx.stroke(); // 畫豎線 this.ctx.beginPath(); this.ctx.moveTo(this.padding+i*this.cellSize, this.padding); this.ctx.lineTo(this.padding+i*this.cellSize, this.size-this.padding); this.ctx.stroke(); } }; // 畫一個棋子 this.drawPiece = (x, y, type=0) => { // 根據坐標計算出圖中位置 var posX, posY; posX = this.padding + x * this.cellSize; posY = this.padding + y * this.cellSize; // 創建漸變色 var grd = this.ctx.createRadialGradient(posX, posY, this.pieceSize/18, posX, posY, this.pieceSize); // type: 0, 黑棋 1, 白棋 grd.addColorStop(0, this.color[1-type]); grd.addColorStop(0, this.color[type]); this.ctx.fillStyle = grd; // 畫圓 this.ctx.beginPath(); this.ctx.arc(posX, posY, this.pieceSize/2, 0, 2*Math.PI); this.ctx.fill(); }; // 清除棋子 this.clearPiece = (x, y) => { // 清除棋子所在位置的像素 var posX, posY; posX = this.padding + x * this.cellSize - this.pieceSize/2; posY = this.padding + y * this.cellSize - this.pieceSize/2; this.ctx.clearRect(posX, posY, this.pieceSize, this.pieceSize); // 補上十字架 this.ctx.lineWidth = 1; // 豎線 this.ctx.beginPath(); this.ctx.moveTo(posX+this.pieceSize/2, posY); this.ctx.lineTo(posX+this.pieceSize/2, posY+this.pieceSize); this.ctx.stroke(); // 橫線 this.ctx.beginPath(); this.ctx.moveTo(posX, posY+this.pieceSize/2); this.ctx.lineTo(posX+this.pieceSize, posY+this.pieceSize/2); this.ctx.stroke(); }; // 注冊鼠標點擊事件 this.registClick = function(){ this.canvas.addEventListener('click', (ev) => { // 將位置坐標，轉換為點 var x = Math.round((ev.clientX - this.padding)/this.cellSize); x = x <= 0 ? 0 : x; x = x > this.cellNum ? this.cellNum : x; var y = Math.round((ev.clientY - this.padding)/this.cellSize); y = y <= 0 ? 0 : y; y = y > this.cellNum ? this.cellNum : y; // 設置當前位置 this.curPos = [x, y]; // 玩家落子 if(this.isMyTurn && !this.isInAll(this.curPos)){ // 判斷是否輪到玩家，并且下的位置是否重復this.putPiece(this.myPieces, this.curPos); } else return; // 輪到玩家的時候才能落子 // 判斷輸贏 if(this.isWin(this.myPieces)) {setTimeout(function(){alert('you win!');}, 100); return;} // 電腦落子 this.aiPutPiece(); // 判斷輸贏 if(this.isWin(this.aiPieces)) {setTimeout(function(){alert('robot win!');}, 100); return;} this.isMyTurn = true; }); }; // 判斷否在所下的棋子里面 this.isIn = (pos, arr) => { var len = arr.length; for(var i=0; i < len; i++){ if(pos[0] == arr[i][0] && pos[1] == arr[i][1]) return true; } return false; }; // 判斷是否在所有下的棋子里面 this.isInAll = (pos) => { return this.isIn(pos, this.myPieces.concat(this.aiPieces)); } // 是否下滿 this.isFull = () => { return (this.myPieces.length + this.aiPieces.length) == (this.cellNum+1) * (this.cellNum+1); }; // 電腦落子 this.aiPutPiece = ()=>{ var x, y; // 目前，制作了一點功能，就是在玩家剛剛落子的周圍一格落子 // 1. 獲得隨機的周圍的坐標 while(1){ x = this.curPos[0] + Math.pow(-1, parseInt(Math.random()*2)); y = this.curPos[1] + Math.pow(-1, parseInt(Math.random()*2)); if(x >=0 && x <=20 && y >= 0 && y <=20 && !this.isInAll([x, y])) break; } // 2. 落子 this.putPiece(this.aiPieces, [x, y], 1); } // 實現下棋的函數 this.putPiece = (pieces, pos, type=0) => { this.drawPiece(pos[0], pos[1], type); pieces.push(pos); } // 勝利判斷 this.isWin = (pieces) => { /* * 這里不用遍歷棋盤來判斷四個方向，只需要判斷當前落子位置的四個方向。 */ var x, y, count = 0; // 處在水平線上 判斷 x = this.curPos[0]-1; y = this.curPos[1]; while(1) if(this.isIn([x, y], pieces)) {count++; x--;} else break; // 左邊 x = this.curPos[0]+1; y = this.curPos[1]; while(1) if(this.isIn([x, y], pieces)) {count++; x++;} else break; // 右邊 if(count >= 4) return true; else /** 左右匹配失敗 **/ count = 0;// 處在垂直線上 判斷 比較四次 x = this.curPos[0]; y = this.curPos[1]-1; while(1) if(this.isIn([x, y], pieces)) {count++; y--;} else break; // 上邊 x = this.curPos[0]; y = this.curPos[1]+1; while(1) if(this.isIn([x, y], pieces)) {count++; y++;} else break; // 下邊 if(count >= 4) return true; else /** 上下匹配失敗 **/ count = 0; // 處在左對角線上的判斷 x = this.curPos[0]-1; y = this.curPos[1]-1; while(1) if(this.isIn([x, y], pieces)) {count++; x--; y--;} else break; // 左上 x = this.curPos[0]+1; y = this.curPos[1]+1; while(1) if(this.isIn([x, y], pieces)) {count++; x++; y++;} else break; // 右下 if(count >= 4) return true; else /** 左對角線匹配失敗 **/ count = 0; // 處在右對角線上的判斷 x = this.curPos[0]+1; y = this.curPos[1]-1; while(1) if(this.isIn([x, y], pieces)) {count++; x++; y--;} else break; // 右上 x = this.curPos[0]-1; y = this.curPos[1]+1; while(1) if(this.isIn([x, y], pieces)) {count++; x--; y++;} else break; // 左下 if(count >= 4) return true; else /** 右對角線匹配失敗 **/ return false; }; // 運行 this.run = function(){ // 初始化方法 this.init(); // 創建棋盤 this.createChessboard(); // 注冊點擊事件 this.registClick(); }}

五子棋.html

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>06-五子棋</title> <script src='http://m.b3g6.com/gobang.js'></script> <style> *{ margin: 0; padding: 0; } </style></head><body> <div id='box'></div> <script> var box = document.getElementById('box'); var gobang = new Gobang(box); gobang.run(); </script></body></html>

更多有趣的經典小游戲實現專題，分享給大家：

C++經典小游戲匯總

python經典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經典游戲 玩不停

javascript經典小游戲匯總

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。