溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關javascript 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, 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="../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>關于javascript canvas制作五子棋游戲的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
