<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ font-size: 36px; } *{ padding: 0; margin: 0; } .score { text-align: center; line-height: 50px; height: 50px; } .buttons { text-align: center; } button{ font-size: 36px; line-height: 50px; margin-right: 30px; padding: 0 30px; } div{ text-align: center; } </style> </head> <body> <div> <canvas id="blackWhite"></canvas> </div> <p class="score"> <!--<span>比分</span> --> <span id="score">黑:白 = 2:2</span> </p> <p class="buttons"> <button id="regret">悔棋</button> <button id="giveUp">认输</button> <button id="negotiate">求和</button> </p> </body> <!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>--> <script type="text/javascript"> // 黑白棋 又叫反棋 class Reversi { constructor (canvasId){ this.canvasId = canvasId; this.resetData(); } // 重置数据，再来一局 resetData (){ var body = document.documentElement || document.body; var minWidth = Math.min(body.clientWidth, body.clientHeight); // 属性 this.pieces = []; // 棋子数组 二位数组[[],[]] this.recommend = []; this.rowCount = 8; // 行数 this.colCount = this.rowCount;// 列数 this.cellWidth = minWidth/this.rowCount; //每个格子的宽 this.width = this.rowCount * this.cellWidth; // 棋盘的宽 this.height = this.width; // 棋盘的高 this.R = this.cellWidth * 0.4; // 棋子半径 this.HR = this.cellWidth / 4; // 提示格子的半径 hintRadius this.HColor = "#e73480"; // 提示棋子的颜色 this.hisStatus = []; // 历史记录 history status this.noChessCount = 0; // 没棋走次数 this.active = "black"; // 当前走棋方 this.canvas = document.getElementById(this.canvasId); // canvas DOM this.ctx = this.canvas.getContext("2d"); // canvas环境 this.whiteCount = 2; // 白棋数量 this.blackCount = 2; // 黑棋数量 this.victor = ""; // 胜利方 this.init(); } // 初始化数据 init (){ this.initCanvas(); this.initPiece(); this.recommed(); this.renderUi(); } // 设置棋盘的宽高 initCanvas (){ this.canvas.width = this.width; this.canvas.height = this.height; } // 初始化棋子 initPiece (){ var initPieces = []; for(let i=0;i<this.rowCount;i++){ // 行 initPieces.push([]); for(let j=0;j<this.colCount;j++){ // 列 initPieces[i].push({value:0,color:""}); } } // 初始的时候中间有四个棋子 var center = Math.floor((this.rowCount-1)/2); // initPieces[center][center].value = 1; initPieces[center][center].color = "black"; initPieces[center][center+1].value = 1; initPieces[center][center+1].color = "white"; initPieces[center+1][center].value = 1; initPieces[center+1][center].color = "white"; initPieces[center+1][center+1].value = 1; initPieces[center+1][center+1].color = "black"; // console.log(initPieces); this.pieces = this.deepClone(initPieces); this.hisStatus[0] = this.deepClone(initPieces); } renderUi(){ //清除之前的画布 this.ctx.clearRect(0,0,this.width,this.height); // 重绘画布 this.drawMap(); this.drawPieces(); this.recommed(); this.drawHint(); } //画一个棋子或一个提示圆点 drawDot(x,y,r,color){ this.ctx.beginPath(); this.ctx.arc(x,y,r,0,2*Math.PI); this.ctx.closePath(); this.ctx.fillStyle = color; this.ctx.fill(); } // 画棋盘 drawMap(){ // 背景 this.ctx.beginPath(); this.ctx.rect(0,0,this.width,this.height); this.ctx.closePath(); this.ctx.fillStyle = "#0099CC"; this.ctx.fill(); // 画横线 this.ctx.beginPath(); for(let i=0;i<this.rowCount;i++){ this.ctx.moveTo(0,this.cellWidth*i); this.ctx.lineTo(this.cellWidth*this.rowCount,this.cellWidth*i); } this.ctx.stroke(); // 画纵线 this.ctx.beginPath(); for(let i=0;i<this.colCount;i++){ this.ctx.moveTo(this.cellWidth*i,0); this.ctx.lineTo(this.cellWidth*i,this.cellWidth*this.colCount); } this.ctx.stroke(); } // 画所有的棋子 drawPieces(){ for(let i=0;i<this.pieces.length;i++){ for(let j=0;j<this.pieces[i].length;j++){ if(this.pieces[i][j].value){ var x = i * this.cellWidth + this.cellWidth/2; var y = j * this.cellWidth + this.cellWidth/2; this.drawDot(x,y,this.R,this.pieces[i][j].color); } } } } // 画所有的提示 drawHint(){ for(let i=0;i<this.recommend.length;i++){ var x = this.recommend[i].x * this.cellWidth + this.cellWidth/2; var y = this.recommend[i].y * this.cellWidth + this.cellWidth/2; this.drawDot(x,y,this.HR, this.HColor); } } // 是否可以走这一步 canGo (xx,yy){// 条件 1.双方无期可走 2.棋盘下满了 3.没有本色的棋子了 var flag = false; for(var i=0;i<this.recommend.length;i++){ if(this.recommend[i].x == xx && this.recommend[i].y == yy){ flag = true; break; } } return flag; } // 吃子 fire (x,y){ for(var i=0;i<this.recommend.length;i++){ if(this.recommend[i].x == x && this.recommend[i].y == y){ // 走推荐位置(吃掉可以吃的各个方向) // console.log("x:"+this.recommend[i].x+";y:"+this.recommend[i].y,"匹配位置"); var xx =x, yy = y; switch(this.recommend[i].direction){ //上加下减y 左加右减x case "上": // j在下（大） yy在上（小） xx不变 while(++yy < this.recommend[i].j){ this.pieces[xx][yy].color = this.active; } break; case "右":// x在左（小） xx在右（大） yy不变 while(--xx > this.recommend[i].i){ this.pieces[xx][yy].color = this.active; } break; case "下":// j在上（小） yy在下（大） xx不变 while(--yy > this.recommend[i].j){ this.pieces[xx][yy].color = this.active; } break; case "左":// i在左（小） yy在右（大） i不变 while(++xx < this.recommend[i].i){ this.pieces[xx][yy].color = this.active; } break; case "右上": while(--xx > this.recommend[i].i){ this.pieces[xx][++yy].color = this.active; } break; case "右下": while(--xx > this.recommend[i].i){ this.pieces[xx][--yy].color = this.active; } break; case "左下": while(++xx < this.recommend[i].i){ this.pieces[xx][--yy].color = this.active; } break; case "左上": while(++xx < this.recommend[i].i){ this.pieces[xx][++yy].color = this.active; } break; default: console.log("jjle,吃不了子"); } } } } // 显示可以走的位置 recommed (){ this.recommend = []; for(var i=0;i<this.rowCount;i++){ for(var j=0;j<this.colCount;j++){ if(this.pieces[i][j].color == this.active){ // 轮到当前方走棋 // console.log("当前棋子颜色:"+active+";x:"+i+";y:"+j); // 判断8个方向上是否可以走 // 右 1右测第一个是敌方棋子，2然后排查后面的每一个但不越界，3遇到己方或者空结束(己方的不可以走，空可以走，敌方的继续排查) if(this.pieces[i+1] && this.pieces[i+1][j].color && this.pieces[i+1][j].color != this.active){ // 有对方的棋才可以走 for(var a=2;i+a<this.rowCount;a++){ if(this.pieces[i+a][j].color == ""){ // 空 this.recommend.push({x:i+a,y:j,i:i,j:j,direction:"右"}); // console.log(i+a,j,"右"); break; }else if(this.pieces[i+a][j].color == this.active){ // 己方 break; }else{ // 敌方 continue; } } } // 左 if(this.pieces[i-1] && this.pieces[i-1][j].color && this.pieces[i-1][j].color != this.active){ // 有对方的棋才可以走 for(var a=2;i-a>=0;a++){ if(this.pieces[i-a][j] && this.pieces[i-a][j].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i-a][j].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i-a,y:j,i:i,j:j,direction:"左"}); // console.log(i-a,j,"左") break; } } } // 上 if(this.pieces[i][j-1] && this.pieces[i][j-1].color && this.pieces[i][j-1].color != this.active){ // 有对方的棋才可以走 for(var a=2;j-a>=0;a++){ if(this.pieces[i][j-a] && this.pieces[i][j-a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i][j-a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i,y:j-a,i:i,j:j,direction:"上"}); // console.log(i,j-a,"上") break; } } } // 下 if(this.pieces[i][j+1] && this.pieces[i][j+1].color && this.pieces[i][j+1].color != this.active){ // 有对方的棋才可以走 for(var a=2;j+a<this.rowCount;a++){ if(this.pieces[i][j+a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i][j+a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i,y:j+a,i:i,j:j,direction:"下"}); // console.log(i,j+a,"下") break; } } } // 右下 if(this.pieces[i+1] && this.pieces[i+1][j+1] && this.pieces[i+1][j+1].color && this.pieces[i+1][j+1].color != this.active){ // 有对方的棋才可以走 for(var a=2;a+j<this.rowCount && a+i<this.rowCount;a++){ if(this.pieces[i+a][j+a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i+a][j+a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i+a,y:j+a,i:i,j:j,direction:"右下"}); // console.log(i+a,j+a,"右下") break; } } } // 右上 if(this.pieces[i+1] && this.pieces[i+1][j-1] && this.pieces[i+1][j-1].color && this.pieces[i+1][j-1].color != this.active){ // 有对方的棋才可以走 for(var a=2;i+a<this.rowCount && j-a>=0;a++){ if(this.pieces[i+a][j-a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i+a][j-a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i+a,y:j-a,i:i,j:j,direction:"右上"}); // console.log(i+a,j-a,"右上") break; } } } // 左上 if(this.pieces[i-1] && this.pieces[i-1][j-1] && this.pieces[i-1][j-1].color && this.pieces[i-1][j-1].color != this.active){ // 有对方的棋才可以走 for(var a=2;i-a>=0 && j-a>=0;a++){ if(this.pieces[i-a][j-a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i-a][j-a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i-a,y:j-a,i:i,j:j,direction:"左上"}); // console.log(i-a,j-a,"左上") break; } } } // 左下 if(this.pieces[i-1] && this.pieces[i-1][j+1] && this.pieces[i-1][j+1].color && this.pieces[i-1][j+1].color != this.active){ // 有对方的棋才可以走 for(var a=2;i-a>=0 && j+a<this.rowCount;a++){ if(this.pieces[i-a][j+a].color){ // 有棋子 判断是否是敌方棋子 if(this.pieces[i-a][j+a].color != this.active){ continue; }else{ break; } }else{ //没有棋子 可以走 this.recommend.push({x:i-a,y:j+a,i:i,j:j,direction:"左下"}); // console.log(i-a,j+a,"左下") break; } } } }else{ // 没有棋子或不是当前方 continue; } } } console.log(this.recommend,"推荐位置数组"); if(this.recommend.length==0){ var piecesCount = this.getNum(this.active)+this.getNum(this.active == "black" ? "white" : "black"); if(piecesCount<this.rowCount*this.colCount){ this.noChess++; if(this.noChess<=64-piecesCount){ // 顶多连走 64-棋子数 this.active = this.active == "black" ? "white" : "black"; // console.log(this.active+"没有棋走，另一方继续"); alert(this.active+"没有棋走，另一方继续"); this.renderUi(); }else{ this.noChess=0; this.over(); } }else{ // 下满了 this.over(); } } } // 游戏结束 判断输赢、再来一局 over (){ switch (this.winner()){ case "white": // console.log("恭喜恭喜","白棋赢"); alert("白棋赢"); break; case "black": // console.log("恭喜恭喜","黑棋赢"); alert("黑棋赢"); break; default: // console.log("恭喜恭喜","和棋"); alert("和棋"); } } // 走一步 1.判断这一步是否可以走 2.改变路途的棋子颜色 goStep (x,y){ // this.recommed(); if(this.canGo(x,y)){ this.pieces[x][y].value = 1; this.pieces[x][y].color = this.active; this.fire(x,y); // 这里有个大坑 // var curPieces = Object.assign([],this.pieces); // this.hisStatus.push(Object.assign([],curPieces)); this.hisStatus.push(this.deepClone(this.pieces)); // console.log(this.hisStatus,"棋局") // 轮流走棋 this.active = this.active == "black" ? "white" : "black"; this.renderUi(); this.whiteCount = this.getNum ("white"); this.blackCount = this.getNum ("black"); }else{ // console.log("别捣乱，好好走"); alert("别捣乱，好好走"); } } // 深拷贝 deepClone (values) { var copy; // Handle the 3 simple types, and null or undefined if (null == values || "object" != typeof values) return values; // Handle Date if (values instanceof Date) { copy = new Date(); copy.setTime(values.getTime()); return copy; } // Handle Array if (values instanceof Array) { copy = []; for (var i = 0, len = values.length; i < len; i++) { copy[i] = this.deepClone(values[i]); } return copy; } // Handle Object if (values instanceof Object) { copy = {}; for (var attr in values) { if (values.hasOwnProperty(attr)) copy[attr] = this.deepClone(values[attr]); } return copy; } throw new Error("Unable to copy values! Its type isn't supported."); } // 判断谁赢winner winner (){ if(this.getNum("white") > this.getNum("black")){ this.victor = "white"; return "white"; } else if(this.getNum("white") < this.getNum("black")){ this.victor = "black"; return "black"; } else { this.victor = "和棋"; return "和棋"; } } // 白棋或黑棋的数量 getNum (color){ var count = 0; for(var i=0,len=this.pieces.length;i<len;i++){ for(var j=0,len1=this.pieces[i].length;j<len1;j++){ if(color == this.pieces[i][j].color){ count++; } } } return count; } // return 赢家 getVictor (){ switch(this.victor){ case "white": alert("白棋胜"); break; case "black": alert("黑棋胜"); break; case "和棋": alert("和棋"); break; default: alert("出bug了"); } } // 认输 giveUp (){ this.victor = this.active == "black" ? "white" : "black"; this.getVictor(); this.resetData(); } // 求和 negotiate (){ this.victor = "和棋"; this.getVictor(); this.resetData(); } // 悔棋 regret (){ if(this.hisStatus.length>1){ this.hisStatus.pop(); // console.log(this.hisStatus,"删除一步的棋局"); this.pieces = Object.assign([],this.hisStatus[this.hisStatus.length-1]); //[...this.hisStatus[this.hisStatus.length-1]]; this.active = this.active == "black" ? "white" : "black"; // console.log(this.pieces,"当前棋局"); this.renderUi(); this.whiteCount = this.getNum ("white"); this.blackCount = this.getNum ("black"); }else { alert("没有棋可以悔了"); } } } </script> <script type="text/javascript"> var score = document.getElementById("score"); var regret = document.getElementById("regret"); var giveUp = document.getElementById("giveUp"); var negotiate = document.getElementById("negotiate"); var offset; var reversi = new Reversi("blackWhite"); reversi.canvas.addEventListener("click",function(e){ offset = reversi.canvas.getBoundingClientRect(); var x = Math.floor((e.clientX - offset.left) / reversi.cellWidth); var y = Math.floor((e.clientY - offset.top) / reversi.cellWidth); console.log(x,y,"点击位置"); // 走棋 reversi.goStep(x,y); getScore(); },false); function getScore(){ score.innerHTML = "黑:白 = "+reversi.blackCount + ":"+reversi.whiteCount; } giveUp.onclick = function(){ if(confirm("你确定认输吗？")){ reversi.giveUp(); getScore(); } } negotiate.onclick = function (){ if(confirm("你确定求和吗？")){ if(confirm("你同意和棋吗？")){ reversi.negotiate(); getScore(); }else{ alert("对方拒绝和棋！"); } } } regret.onclick = function(){ if(confirm("对方请求悔棋，是否同意？")){ reversi.regret(); getScore(); }else{ alert("对方拒绝悔棋"); } } </script> </html>