跟着老师敲完代码了，点击棋盘，没出现棋子，出现报错
来源：2-5 落子实现
元文
2016-03-27 00:06
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
麻烦老师帮我看一下。谢谢哈^_^ !!
写回答
关注
6回答
-
- 核心计划
- 2016-03-27 09:23:00
45行，offsetX
-
- qq_Manjusaka_14194554
- 2016-12-06 14:13:24
57 前面的y换成j
-
- 积雪草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
= =。我把你的复制了一遍,结果跟我原来打的一样没图片没棋盘 求解
-
- 慕粉3136530
- 2016-05-06 16:20:42
代码一样，不知道为什么棋盘都没了。。。
-
- 不断的学习者
- 2016-03-31 16:47:30
你这代码怎么上传d 呢？
JS实现人机大战之五子棋（UI篇）
利用js及canvas绘图知识，实现程序界面编写和交互逻辑处理
35696 学习 · 138 问题
相似问题