                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS实现人机大战之五子棋（UI篇）

跟着老师敲完代码了，点击棋盘，没出现棋子，出现报错

var chessBoard = [];
var me = true;
for(var i = 0; i<15; i++) {
	chessBoard[i] = [];
	for(var j=0; j<15; j++) {
		chessBoard[i][j] = 0;
	}
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokeStyle= "#BFBFBF";
var logo = new Image();
logo.src = "images/logo.png";
logo.onload = function(){
	context.drawImage(logo, 0,0,450,450);
	drawChessBoard();
}
var drawChessBoard = function(){
for(var i = 0; i < 15 ; i++){
	context.moveTo( 15+30*i, 15);
	context.lineTo(15+30*i, 435);
	context.stroke();
	context.moveTo(15, 15+30*i);
	context.lineTo(435, 15+ 30*i);
	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) {
	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;
	}
}

当我点击棋盘左上角时，报错：Uncaught TypeError: Cannot read property '0' of undefined
点击第二条横线，则报错：Uncaught TypeError: Cannot read property '1' of undefined 
麻烦老师帮我看一下。谢谢哈^_^ !!

元文

2016-03-27

源自：JS实现人机大战之五子棋（UI篇） 2-5

关注问题我要回答

1534

操作

收起

6 回答

核心计划回答被采纳 +3 积分
2016-03-27

45行，offsetX

0 回复有任何疑惑可以回复我~

#1

元文提问者

非常感谢！我太粗心了>_<~

2016-03-27 回复有任何疑惑可以回复我~

qq_Manjusaka_14194554
2016-12-06

57 前面的y换成j

0 回复有任何疑惑可以回复我~

积雪草1
2016-07-27

var chessBoard=[];
var me=true;

for(var i=0;i<15;i++){
	chessBoard[i]=[];
	for(var j=0;j<15;j++){
		chessBoard[i][j]=0;
	}
}

var chess = document.getElementById('chess');
var context = chess.getContext('2d');

context.strokeStyle="#bfbfbf";

var logo=new Image();
logo.src="images/logo.jpg";
logo.onload=function(){
	context.drawImage(logo,0,0,450,450);
	drawChessBoard();

	
}

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) {
	var x=e.offsetX;
	var y=e.offsetY;
	var i=Math.floor(x/30);
	var y=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;
	}
}

//我的调试的时候也没有报错，就是落子点击没反应，路过的大神能帮忙看看吗？

0 回复有任何疑惑可以回复我~

TimzShiver
2016-07-18

= =。我把你的复制了一遍,结果跟我原来打的一样没图片没棋盘求解

0 回复有任何疑惑可以回复我~

慕粉3136530
2016-05-06

代码一样，不知道为什么棋盘都没了。。。

0 回复有任何疑惑可以回复我~

#1

元文提问者

能贴图加代码让大家一起研究研究就更好了

2016-05-07 回复有任何疑惑可以回复我~

不断的学习者
2016-03-31

你这代码怎么上传d 呢？

0 回复有任何疑惑可以回复我~

#1

元文提问者

跟着老师一步一步写的呀，然后粘贴到留言板，选择javascript就可以了呀

2016-04-02 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JS实现人机大战之五子棋（UI篇）

参与学习 35636 人
解答问题 136 个

利用js及canvas绘图知识，实现程序界面编写和交互逻辑处理

本课相似问答

4 回答棋盘格子出不来？

1 回答棋子中小棋子出现的同事大棋子不会消失

5 回答输出不了棋盘

2 回答棋盘格子画不出来

3 回答按照步骤写代码，最后水印没有出现，棋盘也没有了。

搜索更多本课相关问答

跟着老师敲完代码了，点击棋盘，没出现棋子，出现报错

我要回答关注问题

意见反馈帮助中心 APP下载