五子棋

来源：互联网发布：下载视频编辑软件编辑：程序博客网时间：2024/04/30 15:35
五子棋的html:<!doctype html><html lang="en"><head><meta charset="utf-8"><title>五子棋</title><link rel="stylesheet" type="text/css" href="game.css"></head><body><canvas id="chess" width="450px;" height="450px;"></canvas><script src="game.js" type="text/javascript" charset="utf-8"></script></body></html>相关CSS:canvas{display: block;margin:50px auto;box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;}主要的脚本（原生JS）：var chessBoard=[];var me=true;var over= false;//赢法数组var wins=[];//赢法的统计数组var myWin=[];var computerWin=[];//用来判断是否落到同一处地方和黑白判断for(var i=0;i<15;i++){chessBoard[i]=[];for(var j=0;j<15;j++){chessBoard[i][j]=0;}}//赢法数组for(var i=0;i<15;i++){wins[i]=[];for(var j=0;j<15;j++){wins[i][j]=[];}}var count=0;for(var i=0;i<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;i<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;i<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;i<11;i++){for(var j=14;j>3;j--){//棋盘上连起来就是一条反斜线for(var k=0;k<5;k++){wins[i+k][j-k][count]=true;}count++;}}for(var i=0;i<count;i++){myWin[i]=0;computerWin[i]=0;}var chess=document.getElementById("chess");var context=chess.getContext('2d');context.strokeStyle="#BFBFBF";//水印var logo=new Image();logo.src="111.jpg";logo.onload=function(){// context.drawImage(logo,0,0,450,450);drawChessBoard();//fill用来填充的，stroke用来描边的}var drawChessBoard=function(){//画棋盘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();}}var oneStep=function(i,j,me){//画圆context.beginPath();//开始画圆context.arc(15+i*30,15+j*30,13,0,2*Math.PI);context.closePath();//结束画圆//黑点渐变的效果var gradient=context.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");}context.fillStyle=gradient;context.fill();}//点击事件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=0;k<count;k++){if(wins[i][j][k]){myWin[k]++;computerWin[k]=6;//异常情况if(myWin[k]==5){alert("黑子赢了!");over=true;}}}if(!over){me=!me;computerAI();}}}//AI函数var computerAI=function(){var myScore=[];var computerScore=[];var max=0;var u=0,v=0;for(var i=0;i<15;i++){myScore[i]=[];computerScore[i]=[];for(var j=0;j<15;j++){myScore[i][j]=0;computerScore[i][j]=0;}}for(var i=0;i<15;i++){for(var j=0;j<15;j++){if(chessBoard[i][j]==0){for(var k=0;k<count;k++){if(wins[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]+=20020;}}}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;}}}}}oneStep(u,v,false);chessBoard[u][v]=2;for(var k=0;k<count;k++){if(wins[u][v][k]){computerWin[k]++;myWin[k]=6;//异常情况if(computerWin[k]==5){alert("计算机赢了!");over=true;}}}if(!over){me=!me;}}
0 0