在html中插入图像对象时Javascript不工作

在html中插入图像对象时Javascript不工作,javascript,Javascript,主要编辑:Re做了很多事情。但同样的错误 var white = 1; var turn = white; var table = document.getElementById("game"); function createTable(table, white) { var i,j,tr; for(i=0;i<8;i++) { tr = document.createElement('tr'); for(j=0;j<8

主要编辑:Re做了很多事情。但同样的错误

var white = 1;
var turn = white;
var table = document.getElementById("game");

function createTable(table, white) {
    var i,j,tr;
    for(i=0;i<8;i++) 
    {
        tr = document.createElement('tr');

        for(j=0;j<8;j++)
            tr.appendChild(document.createElement('td')).id = String.fromCharCode( (white == 1 ? j : 8-j) +97)+(white == 1 ? 8-i : i+1);

        table.appendChild(tr);
    }

    for(i=0;i<8;i++)
    {
        for(j=0;j<8;j++)
        {
            table.rows[i].cells[j].setAttribute("class","cell");
        }
    }
}

function onImageLoad(t) {

    console.log(t);
}

function createImageArray() {
    var w,c,p;
    var image = new Array(2);
    for(w=0;w<2;w++)
    {
        image[w] = new Array(2);
        for(c=0;c<2;c++)
        {
            image[w][c] = new Array(6);
            for(p=0;p<6;p++)
            {
                image[w][c][p] = new Array(2);
            }
        }
    }
    return image;
}

function createBlankimageArray() {
    var blank = new Array(2);
    return blank;
}

function bufferImages(image,blank) {

    var w, c, p, s, word;

    for(w=0;w<2;w++)
    {
        for(c=0;c<2;c++)
        {
            for(p=0;p<6;p++)
            {
                for(s=0;s<2;s++)
                {

                    word = w.toString() + c.toString() + (p+1).toString() + s.toString() + ".png";
                    //console.log(word);
                    image[w][c][p][s] = new Image();
                    image[w][c][p][s].onload = onImageLoad(word);
                    image[w][c][p][s].src='final images/'+ word;

                }
            }
        }
    }

    for(i=0;i<2;i++)
    {
        blank[i] = new Image();
        word = i.toString() + '.png';
        blank[i].onload = onImageLoad(word);
        blank[i].src= 'final images/'+ word;
    }
}

function intializeState() {

    var x,y,temp;
    var state = new Array(8);
    for(y=0;y<8;y++) 
    {
        state[y] = new Array(8);
        for(x=0;x<8;x++) 
        {
            state[y][x] = new Array(3);


            // Set Cell White or Black.
            state[y][x][0] = (x+y)%2;


            if(y==1 || y == 6) 
            {
                temp = 0;
                state[y][x][1] = temp;
                state[y][x][2] = ( white==1 ? 0 : 1);
            }
            else if(x==0 || x==7) {temp = 1;}
            else if(x==1 || x==6) {temp = 2;}
            else if(x==2 || x==5) {temp = 3;}
            else if(x==3) {temp = 4;}
            else if(x==4) {temp = 5;}

            if(temp!=0)
            {
                if(y==0)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 0 : 1);
                }
                else if(y==7)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 1 : 0);
                }
                else
                {   
                    state[y][x][1] = 7;
                    state[y][x][2] = 7;
                }
            }
        }
    }

    return state;
}

function drawState(table,state,image,blank) {

    var y,x;
    //var table = document.getElementById("game");
    var w,c,p;

    for(y=0;y<8;y++)
    {
        for(x=0;x<8;x++)
        {
            c = state[y][x][0];
            w = state[y][x][1];
            p = state[y][x][2];
            if(p!=7)
            {
                table.rows[y].cells[x].appendChild(image[w][c][p][0]);
            }
            else
            {
                table.rows[y].cells[x].appendChild(blank[c]);
            }
        }
    }
}

var state = intializeState();
var image = createImageArray();
var blank = createBlankimageArray();
createTable(table, white);
bufferImages(image,blank);
intializeState(state);
drawState(table,state,image,blank);
这是一行:
table.rows[y].cells[x].appendChild(image[w][c][p][0])

