A simple Gobang is implemented using a simple algorithm:
CSS code:
*{margin:0;padding:0}
img{
margin-left:20px;
height:630px;
width:1300px;
Position:absolute;
}
canvas{
Display:block;
Margin:auto;
Box-shadow: -2px-2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
Background: #886600;
position:relative;
top:50px;
}
HTML code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Man-Machine edition Gobang </title>
<body>
<canvas id= "Canvas" width= "height=" 580 "></canvas>
</body>
JS Code:
var balls=[];
var cl=true;
var Over=false;
for (Var i=0;i<25;i++) {
Balls[i]=[];
for (Var j=0;j<25;j++) {
balls[i][j]=0;
}
}
Win-method Array
var winer=[];
for (Var i=0;i<25;i++) {
Winer[i]=[];
for (Var j=0;j<19;j++) {
Winer[i][j]=[];
}
}
var count=0;
Horizontal line all win law
for (Var i=0;i<25;i++) {
for (j=0;j<15;j++) {
for (Var k=0;k<5;k++) {
Winer[i][j+k][count]=true;
}
count++;
}
}
Vertical Bar all win law
for (Var i=0;i<19;i++) {
for (Var j=0;j<21;j++) {
for (Var k=0;k<5;k++) {
Winer[j+k][i][count]=true;
}
count++;
}
}
Slash all Win method
for (Var i=0;i<21;i++) {
for (Var j=0;j<15;j++) {
for (Var k=0;k<5;k++) {
Winer[i+k][j+k][count]=true;
}
count++;
}
}
Anti-Slash all win method
for (Var i=0;i<21;i++) {
for (Var j=18;j>3;j--) {
for (Var k=0;k<5;k++) {
Winer[i+k][j-k][count]=true;
}
count++;
}
}
Console.log (count);
Statistics array of winning methods
var mywin=[];
var computerwin=[];
for (Var i=0;i<count;i++) {
mywin[i]=0;
computerwin[i]=0;
}
Window.onload=function () {
var Canvas=document.getelementbyid (' canvas ');
var context=canvas.getcontext (' 2d ');
Context.strokestyle= "#B9B9B9";
for (var i = 0; I <=; i++) {
Context.moveto (15,15+I*30);
Context.lineto (735,15+I*30);
Context.stroke ();
Context.moveto (15+i*30,15);
Context.lineto (15+i*30,555)
}
Canvas.onclick=function (event) {
if (over) {
Return
}
if (cl!=true) {
Return
}
var x=event.offsetx;
var y=event.offsety;
var i=math.floor (X/30);
var j=math.floor (Y/30);
if (balls[i][j]==0) {
Draw (I,J,CL);
Balls[i][j]=1;
for (Var k=0;k<count;k++) {
if (Winer[i][j][k]) {
mywin[k]++;
computerwin[k]=6;
if (mywin[k]==5) {
Window.alert (' you won ');
Over=true;
}
}
}
if (!over) {
CL=!CL;
Computerai ();
}
}
}
}
function Computerai () {
var max=0;
var u=0,v=0;
var myscore=[];
var computerscore=[];
for (Var i=0;i<25;i++) {
Myscore[i]=[];
Computerscore[i]=[];
for (Var j=0;j<19;j++) {
myscore[i][j]=0;
computerscore[i][j]=0;
}
}
for (Var i=0;i<25;i++) {
for (Var j=0;j<19;j++) {
if (balls[i][j]==0) {
for (Var k=0;k<count;k++) {
if (Winer[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;
}
}
}
}
}
Draw (U,v,false);
balls[u][v]=2;
for (Var k=0;k<count;k++) {
if (Winer[u][v][k]) {
computerwin[k]++;
mywin[k]=6;
if (computerwin[k]==5) {
Window.alert (' computer wins ');
Over=true;
}
}
}
if (!over) {
Cl=true;
}
}
function Draw (I,J,CL) {
var Canvas=document.getelementbyid (' canvas ');
var context=canvas.getcontext (' 2d ');
Context.beginpath ();
Context.arc (15+I*30,15+J*30,10,0,2*MATH.PI);
Context.closepath ();
var gradient=context.createradialgradient (15+i*30,15+j*30,10,15+i*30,15+j*30,1);//Implement Color gradient function
if (CL) {
Gradient.addcolorstop (0, "#0A0A0A");
Gradient.addcolorstop (1, "#636766");
}else{
Gradient.addcolorstop (0, "#D1D1D1");
Gradient.addcolorstop (1, "#F9F9F9");
}
Context.fillstyle=gradient;
Context.fill ();
}
Man-Machine Gobang