Gobang Games: Using JavaScript

Folder creation:

Ui

Image

logo.jsp

yw.jsp

cw.jsp

Js

Script.js

Css

Style.css

Index.html

Index.html

<!    DOCTYPE html>
Script.js
var wins = [];for  (var i = 0; i < 15; ++i)  {     wins[i] = [];    for  (var j = 0; &NBSP;J&NBSP;&LT;&NBSP;15;&NBSP;++J)  {        wins[i][j] =  [];    }}var count = 0;for  (var i = 0; i  < 15; ++i)  {    for  (var j = 0; j  &LT;&NBSP;11;&NBSP;++J)  {        for  (var k = &NBSP;0;&NBSP;K&NBSP;&LT;&NBSP;5;&NBSP;++K)  {             wins[i][j + k][count] = true;        }         count++;    }}//Vertical for  (var i  = 0; i <&nbSp;15; ++i)  {    for  (var j = 0; j < 11; &NBSP;++J)  {        for  (var k = 0; k &NBSP;&LT;&NBSP;5;&NBSP;++K)  {             wins[j + k][i][count] = true;        }         count++;    }}//forward Oblique for  (var i = 0;  i < 11; ++i)  {    for  (var j = 0; j &NBSP;&LT;&NBSP;11;&NBSP;++J)  {        for  (var k  =&NBSP;0;&NBSP;K&NBSP;&LT;&NBSP;5;&NBSP;++K)  {             wins[i + k][j + k][count] = true;         }         count++;    }}//anti-oblique for  (var i =  0; i < 11; ++i)  {    for  (var j = 14 ;  j > 3; --j)  {        for  (var  K&NBSP;=&NBSP;0;&NBSP;K&NBSP;&LT;&NBSP;5;&NBSP;++K)  {             wins[i + k][j - k][count] = true;         }        count++;     }}var over = false;var mywin = [];var compwin = [];for   (var i = 0; i < count; ++i)  {    mywin[i]  = 0;    compwin[i] = 0;} Var chess = document.getelementbyid (' chess '); var context = chess.getcontext (' 2d ');context.strokestyle =  "#BFBFBF"; var logo = new  image ();logo.src =  "images/logo.jpg"; Var yw = new image (); yw.src =   "Images/yw.png"; Var cw = new image ();cw.src =  "Images/cw.png"; var me  = true;var chessBoard = [];for  (var i = 0; i <  15; ++i)  {    chessboard[i] = [];    for   (VAR&NBSP;J&NBSP;=&NBSP;0;&NBSP;J&NBSP;&LT;&NBSP;15;&NBSP;++J)  {         chessboard[i][j] = 0;    }}logo.onload = function   ()  {    context.drawimage (logo, 0, 0, 450, 450);     drawchessboard ();    }var drawchessboard = function  () &NBSP;{&NBSP;&NBSP;&NBSP;&NBSP;FOR&NBSP; (var i = 0; i < 15; ++i)  {         context.moveto (15 + i * 30, 15);         context.lineto (15 + i * 30, 435);         context.stroke ();         context.moveto (15, 15 + &NBSP;I&NBSP;*&NBSP;30);         context.lineto (435, 15 + &NBSP;I&NBSP;*&NBSP;30);         context.stroke ();     }}var oneStep = function  (I, j, me)  {     Context.beginpath ();     context.arc (15 + i * 30, 15 + j &NBSP;*&NBSP;30,&NBSP;13,&NBSP;0,&NBSP;2&NBSP;*&NBSP;MATH.PI);     context.closepath ();     var gradienT = context.createradialgradient (15 + i * 30 + 2, 15 +  j * 30 - 2, 13, 15 + i * 30 + 2, 15 + &NBSP;J&NBSP;*&NBSP;30&NBSP;-&NBSP;2,&NBSP;20);    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 compai = function  ()  {    var myScore = [];     var compscore = [];    var max = 0;    var x =  0, y = 0;    for  (var i = 0; i <  15; ++i)  {        myScore[i] = [];         compScore[i] = [];         for  (VAR&NBSP;J&NBSP;=&NBSP;0;&NBSP;J&NBSP;&LT;&NBSP;15;&NBSP;++J)  {             myScore[i][j] = 0;             compScore[i][j] = 0;         }    }    for  (var i = 0; i  < 15; ++i)  {        for  (var j  = 0; j < 15;&NBSP;++J)  {            if  ( chessboard[i][j] == 0)  {                 for  (k = 0; k < count; ++k)  {                      if  (Wins[i][j][k])  {                         if  (mywin[k] == 1)                              myScore[i][j] += 200;                          else if  (MyWIN[K]&NBSP;==&NBSP;2)                              myscore[i][j] +=  400;                         else if  (mywin[k] == 3)                               myScore[i][j] += 600;                          else if  (mywin[k] == 4)                              myscore[ I][j] += 800;                         if  (compwin[k] == 1)                               compScore[i][j] += 220;                         else if  ( COMPWIN[K]&NBSP;==&NBSP;2)                              compscore[i][j] +=  420;                         else if  (compwin[k] == 3)                               compScore[i][j] += 620;                         else if  (Compwin [k] == 4)                              compscore[i][j] += 820 ;                     }                }                 if  ( Myscore[i][j] > max)  {                     max = myscore[i][j];                     x = i;                     y =  j;                }                 else if  ( Myscore[i][j] == max)  {                     if  (Compscore[i][j] > compscore[x][y])   {                         x = i;                         y = j;                     }                 }                 if  (Compscore[i][j] > max)  {                     max = compScore[i][j];                     x = i;                     y = j;                 }                 else if  (compScore[i][j] ==  Max)  {                     if  (Myscore[i][j] > myscore[x][y])  {                          x = i;                         y = j;                     }                 }             }        }     }  &nbSp; onestep (X, y, false);    chessboard[x][y] = 2;     for  (var k = 0; k < count; ++k)  {         if  (Wins[x][y][k])  {             compWin[k]++;             mywin[k] = 6;//can't win             if   (compwin[k] == 5)  {                 window.alert ("Computer win");                 context.drawimage (cw, 0, 0, 450, 450 );                 over =  true;            }        }     }    if  (!over)  {         me = !me;    }}chess.onclick = function  (e)  {     if  (over)         return;     if  (!me)         return;    var x  = e.offsetx;    var y = e.offsety;    var  i = math.floor (x / 30);     var j = math.floor (y  / 30);    if  (chessboard[i][j] == 0)  {         onestep (I, j, me);                 chessboard[i][j] = 1;        for  (var k &NBSP;=&NBSP;0;&NBSP;K&NBSP;&LT;&NBSP;COUNT;&NBSP;++K)  {             if  (Wins[i][j][k])  {                 myWin[k]++;                 compwin[k] = 6;//can't win                  if  (mywin[k] == 5)  {                      window.alert ("You win");                     context.drawimage (yw, 0, 0, 450, 450);                     over =  true;                }             }         }        if  (!over)  {             me = !me;             compai ();         }    }     }
Style.css
canvas{display:block;margin:50px auto;box-shadow:-2px-2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;}
The results show:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/8A/90/wKioL1g0KzfRyGZhAAKjsHt-8Gc851.png "title=" QQ picture 20161122192500.png "alt=" Wkiol1g0kzfrygzhaakjsht-8gc851.png "/>

This article is from the "Small Stop" blog, please be sure to keep this source http://10541556.blog.51cto.com/10531556/1875554
Gobang Games: Using JavaScript