原生js完成的五子棋人机大战

五子棋作为中国古代的传统黑白棋种之一，有着广泛的群众基础，是一种老少皆宜的棋类休闲游戏。因此开发一款五子棋游戏可以使五子棋爱好者在闲暇时间放松一下。

本系统是以java作为基础实现的，利用Visual Studio Code软件开发一个页面简洁的人机对战五子棋游戏，本系统采用html语言，使用css技术对界面进行了美化，再通过JavaScript创建电脑对象、棋子对象等等一系列对象让游戏贯穿起来，使其得以运行。游戏利用红黑两色棋子，实现双方的棋子区别，在程序能够在下子处重复下子时提醒，随时保存游戏，ai根据当前形势进行判断下子，判断胜负。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五子棋</title><style>.title{text-align:center;}.chess{display: block;/*块级元素*/margin: 50px auto;box-shadow:5px 5px 5px #B9B9B9,-2px -2px 2px #EFEFEF;cursor: pointer;/* 光标是一个小手 */}div{text-align: center;}.restart{padding: 10px 20px;background-color: #B9B9B9;border-radius: 5px;color: white;cursor: pointer;overflow: hidden;}.restar{padding: 10px 40px;background-color: #B9B9B9;border-radius: 5px;color: white;cursor: pointer;}</style></head><body><h3 class="title">--五子棋--</h3><!--canvas是一个矩形画布，可以用js在上面绘画，只能设置width和height两个属性--><canvas class="chess" width="450px" height="450px"></canvas><div><!-- <a class="restart" onclick="rst()">重新开始</a> --><!-- <a class="restar" onclick="save()">保存</a> --><button class="restar" onclick="saveChess() ">保存</button><button class="restart " onclick="getSaveChess()">继续</button><button class="restart" onclick="deleteChess()">重新开始</button></div>    </body><script>var chess = document.getElementsByClassName("chess")[0];//    我们通过getElementsByClassName得到的是一个数组var title = document.getElementsByClassName("title")[0];var context = chess.getContext("2d");context.strokeStyle="#B9B9B9"window.onload=function(){drawChessBoard();}function drawChessBoard(){for(var i=0;i<15;i++){//moveto起点坐标，lineto终点坐标context.moveTo(15,15+i*30);context.lineTo(435,15+i*30);//连接2点context.stroke();context.moveTo(15+i*30,15);context.lineTo(15+i*30,435);context.stroke();}}//胜利判定数组,这里我设置的三维数组，第一位是x轴的，第二位是y轴的，第三位是第几种方法，下面计算的时候用的位置都是第一个子的位置var wins=[];for(var i=0;i<15;i++){wins[i]=[];for(var j=0;j<15;j++){wins[i][j]=[]}     }//赢法的编号var count=0;//横线赢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<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<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++;}}//定义二维数组标记棋盘上的每个坐标是否有子var chessboard=[];for(var i=0;i<15;i++){chessboard[i]=[];for(var j=0;j<15;j++){chessboard[i][j]=0;}}// getSaveChess();//下棋var me=true;//用来标记一下人是否可以下棋var over=false;//标记游戏是否结束var myWin=[];//记录用户在赢法上的分值var computerWin=[];//记录计算机在赢法上的分值for(var i=0;i<count;i++){myWin[i]=0;computerWin[i]=0;}chess.onclick=function(e){//如果游戏结束不可以下棋,判断人是否可以下棋if(over||!me){return;}//获取x轴坐标，怕他点的位置不准确，你要让它也能选到地方var x=e.offsetX;//获取Y轴坐标var y=e.offsetY;var i = Math.floor(x/30);//意思是强行向下取。1.3取1,因为取点不可能点的很准var j = Math.floor(y/30);if(chessboard[i][j]==0){//这个是表示如果这个地方标记的是0，没有下子，那么这里就可以下一个//下一个子oneStep(i,j,me);//标记已经落子chessboard[i][j]=1;for(var k=0;k<count;k++){if(wins[i][j][k]){myWin[k]++;if(myWin[k]==5){title.innerHTML="恭喜你赢了！！！"over=true;}}}}else {alert("不能下")return}if(!over){me=!me;}//计算机落子computerAI()}function computerAI(){//我采用的是分值方法让计算机明白，当我有4个连在一起快5个了，你要拦截我下，看谁的分值高，如果计算机分值高他就下自己的，如果人分值高，那就拦截我下的//空白子在用户所占用赢法上的分值var myScore=[];//空白子在计算机所占用赢法上的分值var computerScore=[];for(var i=0;i<15;i++){myScore[i]=[];computerScore[i]=[];for(var j=0;j<15;j++){myScore[i][j]=0computerScore[i][j]=0;}}//空白字的最大分值var max=0;//最大分值空白字所在的坐标var x=0,y=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]){if(myWin[k]==1){myScore[i][j]+=200;}else if(myWin[k]==2){myScore[i][j]+=4000;}else if(myWin[k]==3){myScore[i][j]+=20000;}else if(myWin[k]==4){myScore[i][j]+=100000;}if(computerWin[k]==1){computerScore[i][j]+=220;}else if(computerWin[k]==2){computerScore[i][j]+=5200;}else if(computerWin[k]==3){computerScore[i][j]+=22000;}else if(computerWin[k]==4){computerScore[i][j]+=200000;}}}if(myScore[i][j]>max){max=myScore[i][j];x=i;y=j;}else if(myScore[i][j]==max){if(computerScore[i][j]>max){max=computerScore[i][j];x=i;y=j;}                     }if(computerScore[i][j]>max){max=computerScore[i][j];x=i;y=j;}else if(computerScore[i][j]==max){if(myScore[i][j]>max){max=myScore[i][j];x=i;y=j;}}}}}//判断完就让她落子oneStep(x,y,me);//落子后要他显示这个地方是落子的了chessboard[x][y]=2;for(var k=0;k<count;k++){if(wins[x][y][k]){computerWin[k]+=1;if(computerWin[k]==5){title.innerHTML="抱歉计算机赢了！！"over=true;}}}if(!over){me=!me;}}//落子的方法function oneStep(i,j,me){//把前面的草稿清除一下context.beginPath();context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//画⚪，2*Math.PI是2Π的意思，0是3点钟方向，13半径context.closePath();var yanse;if(me){yanse="black";}else{yanse="red";}context.fillStyle=yanse;context.fill();}//刷新浏览器function rst(){window.location.reload();}// 保存function saveChess() {//获取本地存储对象let storage = window.localStorage;// 将棋盘写进本地存储storage.setItem("chess", JSON.stringify(chessboard));alert("保存成功")}// 获取记录function getSaveChess() {//获取本地存储对象let storage = window.localStorage;//将本地存储中的chess取出来，因为取出的东西是json形式let chess = storage.getItem('chess')//所以要判断取出的值是不是空或nullif(chess != null && chess != ''){//将json格式转换成对象chessboard = JSON.parse(chess)//下面两个for循环是重新渲染棋盘for(let i = 0; i < chessboard.length; i++){for(let j = 0; j < chessboard[i].length; j++ ){if(chessboard[i][j]==1) {oneStep(i, j, true)}else if(chessboard[i][j]==2){oneStep(i, j, false)}}}}
}function deleteChess() {//获取本地存储对象，设置chess为空var t = localStoraget.setItem('chess','')//刷新页面window.location.reload();}</script>
</html>

原生js完成的五子棋人机大战相关推荐

五子棋输赢算法php,js实现AI五子棋人机大战
本文实例为大家分享了js实现AI五子棋人机大战的具体代码,供大家参考,具体内容如下实现原理就是计算五子棋所有赢的种类,利用canvas实现五子棋排版落子. 五子棋 #canvas{ display: ...
js小游戏——五子棋人机大战
五子棋小游戏,可能会有bug请各位大佬多多指教代码如下: css样式: canvas {display: block;margin: 50px auto;box-shadow: -2px -2px ...
js 实现ai五子棋人机大战
实现原理就是计算五子棋所有赢的种类,利用canvas实现五子棋排版落子. <!DOCTYPE html> <html lang="en"> <head ...
html五子棋人机对战,JS+canvas实现五子棋人机大战
1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this. ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
五子棋人机大战（Java菜鸟学习笔记）
五子棋人机大战(Java菜鸟学习笔记) 逻辑是: 1.绘制棋盘: 2.人机开始各执行一次操作,每进行一次操作就进行判断输赢其中判断输赢主要分成四个方向,横向.纵向以及交叉向,此时可以画图来找规律实现 ...
java小游戏:五子棋人机大战
一.java小游戏:五子棋人机大战 1.绘制窗口 package wuziqi;import javax.swing.*; import java.awt.event.MouseAdapter; im ...
android五子棋赢法数组,安卓欢乐五子棋人机大战报告.doc
安卓欢乐五子棋人机大战报告实验报告课程名称实验名称安卓五子棋人机大战实验时间2016年月 (系)专业一.实验目的在棋盘上任意落下一颗子,计算机调用AI算法,能判断出最佳的落子位置并落 ...
html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块先看下现在做完的效果: 代码详解人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...

原生js完成的五子棋人机大战

原生js完成的五子棋人机大战相关推荐

最新文章

热门文章