为什么我不加算法，程序就没有问题，加入算法之后，整个界面就没了
RicardoM
2016-10-21 18:36
就是这样，整个界面都没有了
3回答
-
- Elle4
- 2017-04-16 13:17:31
因为三维数组初始化的时候没有初始化二维，在第一个for下加一句wins[i] = [];
-
- _details
- 2016-10-22 20:07:09
//做了一点点修改
var over=false; //游戏结束标志
var role=true; // true--黑棋 ，false--白棋，默认玩家先手
var boardInfo=[]; //记录落子信息
for(var i=0;i<15;i++){
boardInfo[i]=[];
for(var j=0;j<15;j++){
boardInfo[i][j]=0;
}
}
/*
赢法数组及其初始化
*/
var wins=[];
var counts=0; //记录赢法的总数
for(var i=0;i<15;i++){
wins[i]=[];
for(var j=0;j<15;j++){
wins[i][j]=[];
}
}
//垂直连成五子
for(var i=0;i<15;i++){
for(var j=0;j<=10;j++){
for(var k=0;k<5;k++){
wins[i][j+k][counts]=true;
}
counts++;
}
}
//水平连成五子
for(var i=0;i<=10;i++){
for(var j=0;j<15;j++){
for(var k=0;k<5;k++){
wins[i+k][j][counts]=true;
}
counts++;
}
}
//斜成五子
for(var i=0;i<=10;i++){
for(var j=0;j<=10;j++){
for(var k=0;k<5;k++){
wins[i+k][j+k][counts]=true;
}
counts++;
}
}
//反斜成五子
for(var i=0;i<=10;i++){
for(var j=4;j<15;j++){
for(var k=0;k<5;k++){
wins[i+k][j-k][counts]=true;
}
counts++;
}
}
//统计
var myWin=[];
var computerWin=[];
for(var i=0;i<counts;i++){
myWin[i]=0;
computerWin[i]=0;
}
var board=document.getElementById("board");
var context=board.getContext("2d");
//背景图
/*
var logo=new Image();
logo.src="images/logo.png";
//图片加载完后再画棋盘
logo.onload=function(){
context.drawImage(logo,0,0,450,450);
drawBoard();
}
*/
//画棋盘
var drawBoard=function(){
context.strokeStyle="#bfbfbf";
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,role){
context.beginPath();
context.arc(15+30*i,15+30*j,13,0,Math.PI*2);
context.closePath();
var gradient=context.createRadialGradient(15+30*i+2,15+30*j-2,13,15+30*i+2,15+30*j-2,0);
if(role){
gradient.addColorStop(0,"#0a0a0a");
gradient.addColorStop(1,"#636766");
}
else{
gradient.addColorStop(0,"#d1d1d1");
gradient.addColorStop(1,"#f9f9f9");
}
context.fillStyle=gradient;
context.fill();
}
//轮流落子
board.onclick=function(e){
if(over){
return;
}
if(!role){
return;
}
var x=e.offsetX;
var y=e.offsetY;
var i=Math.floor(x/30);
var j=Math.floor(y/30);
if(boardInfo[i][j]==0){
oneStep(i,j,role);
boardInfo[i][j]=1; //1代表玩家
}
for(var k=0;k<counts;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
}
if(myWin[k]==5){
document.getElementById("result").innerHTML="你赢了";
over=true;
}
}
if(!over){
role=!role;
computerAI();
}
}
var computerAI=function(){
var offensiveScore=[]; //进攻得分
var deffensiveScore=[]; //防守得分
var u=0,v=0;
var max=0;
for(var i=0;i<15;i++){
offensiveScore[i]=[];
deffensiveScore[i]=[];
for(var j=0;j<15;j++){
offensiveScore[i][j]=0;
deffensiveScore[i][j]=0;
}
}
//遍历棋盘
for(var i=0;i<15;i++){
for(var j=0;j<15;j++){
if(boardInfo[i][j]==0){
for(var k=0;k<counts;k++){
if(wins[i][j][k]){
if(myWin[k]==1){
deffensiveScore[i][j]+=1;
}
if(myWin[k]==2){
deffensiveScore[i][j]+=10;
}
if(myWin[k]==3){
deffensiveScore[i][j]+=100;
}
if(myWin[k]==4){
deffensiveScore[i][j]+=1000;
}
}
if(wins[i][j][k]){
if(computerWin[k]==1){
offensiveScore[i][j]+=2;
}
if(computerWin[k]==2){
offensiveScore[i][j]+=20;
}
if(computerWin[k]==3){
offensiveScore[i][j]+=200;
}
if(computerWin[k]==4){
offensiveScore[i][j]+=2000;
}
}
}
//比较各个点的价值
if(deffensiveScore[i][j]>max){
max=deffensiveScore[i][j];
u=i;
v=j;
}
else if(deffensiveScore[i][j]==max){
if(offensiveScore[i][j]>offensiveScore[u][v]){
max=deffensiveScore[i][j];
u=i;
v=j;
}
}
if(offensiveScore[i][j]>max){
max=offensiveScore[i][j];
u=i;
v=j;
}
else if(offensiveScore[i][j]==max){
if(deffensiveScore[i][j]>deffensiveScore[u][v]){
max=offensiveScore[i][j];
u=i;
v=j;
}
}
}
}
}
oneStep(u,v,false);
boardInfo[u][v]=2; //2代表计算机
for(var k=0;k<counts;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
}
if(computerWin[k]==5){
document.getElementById("result").innerHTML="你输了";
over=true;
}
}
if(!over){
role=!role;
}
}
drawBoard();
-
- RicardoM
- 2016-10-21 18:37:26
应该是算法吧界面的代码覆盖了，谁能发个正确的代码看看？
JS实现人机大战之五子棋（AI篇）
43272 学习 · 112 问题
相似问题