五子棋2 canvas绘制棋盘 -HTML JS

最新推荐文章于 2022-06-28 15:49:03 发布
置顶 最新推荐文章于 2022-06-28 15:49:03 发布
阅读量851 收藏 8
点赞数 1
分类专栏： js js样式 jquery样式 html 文章标签： canvas 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/87982951
版权
js 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
js样式
20 篇文章 0 订阅
订阅专栏
html
20 篇文章 1 订阅
订阅专栏

大家好：

经过上一版的代码，又优化了一版，原因是，上一版的图片，在手机上不识别，于是我用canvas 画板，绘制了棋盘。调整了画布的大小，适用于手机。

代码展示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>手机-五子棋</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <!-- css -->
    <style type="text/css">
    canvas{
		 display: block;
		 background-color:burlywood;
		 box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
		}
	.restart{
	    text-align: center;
	}
	.restart>span{
	    display: inline-block;
	    padding: 10px 20px;
	    color: #fff;
	    background-color: #45c01a;
	    border-radius: 5px;
	}
    </style>
    <!-- css ends -->    
    <!-- script -->
<script type="text/javascript">
	//页面加载
$(document).ready(function(){
	//画棋盘
    drawChessboard();
    
    /* canvas绑定点击事件 实现点击落子 */
	chess.onclick = function(e) {
	 /* 如果棋局结束 点击不再产生效果 */
	  if(over){return;}
	 /* 如果没有轮到黑方行棋 点击不触发事件 (如需双人对战，则取消该判断与下方AI行棋方法) */
	 if (!me) {return;}
	 
	 var x = e.offsetX; //点击位置横坐标
	 var y = e.offsetY; //点击位置纵坐标
	 var i = Math.floor(x / 20); //对应x坐标到棋盘所在交叉点
	 var j = Math.floor(y / 20); //对应y坐标到棋盘所在交叉点
	 /* 位置为空 可以落子 */
	 if (chessBoard[i][j] == 0) {
	  /* 落子 */
	  oneStep(i, j, me);
	
	  if (me) {
	   chessBoard[i][j] = 1; //黑方落子
	  } else {
	   chessBoard[i][j] = 2; //白方落子 -- 人机对战时 该行不会执行
	  }
	  /* 轮流落子 */
	  me = !me;
	
	  /* 落子完成之后 遍历所有赢法 */
	  for (var k = 0; k < count; k++) {
	   /* 包含落子点的赢法的统计数组 + 1 */
	   if(wins[i][j][k]){
	    BlackWin[k]++; //黑棋在第k种赢法中统计数字 + 1
	    WhiteWin[k] = 6; //同时白棋不可能以第k种赢法胜利
	    /* 胜利判断 */
	    if (BlackWin[k] == 5) {
	     window.alert("恭喜你，获得了胜利！");
	     over = true; //棋局结束
	    }
	   }
	  }
	
	  /* 如果棋局未结束 计算机AI自动执白行棋 */
	  if (!over) {
	   computerAI();
	  }
	 }
	}
	
	//点击‘重新开始’按钮
	$("#restart").click(function(){
	    window.location.reload();
	});
});
//画棋盘
function drawChessboard(){
	/***** UI设计 -- 棋盘绘制 & 棋子绘制 & 落子动作 *****/
	//获取Canvas面板 
	var chess = document.getElementById("chess");
	//2D面板-画笔
	var context = chess.getContext("2d");
	//绘制棋盘
	 //线条颜色 
	context.strokeStyle = "black";
	 for (var i = 0; i < 15; i++) {
	  //横线 
	  context.moveTo(15 + i * 20, 15);
	  context.lineTo(15 + i * 20, 295);
	  context.stroke();
	  //纵线 
	  context.moveTo(15, 15 + i * 20);
	  context.lineTo(295, 15 + i * 20);
	  context.stroke();
	 }
	//绘制棋盘上的5个标志点
	context.beginPath();//开始绘制新路径
    //arc(x, y, radius, startAngle, endAngle, counterclockwise)：
    //以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。
    
    var number = 4;//圆半径
    //中心点
    context.arc(155,155,number,0,2*Math.PI);//参数1：左右移动；参数2：上下移动；参数3：大小；参数4：图形显示百分比
    //左上点
    context.arc(75,75,number,0,2*Math.PI);
    //右下点
    context.arc(235,235,number,0,2*Math.PI);
    context.closePath();
    context.fillStyle = 'red';
    context.fill();
    
    context.beginPath();//开始绘制新路径
    //左下
    context.arc(75,235,number,0,2*Math.PI);
    //右上
    context.arc(235,75,number,0,2*Math.PI);
    context.closePath();
    context.fillStyle = 'red';
    context.fill();
}
	
