使用原生JS+Canvas实现五子棋游戏

布局+样式部分代码：

    <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><h3 id="result-wrap">--五子棋--</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>

js部分代码：

 <script>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++) { // 将可能赢的情况都加1 if (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++) { // 将可能赢的情况都减1 if (wins[_nowi][_nowj][k]) {myWin[k]--;computerWin[k] = _compWin[k];//这个位置对方可能赢 }}// 计算机相应的悔棋 chressBord[_compi][_compj] = 0; //计算机，已占位置 还原 minusStep(_compi, _compj); //销毁棋子   for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 if (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++) { // 将可能赢的情况都减1 if (wins[_compi][_compj][k]) {computerWin[k]++;_myWin[k] = myWin[k];myWin[k] = 6;//这个位置对方不可能赢 }if (computerWin[k] == 5) {resultTxt.innerHTML = '计算机赢了，继续加油哦！';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 = '计算机赢了，继续加油哦！';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>

使用原生JS+Canvas实现五子棋游戏相关推荐

五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块先看下现在做完的效果: 代码详解人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...
java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析游戏思想: 面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的 ...

使用原生JS+Canvas实现五子棋游戏

使用原生JS+Canvas实现五子棋游戏相关推荐

最新文章

热门文章