帝王谷资源网 Design By www.wdxyy.com
本文实例讲述了微信小程序五子棋游戏的棋盘，重置，对弈实现方法。分享给大家供大家参考，具体如下：
DEMO下载
五子棋对弈、悔棋DEMO
效果图
分析
1. 采用微信小程序的canvas制作五子棋；
2. 确定棋盘大小及格数；
3. 绘制棋盘—-通过棋盘宽高和格数计算间距，同时保存坐标点；
4. 黑方和白方下子—-定义一个布尔变量代表各自的身份；
5. 重置棋盘—-重新开始；
6. 通过判断当前棋手，悔棋时进行改变。
绘制棋盘
drawLine(arr){
arr.forEach(current => {
this.ctx.setFillStyle(this.lineColor);
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.moveTo(current[0].x, current[0].y);
for (var i = 1; i < current.length; i++) {
this.ctx.lineTo(current[i].x, current[i].y);
}
this.ctx.stroke();
this.ctx.closePath();
this.ctx.draw(true);
});
}
drawChessboard(){
// 每个格子的宽高
var everyLen = this.everyLen;
// 标记坐标的个数
var count = 0;
// 从纵向保存坐标
var arrY = [];
// 双循环计算每个坐标的横纵坐标
for(var i = 0;i <= this.type; i++){
var arr = [],arr0 = [];
for(var j = 0;j <= this.type; j++){
count++;
arr.push({
y: this.margin + i * everyLen,
x: this.margin + j * everyLen,
pointX: j,
pointY: i,
index: count
});
arr0.push({
x: this.margin + i * everyLen,
y: this.margin + j * everyLen
})
}
// 清空canvas
this.ctx.clearRect(0, 0, this.width, this.height);
// 保存横线坐标和竖线坐标
this.everyPoint.push(arr);
arrY.push(arr0);
}
// 绘制横向线
this.drawLine(this.everyPoint);
// 绘制竖向线
this.drawLine(arrY);
}
绘制当前点击坐标的棋子
// 获取当前点击位置的坐标
getPosition(e){
return {
x: e.touches[0].x,
y: e.touches[0].y
};
}
// 将当前坐标和棋盘坐标数组对比，找到精确坐标
checkPoint(arr,po){
for (var i = 0; i < this.everyPoint.length; i++){
for (var j = 0; j < this.everyPoint[i].length; j++){
if (Math.abs(this.everyPoint[i][j].x - po.x) < this.everyLen/2 && Math.abs(this.everyPoint[i][j].y - po.y) < this.everyLen/2){
// 将棋盘精确坐标保存到当前持棋方数组
arr.push(this.everyPoint[i][j]);
// 同时删除棋盘坐标数组的该值，表示当前位置已经存在棋子
this.everyPoint[i].splice(j,1);
break;
}
}
}
}
// 绘制当前坐标棋子
drawCle(opts,color){
this.ctx.setFillStyle(color);
this.ctx.beginPath();
this.ctx.arc(opts.x, opts.y, this.r, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
this.ctx.draw(true);
}
drawLastPoint(type){
// 判断是黑方持棋还是白方持棋，进行绘制棋子
if(type == 'AI'){
this.AIPoint.forEach((current, index) => {
this.drawCle(current, '#000000');
});
}else{
this.myPoint.forEach((current, index) => {
this.drawCle(current, '#ffffff');
});
}
}
this.page.changeTouchStart = function (e) {
// 判断游戏是否开始
if (self.START_GAME){
// 获取当前坐标
var newPo = self.getPosition(e);
// 获取棋盘精确坐标
if (!self.boolAI && self.boolMy) {
self.checkPoint(self.myPoint, newPo);
} else if (self.boolAI && !self.boolMy) {
self.checkPoint(self.AIPoint, newPo);
}
}
}
this.page.changeTouchEnd = function (e) {
if (self.START_GAME) {
// 绘制棋子
if (!self.boolAI && self.boolMy) {
self.boolAI = !self.boolAI;
self.boolMy = !self.boolMy;
self.drawLastPoint('PO');
// 判断白棋是否五子胜利
if (self.myPoint.length >= 5 && self.checkWinner(self.myPoint)){
wx.showToast({title: '白棋胜利！'});
self.START_GAME = false;
}
} else if (self.boolAI && !self.boolMy) {
self.boolAI = !self.boolAI;
self.boolMy = !self.boolMy;
self.drawLastPoint('AI');
// 判断黑棋是否五子胜利
if(self.AIPoint.length >= 5 && self.checkWinner(self.AIPoint)){
wx.showToast({ title: '黑棋胜利！' });
self.START_GAME = false;
}
}
}
}
五子棋胜利方判断
五子棋胜利就是横向、纵向、45度斜线方向、135度斜线方向连成五个颜色相同的棋子，为了更加清楚的表示，我将四个方向的判断做四个函数处理。
checkTransverse(arr,po){//横向检查
var len = arr.length - 1;
var count = 1;
// 东
for(var i = 1; i < this.CHESS_LEN ; i++){
for (var j = 0; j < len; j++){
if(arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY){
count++;
}
}
}
if (count == this.CHESS_LEN) { return true;}
// 西
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
}
checkPortrait(arr,po){//纵向检查
var len = arr.length - 1;
var count = 1;
// 南
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY - i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
// 北
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY + i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
}
checkNortheast(arr,po){//45度
var len = arr.length - 1;
var count = 1;
// 西南
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY - i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
// 东北
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY + i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
}
checkNorthwest(arr,po){//135度
var len = arr.length - 1;
var count = 1;
// 西北
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY + i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
// 东南
for (var i = 1; i < this.CHESS_LEN; i++) {
for (var j = 0; j < len; j++) {
if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY - i) {
count++;
}
}
}
if (count == this.CHESS_LEN) { return true; }
}
checkWinner(arr){
var currentPo = arr[arr.length - 1];
var win1 = this.checkTransverse(arr, currentPo);
var win2 = this.checkPortrait(arr, currentPo);
var win3 = this.checkNortheast(arr, currentPo);
var win4 = this.checkNorthwest(arr, currentPo);
if (win1 || win2 || win3 || win4){
return true;
}else{
return false;
}
}
重置棋盘
resetChessBoard(){
this.page.setData({ isHide: false });
this.init();
}
this.page.changeReset = function(e){
self.resetChessBoard();
}
注意
1. 绘制棋盘前必须清空canvas，方便最后的重新开始和重置棋盘；
2. 对当前棋子的坐标四个方向的判断，采用的原始坐标而不是计算后的绘制坐标；
3. 在判断持棋人时，各自采用一个值，方便添加悔棋功能。
只是实现了简单的对下五子棋功能，后续添加悔棋、记分、记时等功能！
同时向判断胜利的函数可以合并为一进行优化！
希望本文所述对大家微信小程序开发有所帮助。
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月02日
2024年11月02日
- 《暗喻幻想》顺风耳作用介绍
- 崔健1985-梦中的倾诉[再版][WAV+CUE]
- 黄子馨《追星Xin的恋人们2》HQ头版限量编号[WAV+CUE]
- 孟庭苇《情人的眼泪》开盘母带[低速原抓WAV+CUE]
- 孙露《谁为我停留HQCD》[低速原抓WAV+CUE][1.1G]
- 孙悦《时光音乐会》纯银CD[低速原抓WAV+CUE][1.1G]
- 任然《渐晚》[FLAC/分轨][72.32MB]
- 英雄联盟新英雄安蓓萨上线了吗 新英雄安蓓萨技能介绍
- 魔兽世界奥杜尔竞速赛什么时候开启 奥杜尔竞速赛开启时间介绍
- 无畏契约CGRS准星代码多少 CGRS准星代码分享一览
- 张靓颖.2012-倾听【少城时代】【WAV+CUE】
- 游鸿明.1999-五月的雪【大宇国际】【WAV+CUE】
- 曹方.2005-遇见我【钛友文化】【WAV+CUE】
- Unity6引擎上线:稳定性提升、CPU性能最高提升4倍
- 人皇Sky今日举行婚礼！电竞传奇步入新篇章