html五子棋游戏（附源码）

在线体验地址：五子棋游戏体验

文章末尾是该游戏的完整代码（基于html+css+js），没学过前端或者没有编辑器的朋友不要着急，只要有电脑就可以完整运行此项目。

步骤：首先在桌面新建一个文本文档，然后把完整代码复制进去，保存并关闭。接着把文件的后缀改为html，双击即可看到游戏界面。

不会修改文件后缀或者文件显示不了后缀的朋友可以看看教程：https://www.windowszj.com/news/4884.html
界面出现中文乱码可以看看如何解决：https://zhuanlan.zhihu.com/p/149128500

效果：
点击一个格子就可以下棋了，你下完一步AI会自动下，加油！

如果不使用一些技巧，还是很难战胜计算机的，快去试试吧。

完整源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>五子棋</title><style type='text/css'>canvas {display: block;margin: 50px auto;box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;cursor: pointer;}.btn-wrap { display: flex; flex-direction: row; justify-content:center;}.btn-wrap div { margin: 0 10px;}div>span {display: inline-block;padding: 10px 20px;color: #fff;background-color: #EE82EE;border-radius: 5px;cursor: pointer;}div.unable span { background: #D6D6D4; color: #adacaa;}#result-wrap {text-align: center;}</style></head><body><h3 id="result-wrap">--AI五子棋--</h3><canvas id="chess" width="450px" height="450px"></canvas><div class="btn-wrap"><div id='restart' class="restart"><span>重新开始</span></div><div id='goback' class="goback unable"><span>悔棋</span></div><div id='return' class="return unable"><span>撤销悔棋</span></div></div><script type="text/javascript" charset="utf-8">var over = false;var me = true; //我var _nowi = 0, _nowj = 0; //记录自己下棋的坐标var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标var _myWin = [], _compWin = []; //记录我，计算机赢的情况var backAble = false, returnAble = false; var resultTxt = document.getElementById('result-wrap');var chressBord = [];//棋盘for(var i = 0; i < 15; i++){chressBord[i] = [];for(var j = 0; j < 15; j++){chressBord[i][j] = 0;}}//赢法的统计数组var myWin = [];var computerWin = [];//赢法数组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[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++;}}// debugger;for(var i = 0; i < count; i++){myWin[i] = 0;_myWin[i] = 0;computerWin[i] = 0;_compWin[i] = 0;}var chess = document.getElementById("chess");var context = chess.getContext('2d');context.strokeStyle = '#bfbfbf'; //边框颜色var backbtn = document.getElementById("goback");var returnbtn = document.getElementById("return");window.onload = function(){drawChessBoard(); // 画棋盘}document.getElementById("restart").onclick = function(){window.location.reload();}// 我，下棋chess.onclick = function(e){if(over){return;}if(!me){return;}// 悔棋功能可用backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); var x = e.offsetX;var y = e.offsetY;var i = Math.floor(x / 30);var j = Math.floor(y / 30);_nowi = i;_nowj = j;if(chressBord[i][j] == 0){oneStep(i,j,me);chressBord[i][j] = 1; //我，已占位置        for(var k = 0; k < count; k++){ // 将可能赢的情况都加1if(wins[i][j][k]){// debugger;myWin[k]++;_compWin[k] = computerWin[k];computerWin[k] = 6;//这个位置对方不可能赢了if(myWin[k] == 5){// window.alert('你赢了');resultTxt.innerHTML = '恭喜，你赢了！';over = true;}}}if(!over){me = !me;computerAI();}}         }// 悔棋backbtn.onclick = function(e){if(!backAble) { return;}over = false;me = true;// resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';// 撤销悔棋功能可用returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); // 我，悔棋chressBord[_nowi][_nowj] = 0; //我，已占位置 还原minusStep(_nowi, _nowj); //销毁棋子                                  for(var k = 0; k < count; k++){ // 将可能赢的情况都减1if(wins[_nowi][_nowj][k]){myWin[k]--;computerWin[k] = _compWin[k];//这个位置对方可能赢}}// 计算机相应的悔棋chressBord[_compi][_compj] = 0; //计算机，已占位置 还原minusStep(_compi, _compj); //销毁棋子                                  for(var k = 0; k < count; k++){ // 将可能赢的情况都减1if(wins[_compi][_compj][k]){computerWin[k]--;myWin[k] = _myWin[i];//这个位置对方可能赢}}resultTxt.innerHTML = '--益智五子棋--';returnAble = true;backAble = false;}// 撤销悔棋returnbtn.onclick = function(e){if(!returnAble) { return; }// 我，撤销悔棋chressBord[_nowi][_nowj] = 1; //我，已占位置 oneStep(_nowi,_nowj,me);                              for(var k = 0; k < count; k++){ if(wins[_nowi][_nowj][k]){myWin[k]++;_compWin[k] = computerWin[k];computerWin[k] = 6;//这个位置对方不可能赢}if(myWin[k] == 5){resultTxt.innerHTML = '恭喜，你赢了！';over = true;}}// 计算机撤销相应的悔棋chressBord[_compi][_compj] = 2; //计算机，已占位置   oneStep(_compi,_compj,false);                               for(var k = 0; k < count; k++){ // 将可能赢的情况都减1if(wins[_compi][_compj][k]){computerWin[k]++;_myWin[k] = myWin[k];myWin[k] = 6;//这个位置对方不可能赢}if(computerWin[k] == 5){resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';over = true;}}returnbtn.className += ' '+ 'unable';returnAble = false;backAble = true;}// 计算机下棋var computerAI = function (){var myScore = [];var computerScore = [];var max = 0;var u = 0, v = 0;for(var i = 0; i < 15; i++){myScore[i] = [];computerScore[i] = [];for(var j = 0; j < 15; j++){myScore[i][j] = 0;computerScore[i][j] = 0;}}for(var i = 0; i < 15; i++){for(var j = 0; j < 15; j++){if(chressBord[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] += 400;}else if(myWin[k] == 3){myScore[i][j] += 2000;}else if(myWin[k] == 4){myScore[i][j] += 10000;}if(computerWin[k] == 1){computerScore[i][j] += 220;}else if(computerWin[k] == 2){computerScore[i][j] += 420;}else if(computerWin[k] == 3){computerScore[i][j] += 2100;}else if(computerWin[k] == 4){computerScore[i][j] += 20000;}                        }}if(myScore[i][j] > max){max  = myScore[i][j];u = i;v = j;}else if(myScore[i][j] == max){if(computerScore[i][j] > computerScore[u][v]){u = i;v = j;    }}if(computerScore[i][j] > max){max  = computerScore[i][j];u = i;v = j;}else if(computerScore[i][j] == max){if(myScore[i][j] > myScore[u][v]){u = i;v = j;    }}}}}_compi = u;_compj = v;oneStep(u,v,false);chressBord[u][v] = 2;  //计算机占据位置for(var k = 0; k < count; k++){if(wins[u][v][k]){computerWin[k]++;_myWin[k] = myWin[k];myWin[k] = 6;//这个位置对方不可能赢了if(computerWin[k] == 5){resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';over = true;}}}if(!over){me = !me;}backAble = true;returnAble = false;var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');if(!hasClass) {returnbtn.className += ' ' + 'unable';}}//绘画棋盘var drawChessBoard = function() {for(var i = 0; i < 15; i++){context.moveTo(15 + i * 30 , 15);context.lineTo(15 + i * 30 , 435);context.stroke();context.moveTo(15 , 15 + i * 30);context.lineTo(435 , 15 + i * 30);context.stroke();}}//画棋子var oneStep = function(i,j,me) {context.beginPath();context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆context.closePath();//渐变var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);if(me){gradient.addColorStop(0,'#0a0a0a');gradient.addColorStop(1,'#636766');}else{gradient.addColorStop(0,'#d1d1d1');gradient.addColorStop(1,'#f9f9f9');}context.fillStyle = gradient;context.fill();}//销毁棋子var minusStep = function(i,j) {//擦除该圆context.clearRect((i) * 30, (j) * 30, 30, 30);// 重画该圆周围的格子context.beginPath();context.moveTo(15+i*30 , j*30);context.lineTo(15+i*30 , j*30 + 30);context.moveTo(i*30, j*30+15);context.lineTo((i+1)*30 , j*30+15);context.stroke();}</script></body>
</html>

在线体验地址：五子棋游戏体验
更多html游戏源码可以看我的专栏：html游戏源码

html五子棋游戏（附源码）相关推荐

html实现扫雷小游戏(附源码)
文章目录实现功能 1.扫雷设计 1.1 主界面 1.2 扫雷难度 1.3 附带功能 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https://blo ...
python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
java手机象棋软件下载,Java手机网络版象棋游戏附源码JAVA游戏源码下载
运行于手机上的中国象棋游戏,鉴于JAVA J2ME技术,本游戏分服务端和客户端,导入JAR包即可在手机上运行,内有开发文档和运用说明. Java手机网络版象棋游戏附源码 (1 folders, 2 f ...
JAVA飞机大战游戏附源码
JAVA飞机大战附源码 java飞机大战效果图如下 java飞机大战话不多说直接上源码窗体部分 package UI; //自定义窗体 //创建类继承JFrame //创建构造方法,设置窗体 ...
HTML小游戏五子棋（附源码）
步骤:首先在桌面新建一个文本文档,然后把完整代码复制进去,保存并关闭.接着把文件的后缀改为html,双击即可看到游戏界面. 效果: 点击一个格子就可以下棋了,你下完一步AI会自动下,加油! 如果不使用 ...
【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件关注小 ...
整理了30款Python小游戏附源码，五一有的玩了
快到五一了,整理了 30 款 Python 小游戏源码分享给大家,具体内容可以点击下方视频号查看: 点击上方视频后,源码获取方式:①关注上方视频号.②点赞当前视频.③在当前视频评论区扣1 友情提示:获 ...
【Python游戏】基于化学方程式的基础上，用Python实现一个消灭泡泡小游戏 | 附源码
前言 halo,包子们下午好今天实现的这个小游戏呀,说实话化学不太好的小伙伴可能看起来会有点懵逼不过不用担心,咱们今天不是来学化学的,我们是来学习Python的所以呀,不要太担心啦,大家先好好看 ...
【Python游戏】用Python 和 Pyglet 编写一个我的世界小游戏 | 附源码
相关文件想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复我的世界 Pytho ...
【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级九宫格拼图 1.2 第二级十六宫格拼图 1.3 第三级三十二宫格拼图 14 第三级八十一宫格拼图 2.图片切图说明 3.实 ...

html五子棋游戏（附源码）

html五子棋游戏（附源码）相关推荐

最新文章

热门文章