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

源自：2-5 落子实现

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

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 00:06

个回答

核心计划

2016-03-27 09:23:00

已采纳

45行，offsetX

0
qq_Manjusaka_14194554

2016-12-06 14:13:24

57 前面的y换成j

0

积雪草1: 2016-07-27 23:59:10

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;
	}
}

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

TimzShiver

2016-07-18 18:28:12

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

0
慕粉3136530

2016-05-06 16:20:42

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

0
不断的学习者

2016-03-31 16:47:30

你这代码怎么上传d 呢？

0