五子棋游戏源码和核心算法的讲解（简易五子棋web版）

扫雷游戏代码【js】

 <style>*{margin:0;}/*解决浏览器的兼容问题*/#canvas{background:#f4f4f4;margin:100px auto auto auto;display:block;border:7px solid #3d3d3d;box-shadow:0 0 30px;}body{background:url(http://img.zcool.cn/community/018d4e554967920000019ae9df1533.jpg@900w_1l_2o_100sh.jpg);background-size:cover;;}button{height:40px;width:100px;display:block;margin:45px auto ;border-radius: 25px;}</style></head><body><canvas id="canvas" height="450" width="450"></canvas><button id="restart">重新开始</button></body>

一、以上是界面的代码

二、js的部分代码

  //获得画板var chess=document.getElementById("canvas");//获得画笔（上下文）var context=chess.getContext("2d");//true为白棋,false为黑棋var me=false;//棋盘数组，0代表没有棋子，1代表白棋，2代表黑棋var chessBorad=[];for(var i=0;i<15;i++){chessBorad[i]=[];for(var j=0;j<15;j++){chessBorad[i][j]=0;}}//获得按钮var restart=document.getElementById("restart");

三、以下的代码将棋盘（的线）画出来

//绘画棋盘的方法function drawChessBorad(){context.strokeStyle="#4d4d4d";//改变线条的颜色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();}}window.onload=function(){drawChessBorad();}

四、以下代码是用来绘画棋子的和重启游戏，以及画板的点击事件

 //画棋子function drawChess(i,j,me){//i纵坐标,j横坐标context.beginPath();context.arc(15+j*30,i*30+15,13,0,Math.PI*2,false);context.closePath();context.stroke();//设置渐变色 径向渐变var grd=context.createRadialGradient(15+j*30+2,i*30+15-2,10,15+j*30+2,i*30+15-2,0);if(me){//白棋grd.addColorStop(0,"#d1d1d1");grd.addColorStop(1,"#f9f9f9");chessBorad[i][j]=1;}else{//黑棋grd.addColorStop(0,"#0a0a0a");grd.addColorStop(1,"#636767");chessBorad[i][j]=2;}context.fillStyle=grd;//设置填充色context.fill();}//画板的鼠标点击事件chess.onclick=function(e){var x=e.offsetX;var y=e.offsetY;var i=Math.floor(y/30);var j=Math.floor(x/30);if(chessBorad[i][j]==0){drawChess(i,j,me);//画棋子win(i,j,me);me=!me;}}//重新游戏restart.onclick=function(){clearChess();}//清空棋子function clearChess(){//当canvas的高度或者宽度重新设置时将清空画布chess.height=chess.height;drawChessBorad(); }

五、判断游戏是哪方赢了（核心代码）

之前在网上看的大部分代码的算法大都是遍历了整个棋盘，以此来判断是否有哪一方已经达到赢的条件。个人觉得此算法的性能不是特别好。

以下的代码算法思想是：达成赢得条件时，那五个连成一直线的棋子中必然有一个是最后下的。由此获取最后棋子的坐标，向八方分别计算各个方向与其相同颜色的棋子个数。

统计好以上八个方向上（除了最后一个棋子）与最后一个棋子相同颜色的棋子，并且在遇到另一种颜色棋子时就不再进行统计，一个方向上最多统计4个棋子。

最后判断以下四个方向是否存在五个相同颜色的棋子（颜色为最后一个棋子的颜色），存在则达到了赢的条件，游戏结束。

代码的实现：