/* 走棋 */
	// param - i : 棋子落点第几行 
	// param - j : 棋子落点第几列 
	// param - me : 是否黑棋 
function oneStep(i, j, me) {
	 /* 画圆（棋子） */
	//获取Canvas面板 
	var chess = document.getElementById("chess");
	//2D面板-画笔
	var context = chess.getContext("2d");
	 context.beginPath();
	 context.arc(15 + i * 20, 15 + j * 20, 9, 0, 2 * Math.PI); //圆心x  圆心y  半径  弧度(起)  弧度(止)
	 context.closePath();
	 //context.stroke();//描边
	 //context.fill();//填充
	 
	/* 棋子颜色渐变 */
	 var gradient = context.createRadialGradient(15 + i * 20 + 2, 15 + j * 20 - 2, 9, 15 + i * 20 + 2, 15 + j * 20 - 2, 0); //外圆圆心坐标 半径， 内圆圆心坐标半径
	 if (me) {
	  //黑棋颜色
	  gradient.addColorStop(0, "#0A0A0A"); //外圆颜色 0代表百分比
	  gradient.addColorStop(1, "#636766"); //内圆颜色 1代表百分比
	  } else {
	  //白棋颜色
	  gradient.addColorStop(0, "#D1D1D1");
	  gradient.addColorStop(1, "#F9F9F9");
	 }
	 context.fillStyle = gradient;
	 context.fill();
}

 /* 定义全局变量 me 代表黑白棋 */
	var me = true; //默认黑棋先行
	/* 定义全局变量 over 代表棋局是否结束 */
	var over = false;
	/* 定义全局二维数组并初始化 存储每个落子点的落子情况 */
	var chessBoard = [];
	for (var i = 0; i < 15; i++) {
		 chessBoard[i] = [];
		 for (var j = 0; j < 15; j++) {
		  chessBoard[i][j] = 0; // 0 未落子；1 黑子；2 白子
		 }
	}
	/* 定义全局变量 count 存储赢法ID */
	var count = 0;
	
	/* 定义全局三维数组 存储所有的赢法 并初始化 */
	var wins = [];
	for (var i = 0; i < 15; i++) {
	 wins[i] = [];
	 for (var j = 0; j < 15; j++) {
	  wins[i][j] = [];
	 }
	}
	
	/* 遍历所有赢法 填充赢法数组 */
	/* 横向五子连线的情况 */
	for (var i = 0; i < 15; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[i][j + k][count] = true;
	  }
	  count++;
	 }
	}
	
	/* 纵向五子连线的情况 */
	for (var i = 0; i < 15; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[j + k][i][count] = true;
	  }
	  count++;
	 }
	}
	/* 正斜向五子连线的情况 */
	for (var i = 0; i < 11; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[i + k][j + k][count] = true;
	  }
	  count++;
	 }
	}
	/* 反斜向五子连线的情况 */
	for (var i = 0; i < 11; i++) {
	 for (var j = 14; j > 3; j--) {
	  for (var k = 0; k < 5; k++) {
	   wins[i + k][j - k][count] = true;
	  }
	  count++;
	 }
	}
	//console.log(count); //572 可知 15 * 15 的棋盘上 五子棋共有 572 种赢法
	
	/* 定义全局一维数组 统计某种赢法下黑白棋子的状态 并初始化 */
	var BlackWin = [];
	var WhiteWin = [];
	for (var i = 0; i < count; i++) {
	 BlackWin[i] = 0; // 0：未落子  1：落下1子 …… 5：胜利  6:异常 - 对方已经落子（此赢法为不可能）
	 WhiteWin[i] = 0; // 换句话说，当BlackWin和WhiteWin数组的所有值都为 6 时， 为和棋
	}



