?<script>

? ? var chess=document.getElementById("canvas");

? ? var cxt=chess.getContext('2d');

? ? ? var me=true;

? ? ? var gameover=false;

? ? ? var count=0;

? ? ? //落子不重疊設置初始化

? ? ? var chessBoard=[];

? ? ? for(var i=0;i<15;i++){

? ? ? chessBoard[i]=[];

? ? ? for(var j=0;j<15;j++){

? ? ? ? chessBoard[i][j]=0;

? ? ? }

}

//贏法數(shù)組定義及初始化

var wins=[];

for(var i=0;i<15;i++){

? wins[i]=[];

? for(var j=0;j<15;j++){

? ? wins[i][j]=[];}

}

//橫線贏法

for(var i=0;j<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;j<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;j<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;j<11;i++){

? for(var j=14;j>3;j--){

? ? for(var k=0;k<5;k++){

? ? ? wins[i+k][j-k][count]=true;

? ? }

? ? count++;

? }

}

//贏法的統(tǒng)計數(shù)組及初始化

var myWin=[];

var computerWin=[];

for(var i=0;i<count;i++){

? myWin[i]=0;

? computerWin[i]=0;

}

? ? cxt.strokeStyle="#BFBFBF";

? ? chessboard();

? ? ??

? ? ? //獲取位置

? ? ? chess.onclick=function (e){

? ? ? ? if(gameover){

? ? ? ? ? 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);

? ? ? ? ? if(me){

? ? ? ? ? ? chessBoard[i][j]=1;

? ? ? ? ? }

? ? ? ? ? else{

? ? ? ? ? ? chessBoard[i][j]=2;

? ? ? ? ? } ?me=!me;

? ? ? ? ? for(var k=0;k<count;k++){

? ? ? ? ? ? if(wins[i][j][k]){

? ? ? ? ? ? ? myWin[k]++;

? ? ? ? ? ? ? computerWin[k]=6;

? ? ? ? ? ? ? if(myWin[k]==5){

? ? ? ? ? ? ? ? window.alert('hello');

? ? ? ? ? ? ? ? gameover=true;

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? ??

? ? ? ? }

? ? ? }

? ? ? //繪制棋盤

? ? function chessboard(){

? ? for(var i=0;i<15;i++)

? ? {

? ? cxt.moveTo(15+i*30,15);

? ? cxt.lineTo(15+i*30,435);

? ? cxt.stroke();

? ? cxt.moveTo(15,15+i*30);

? ? cxt.lineTo(435,15+i*30);

? ? cxt.stroke();

? ? }

? ? }

? ? //每一步棋子的位置及顏色繪制

? ? ? ? ? function oneStep(i,j,me){

? ? ? ? ? cxt.beginPath();

? ? ? ? ? ? //棋子大小及位置

? ? ? ? ? cxt.arc(15+i*30,15+j*30,13,0,2*Math.PI);

? ? ? ? ? cxt.closePath();

? ? ? ? ? ? //顏色徑向漸變

? ? ? ? ? var gradient=cxt.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");

? ? ? ? ? }

? ? ? ? ?

? ? ? ? ? cxt.fillStyle=gradient;

? ? ? ? ? cxt.fill();

? ? ? ? ? }

? ? </script>