本文例項為大家分享了基於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設定寬高，獲取ctx
createChessboard// 建立背景棋盤
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,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,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,this.pieceSize/2,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,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,count = 0;

    // 處在水平線上 判斷 
    x = this.curPos[0]-1; y = this.curPos[1];
    while(1) if(this.isIn([x,pieces)) {count++; x--;} else break; // 左邊
    x = this.curPos[0]+1; y = this.curPos[1];
    while(1) if(this.isIn([x,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,pieces)) {count++; y--;} else break; // 上邊
    x = this.curPos[0]; y = this.curPos[1]+1;
    while(1) if(this.isIn([x,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,pieces)) {count++; x--; y--;} else break; // 左上
    x = this.curPos[0]+1; y = this.curPos[1]+1;
    while(1) if(this.isIn([x,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,pieces)) {count++; x++; y--;} else break; // 右上
    x = this.curPos[0]-1; y = this.curPos[1]+1;
    while(1) if(this.isIn([x,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="../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經典小遊戲彙總

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。