/***** AI算法基本思路与实现 *****/
	/* 1、计算机执白后行 */
	/* 2、计算目标：阻止黑棋五子连线 && 试图白棋五子连线 */
	/* 3、记录棋盘中可能出现的所有赢法。 三维数组(棋子x, 棋子y, 赢法ID) */
	/* 4、赢法统计数组。 对每一种赢法的当前落子情况统计 */
	/* 5、胜负判定 */
	/* 6、计算机落子优先系数 */
	/* 7、计算机执白后行，同情况下白棋优先级需要高于黑棋。 即黑白棋同时4子连线时，需优先连接白棋第5子而非拦截黑棋 */
	/* 8、得分累加来判定某一点落子的价值大小*/
	/* 9、获取落子价值得分最高的点 */
	/* 10、落子的价值分相同时， 优先级顺序的选择：高 --> 低   行白+拦黑  >  行白  >  拦黑+行白  >  拦黑 */
	
	/* AI算法实现 */
	var computerAI = function(){
	
	 /* 定义变量 保存落子价值得分最高的分数和点坐标 */
	 var max = 0;
	 var u = 0;
	 var v = 0;
	
	 /* 定义两个一维数组 存储当前黑棋和白棋的落子评分 并初始化*/
	 var BlackScore = [];
	 var WhiteScore = [];
	 for (var i = 0; i < 15; i++) {
	  BlackScore[i] = [];
	  WhiteScore[i] = [];
	  for (var j = 0; j < 15; j++) {
	   BlackScore[i][j] = 0;
	   WhiteScore[i][j] = 0;
	  }
	 }
	
	 /* 评分方法 */
	 for (var i = 0; i < 15; i++) {
	  for (var j = 0; j < 15; j++) {
	   /* 该点无落子 */
	   if (chessBoard[i][j] == 0) {
	    /* 遍历所有赢法 */
	    for (var k = 0; k < count; k++) {
	     /* 对包含该点的赢法 所对应的赢法统计数组进行加分 -- 说明在该点落子是有价值的 */
	     if (wins[i][j][k]) {
	      /* 如果黑棋在这种赢法中已有1个落子 */
	      if (BlackWin[k] == 1) {
	       BlackScore[i][j] += 200;
	      /* 如果黑棋在这种赢法中已有2个落子 */
	      }else if (BlackWin[k] == 2) {
	       BlackScore[i][j] += 400;
	      /* 如果黑棋在这种赢法中已有3个落子 */
	      }else if (BlackWin[k] == 3) {
	       BlackScore[i][j] += 2000;
	      /* 如果黑棋在这种赢法中已有4个落子 */
	      }else if (BlackWin[k] == 4) {
	       BlackScore[i][j] += 10000;
	      }
	
	      /* 如果白棋在这种赢法中已有1个落子 */
	      if (WhiteWin[k] == 1) {
	       WhiteScore[i][j] += 220;
	      /* 如果白棋在这种赢法中已有2个落子 */
	      }else if (WhiteWin[k] == 2) {
	       WhiteScore[i][j] += 420;
	      /* 如果白棋在这种赢法中已有3个落子 */
	      }else if (WhiteWin[k] == 3) {
	       WhiteScore[i][j] += 2100;
	      /* 如果白棋在这种赢法中已有4个落子 */
	      }else if (WhiteWin[k] == 4) {
	       WhiteScore[i][j] += 20000;
	      }
	     }
	    }
	
	    /* 记录价值最高分和最高价值落子点坐标 */
	    /* 优先级问题  越靠后，优先级越高*/
	
	    /* 1、拦截黑棋 */
	    if (BlackScore[i][j] > max) {
	     max = BlackScore[i][j];
	     u = i;
	     v = j;
	    /* 2、当对黑棋的拦截价值分数相同时 优先选择在拦截基础上对白棋价值分更高的点位 */
	    }else if(BlackScore[i][j] == max){
	     if (WhiteScore[i][j] > WhiteScore[u][v]) {
	      u = i;
	      v = j;
	     }
	    }
	    /* 3、当行白棋和拦截黑棋价值分相同时，优先行走白棋*/
	    if (WhiteScore[i][j] > max) {
	     max = WhiteScore[i][j];
	     u = i;
	     v = j;
	    /* 4、当多个行走白棋的方案价值分相同时，优先选择在行走白棋基础上对黑棋拦截价值分更高的点位 */
	    }else if(WhiteScore[i][j] == max){
	     if (BlackScore[i][j] > BlackScore[u][v]) {
	      u = i;
	      v = j;
	     }
	    }
	   }
	  }
	 }
	
	 /* 计算机AI计算完毕 落子 */
	 oneStep(u, v, false);
	 /* 改变落子点状态 */
	 chessBoard[u][v] = 2; //白棋落子
	 /* 胜负判定*/
	 for (var k = 0; k < count; k++) {
	  if (wins[u][v][k]) {
	   /* 白棋在该赢法下胜利系数 + 1 */
	   WhiteWin[k]++;
	   /* 黑棋不可能在该赢法下胜利 */
	   BlackScore[k] = 6;
	   if (WhiteWin[k] == 5) {
	    window.alert("Computer Win");
	    over = true;
	   }
	  }
	 }
	 /* 如果未结束 改变落子方 */
	 if (!over) {
	  me = !me;
	 }

}
</script>
    <!-- script ends -->
