|
|
@@ -0,0 +1,383 @@
|
|
|
+<!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: #FFFFFF;
|
|
|
+ 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">--益智五子棋--</h3>
|
|
|
+<canvas id="chess" width="450px" height="450px"></canvas>
|
|
|
+<div id="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">
|
|
|
+ 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 = '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>
|
