跟着视频打了一个AI的五子棋,在电脑上怎么也跑不起来,谁能帮着看一下,帮改一下并且说明一下错误原因

weixin_40980353 2018-05-23 02:26:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
display: block;
margin: 20px auto;
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}
</style>

</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<script>
var me=true;

var over =false;
var chessBoard=[];//定义一个二维数组 存储棋盘颜色
var chess=document.getElementById("chess");//取得画布
var context=chess.getContext("2d"); //取得2d画布
var logo=new Image();
var count=0; //赢法种类索引
var wins=[]; //赢法数组

var myWin=[]; //赢法统计数组 (人)
var computerWin=[]; //(电脑)


for(var i=0;i<15;i++){ //赢法数组建立
wins[i]=[];
for (var j=0;j<15;j++){
wins[i][j]=[];
}
}
console.log(wins);


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++){ //所有横线的赢法
for (j=0;j<11;j++){
//wins[0][0][0]=true
//wins[0][1][0]=true
//wins[0][2][0]=true
//wins[0][3][0]=true
//wins[0][4][0]=true

//wins[0][1][1]=true
//wins[0][2][1]=true
//wins[0][3][1]=true
//wins[0][4][1]=true
//wins[0][5][1]=true
for (var k=0;k<5;k++){
wins[i][j+k][count]=true;
}
count++;
}
}
for(var i=0;i<15;i++){ //所有竖线赢法
for (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 (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 (j=14;j>3;j--){
for (var k=0;k<5;k++){
wins[i+k][j-k][count]=true;
}
count++;
}
}
console.log(count);

for (var i=0;i<count;i++){ //初始化赢法统计数组
myWin[i]=0;
computerWin[i]=0;
}




context.strokeStyle="#7A7877"; //设置线条颜色
logo.src="../风景图片/五子棋盘水印图片.jpg";
logo.onload=function () {
context.drawImage(logo,0,0,450,450);
drawChessBoard();
};
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();
};


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();//描边
}
};

chess.onclick=function (ev) {
if (over){
return;
}
if (!me){
return;
}
var x=ev.offsetX;
var y=ev.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){
window.alert("你赢了");
over=true;
}
}
}
if(!over){
me = !me;
computerAI();
}
}
};
var computerAI=function () {
var myScore=[];
var computerScore=[];
var max=0; //定义最高分
var u=0,v=0; //保存分数最高点坐标
for (var i=0;i<15;i++){
myScore=[];
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;i<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]+=200;
} 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=myScore[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){
window.alert("计算机赢了");
over=true;
}
}
}
if(!over){
me = !me;
}
}

</script>

</body>
</html>
...全文
783 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_40980353 2018-10-03
  • 打赏
  • 举报
回复
收到了 谢谢大哥
文盲老顾 2018-05-23
  • 打赏
  • 举报
回复
var computerAI=function () {
    var myScore=[];
    var computerScore=[];
    var max=0;                //定义最高分
    var u=0,v=0;                      //保存分数最高点坐标
    for (var i=0;i<15;i++){
        myScore[i]=[];       // 原代码为 myScore=[];
        computerScore[i]=[];
        for (var j=0;j<15;j++){ // 原代码为 for (var j=0;i<15;j++){
            myScore[i][j]=0;
            computerScore[i][j]=0;
        }
    }
    for (var i=0;i<15;i++){
        for (var j=0;j<15;j++){
细心再细心
文盲老顾 2018-05-23
  • 打赏
  • 举报
回复
myScore=[]; 这个错误可以通过浏览器报错找到,报错提示内容为 myScore[i][j] 无法为null赋值0,原因是myScore[i]未定义 for 循环那个错误,可以在for循环里加个console.log(循环变量名),这样就能直观看到循环变量是否正确

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