那么我哪里做错了


编辑:jsFiddle.net链接:

initializeState()的定义更改为:

function intializeState() {

    var x,y,temp;
    var state = new Array(8);
    for(y=0;y<8;y++) 
    {
        state[y] = new Array(8);
        for(x=0;x<8;x++) 
        {
            state[y][x] = new Array(3);


            // Set Cell White or Black.
            state[y][x][0] = (x+y)%2;


            if(y==1 || y == 6) 
            {
                temp = 0;
                state[y][x][1] = temp;
                state[y][x][2] = ( white==1 ? 0 : 1);
            }
            else if(x==0 || x==7) {temp = 1;}
            else if(x==1 || x==6) {temp = 2;}
            else if(x==2 || x==5) {temp = 3;}
            else if(x==3) {temp = 4;}
            else if(x==4) {temp = 5;}

            if(temp!=0)
            {
                if(y==0)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 0 : 1);
                }
                else if(y==7)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 1 : 0);
                }
                else
                {   
                    state[y][x][1] = 7;
                    state[y][x][2] = 7;
                }
            }
        }
    }
    return state;
}
问题是名为
state
的参数变量在
initializeState
中隐藏了同名的全局变量


我还建议
状态
数组的元素应该是对象,而不是数组。当元素是统一的时,应该使用数组,但每个子元素都有不同的用途:[0]是单元格颜色,[1]是片段颜色,[2]是片段颜色。

如果提供了jsfiddle.net,这会容易得多…附议Brad的评论:请,这篇文章再现了你的问题。抱歉@alex23刚刚更新了问题。什么是jsfiddle.net?没有名为
state
的全局变量。函数
initializeState
初始化局部变量,而不是全局数组。在initializeState中,状态[y][x][1]设置为大于1的值(temp)。查看createImageArray,“w”应小于2。您可以使用状态[y][x][1]设置“w”值。我不是肯定的,但可能您需要table.rows[y].cells[x].appendChild(image[p][c][w][0]);它仍然不起作用。关于您对状态数组的建议,元素是统一的。对我来说,它们只是图像。游戏逻辑不会在javascript上实现。它位于服务器端。所以,我想让它成为一个数组是非常好的!它们不是图像<代码>//将单元格设置为白色或黑色。状态[y][x][0]=(x+y)%2状态数组就是用来保存状态的。没有任何逻辑会对它们起作用。它就像一个参考,用于绘图功能。顺便说一句,更新了很多你建议的东西。还是类似的错误。看看jsFiddle链接你所拥有的一切都会有用,这只是糟糕的编程风格。任何时候你都可以硬编码索引,比如
c=state[y][x][0]强烈建议您应该使用对象,因此它将变成
c=state[y][x]。这使意图更加明显。+1使我意识到{这使意图更加明显)
Uncaught TypeError: Cannot read property '1' of undefined req_logic.js:154
function intializeState() {

    var x,y,temp;
    var state = new Array(8);
    for(y=0;y<8;y++) 
    {
        state[y] = new Array(8);
        for(x=0;x<8;x++) 
        {
            state[y][x] = new Array(3);


            // Set Cell White or Black.
            state[y][x][0] = (x+y)%2;


            if(y==1 || y == 6) 
            {
                temp = 0;
                state[y][x][1] = temp;
                state[y][x][2] = ( white==1 ? 0 : 1);
            }
            else if(x==0 || x==7) {temp = 1;}
            else if(x==1 || x==6) {temp = 2;}
            else if(x==2 || x==5) {temp = 3;}
            else if(x==3) {temp = 4;}
            else if(x==4) {temp = 5;}

            if(temp!=0)
            {
                if(y==0)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 0 : 1);
                }
                else if(y==7)
                {
                    state[y][x][1] = temp;
                    state[y][x][2] = (white == 1 ? 1 : 0);
                }
                else
                {   
                    state[y][x][1] = 7;
                    state[y][x][2] = 7;
                }
            }
        }
    }
    return state;
}
state = initializeState();