DDR爱好者之家 Design By 杰米
本文实例为大家分享了基于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 "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="/UploadFiles/2021-04-02/gobang.js">更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]