</head>
<body>
	<div align="left" > 
		<a href="javascript:;" onClick="javascript:history.back(-1);">
			<img height="50" width="50"  src="../img/tubiao/1.png" border="0" title="返回上一页" >
		</a>
	</div>
	<div align="center">
		<p style="color:red;font-size:18px;font-weight:bold" align="center">五子棋游戏</p>
	   <canvas id="chess" width="320px" height="320px" align="center"></canvas>
	   <img id="img" src="../img/game_gobang/qipan.jpg" hidden="hidden"/>
	   <div id="restart" class="restart">
            <span>重新开始</span>
        </div>
	</div>
</body>
</html>

樱梦雪苹宝
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
原生Javascript实现五子棋
qq_41961383的博客
08-26 3540
原生Javascript实现五子棋
Javascript中canvas绘制五子棋棋盘
粥要熬。
05-06 6396
box-shadow:给元素块周边添加阴影效果。 语法：box-shadow: h-shadow v-shadow blur spread color inset； h-shadow:（必须）阴影的水平偏移量，如果是正值，则阴影在元素块右边；如果是负值，则阴影在元素块左边。 v-shadow:（必须）阴影的垂直偏移量，如果是正值，则阴影在元素块底部；如果是负值，则阴影在元素块顶部。 blur
【canvas画棋盘精简版】
trytryba的博客
06-28 356
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
Canvas绘制五子棋棋盘
muyupiaopiao的博客
01-12 2130
一、前台HTML中添加canvas（将width与height写入html中，放入css文件中显示的样式不一致）        二、css文件设置canvs样式 .chessboard { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }
canvas绘制简单五子棋棋盘
qq_40072782的博客
08-06 4805
什么是 canvas  &lt;canvas&gt; 是HTML5中用于图形的绘制的元素。&lt;canvas&gt; 标签只是图形容器，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。 Canvas（画布）简介 一个画布在网页中是一个矩形框，通过 &lt;canvas&gt; 元素来绘制. 注意: 默认情况下 &lt;canvas&gt; 元...
JS canvas绘制五子棋的棋盘
10-17
【JS Canvas绘制五子棋棋盘详解】 Canvas是HTML5中的一个强大特性，它允许开发者在网页上进行动态图形绘制。本教程将详细介绍如何利用JavaScript的Canvas API来创建一个五子棋的游戏棋盘。 首先，我们需要一个HTML...
html5 canvas简单的五子棋小游戏代码
11-03
2. **棋盘布局**：首先，我们需要在Canvas上绘制棋盘。通常，棋盘由15x15或19x19的交叉网格构成。我们可以设定每个格子的大小，然后通过循环绘制线条来形成网格。 3. **事件监听**：利用JavaScript的`...
html-五子棋小游戏-源码
最新发布
09-07
【HTML五子棋小游戏】是一种基于纯Web技术开发的在线娱乐项目，主要利用HTML、JavaScript（简称JS）以及HTML5的一些特性实现。这个小游戏无需安装任何客户端，只需将压缩包解压后在浏览器中打开，就能立即体验到...
利用js canvas实现五子棋游戏
10-14
本教程将详细介绍如何使用js canvas实现一个五子棋游戏。 首先，HTML部分设置了基本的页面结构，包含一个canvas元素和两个标题元素，用于显示游戏状态。canvas元素是画布，用于绘制五子棋盘，而标题元素则用来展示...
canvas五子棋制作
qq_49721447的博客
01-28 387
canvas制作五子棋 全部代码下载地址： 运行截图 说明 使用canvas制作五子棋，主要使用到鼠标点击事件，获取鼠标点击在canvas中的坐标，然后在将该坐标进行变化，将其变为距离点击位置最近的的一个角的坐标（一个矩形有四个角，鼠标点击在棋盘的某个矩形上），之后开始绘制棋子，再使用一个东西判断是否切换棋子颜色，每次下棋都进行胜负判定，当满足条件时，显示结果。 主要代码展示 该代码作用是将鼠标点击位置的坐标转化为相对画布原点的坐标。 c.addEventListener("click",
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
五子棋html版（源码）
04-05
五子棋html5版，喜欢可以试试
HTML5实现五子棋制作
07-18
html5实现网页版的五子棋，代码结构清晰
使用html5画一个棋盘
jiangfullll的专栏
03-08 5846
var grid = 30; var h = 50; var dig = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]; var w = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S']; var x = []; var y =
HTML+js实现简单的五子棋
qq_36336898的博客
01-02 3503
我们首先创建一个棋盘，是一个画布，我们可以在上面画出棋盘 CSS给棋盘阴影，我们可以看出棋盘大致轮廓。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;五子棋&lt;/title&gt; &lt;style type="text
Javascript和HTML5 利用canvas构建 Web五子棋游戏程序设计【图文说明】
weixin_33994429的博客
12-09 930
  HTML5 利用canvas构建 Web五子棋游戏程序设计 这只是一个简单的javascript和HTML5小程序，没有实现人机对战。 五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子；  判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二...
canvas绘制中国象棋棋盘
冰凌的博客
02-14 901
棋盘 board.html <!doctype html> <html> <head> <meta charset="gb2312"/> </head> <body> <div class="board"> <canvas id="board" width="450px" height=...
3分钟教你绘制一个围棋棋盘
代数的博客
01-05 3427
3分钟用代码绘制围棋棋盘
uni-app中使用canvas五子棋
05-02
在uni-app中使用canvas实现五子棋可以按照以下步骤进行： 1. 创建canvas组件 在需要使用canvas的页面中，添加一个canvas组件： ```html <canvas class="chessboard" canvas-id="canvas"></canvas> ``` 2. 获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值