//判断赢的方法function win(i,j,me){//i纵坐标,j横坐标var count=[0,0,0,0,0,0,0,0];var state=[1,1,1,1,1,1,1,1];//遇到相同颜色值为1var color=1;if(me){color=1;}else{color=2;}for(var step=1;step<5;step++){if(state[0]==1&&i-step>=0&&j-step>=0){if(chessBorad[i-step][j-step]==color){count[0]++;}else{state[0]=2;}//遇到相异的颜色或者没有棋子}if(state[1]==1&&i-step>=0){if(chessBorad[i-step][j]==color){count[1]++;}else{state[1]=2;}}if(state[2]==1&&i-step>=0&&j+step<15){if(chessBorad[i-step][j+step]==color){count[2]++;}else{state[2]=2;}}if(state[3]==1&&j+step<15){if(chessBorad[i][j+step]==color){count[3]++;}else{state[3]=2;}}if(state[4]==1&&i+step<15&&j+step<15){if(chessBorad[i+step][j+step]==color){count[4]++;}else{state[4]=2;}}if(state[5]==1&&i+step<15){if(chessBorad[i+step][j]==color){count[5]++;}else{state[5]=2;}}if(state[6]==1&&i+step<15&&j-step>=0){if(chessBorad[i+step][j-step]==color){count[6]++;}else{state[6]=2;}}if(state[7]==1&&j-step>=0){if(chessBorad[i][j-step]==color){count[7]++;}else{state[7]=2;}}}if((count[0]+count[4]+1)>=5||(count[1]+count[5]+1)>=5||(count[2]+count[6]+1)>=5||(count[3]+count[7]+1)>=5){if(me){alert("白棋赢了");}else{alert("黑棋赢了");}}}

五子棋游戏源码和核心算法的讲解（简易五子棋web版）相关推荐

艾默生充电桩15kw模块，软件源码加原理图BOM 艾默生充电桩15kw模块原版软件源码含核心算法
艾默生充电桩15kw模块,软件源码加原理图BOM 艾默生充电桩15kw模块原版软件源码含核心算法,PFC+DCDC双dsp数字控制,原理图,BOM和PCB(但为PDF版),通信协议文档,带上位机调试工 ...
android五子棋源代码,Android五子棋游戏源码详解
最近看了鸿洋大牛的五子棋教程,受益匪浅,讲的非常好,关于五子棋的游戏原理非常清楚,并且学到了不少知识,在这里感谢鸿洋大神的分享.我觉得我的源码注释写的非常清楚了,希望能给你带来不少的收获. 布局< ...
C++实现图形界面五子棋游戏源码
C++图形界面五子棋, Shell控制台实现五子棋的基础上引用了图形库源码. 如需安装c++或远程调试,可加QQ905733049由专业技术人员远程协助! 下面给出代码: #include<gr ...
java版五子棋游戏源码
一.Vector 向量容器向量是用来实现不同元素共存的变长数组的工具类 Vector 类可以实现可增长的对象数组适合用向量类的场景 a.需要处理的对象数目不定,序列中的元素都是对象或者可以表示为对 ...
php 五子棋源联机版_PHP网页版的在线五子棋游戏源码
[实例简介] 五子棋onWeb v2008网页版的在线五子棋游戏,打开网页即可游戏,无需下载客户端,界面简单明了,经过测试,在相方网速良好的情况下可以相当流畅的进行游戏 [实例截图] [核心代码] [ ...
java五子棋源代码_java 五子棋游戏源码
[实例简介] [实例截图] [核心代码] package game; import java.applet.Applet; import java.applet.AudioClip; import j ...
python五子棋单机版源代码_python 五子棋游戏源码(python 2.7入门级)
[实例简介] [实例截图] [核心代码] from Tkinter import * from tkMessageBox import * class Game: def __init__(self) ...
HTML5仿五子棋游戏源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
五子棋php源码,五子棋游戏源码（flash+php）
[实例简介] [实例截图] [核心代码] wzq ├── checkName.php ├── db │ ├── apc │ │ └── room │ │ ├── data ...

五子棋游戏源码和核心算法的讲解（简易五子棋web版）

五子棋游戏源码和核心算法的讲解（简易五子棋web版）相关推荐

最新文章

热门文章