html五子棋游戏,HTML5-右脑开发项目-小游戏-五子棋gobang.html
五子棋gobang.html
手机-五子棋canvas{
display: block;
margin: 20px auto;
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;
}
//页面加载
$(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("机器人获胜！");
over = true;
}
}
}
/* 如果未结束 改变落子方 */
if (!over) {
me = !me;
}
}
五子棋
五子棋游戏
重新开始