javascript - 怎么样在井字棋游戏中把文本替换成图片？-PHP中文網路問答

之前看到Jasin Yip写的井字棋游戏的相关代码，打算在原基础上增加一些内容。初步打算是增加界面的UI，平局判定，以及不可以在同一个空格上进行多次单击更改等功能。页面修改后的页面是下面这样的。

html.css代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>

<title>black-white chess game</title>
<link rel="stylesheet"  href="http://cdn.bootcss.com/meyer-reset/2.0/reset.css">
<style>
.player1{
 float:left;
 margin-top:160px;
 margin-left:50px;

}

.container{
    width:550px;
    height:550px;
    border:1px solid #ba7f3a;
    position:absolute;
    margin-left:400px;
    margin-top:100px;
    background:url("cookies.gif") no-repeat;
    float:left;
    
}
.cells{
    width:150px;
    height:150px;
    border-right:30px solid transparent;
    border-bottom:30px solid transparent;
    -webkit-border-image:url("cheess2.gif") 30 30 round;
    -o-border-image:url("cheess2.gif") 30 30 round;
    border-image:url("cheess2.gif") 30 30 round;
    float:left;
    top:24px;
    left:25px;
    position:relative;
}

#cell-0-2,#cell-1-2,#cell-2-2{

 border-right:0;

}
#cell-2-0,#cell-2-1,#cell-2-2{

 border-bottom:0;

}
#cell-0-0,#cell-0-1,#cell-0-2{

 border-top:0;

}
#cell-0-0,#cell-1-0,#cell-2-0{

 border-left:0;

}

.player2{

float:right;
margin-top:160px;
 margin-right:50px;

}
.player{

width:300px;
height:auto;

}
img+img{

display:block;
width:100px;
height:auto;
padding-left:80px;
padding-top:50px;

}
h1>img{

width:200px;
padding-top:50px;

}
.image{

width:140px;
height:auto;
margin:5px;

}

</style>

</head>
<body>

<p class="player1">
    <img src="player1.gif" class="player" />
    <img src="o.gif" id="o" />
    <h1><img src="win.gif" /><b id="player1"></b></h1>
</p>
 <p class="container">
    <a href="javascript:;" class="cells" id="cell-0-0"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-0-1"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-0-2"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-1-0"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-1-1"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-1-2"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-2-0"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-2-1"><img src="cheess2.jpg" class="image" /></a>
    <a href="javascript:;" class="cells" id="cell-2-2"><img src="cheess2.jpg" class="image" /></a>
</p>
<p class="player2">
    <img src="player2.gif" class="player" />
    <img src="x.gif" id="x"/>
    <h1><img src="win.gif" /><b id="player2"></b></h1>
</p>
<script src="cgame.js"></script>

</body>
</html>
目的是希望当鼠标单击各个奶酪方块时，对应的图片变成左边player1或者player2的饼干图片。但是，js代码在原基础上只更改了一点点，运行出来就不对。并且图片点击后出现下面所示的图片：

跳出的提示框上面写的是：
Javascript [objectHTMLImageElement]wins!而且对应空格上面的图片并没有更改。
js代码我只改了一点点如下，麻烦大家帮我看一下，半天没发现具体哪里错了。
var TICK = document.getElementById("o");
var CROSS = document.getElementById("x");

var model = [];
var cells = [];

var flag; // 用于表示轮到谁了

var newGame = function(){

for (i=0; i<3; i++)
    for (j=0; j<3; j++){
        model[i][j] = 0;
        cells[i][j].getElementsByTagName("img").src= ' ';
    }
flag = 1;

}

var freshView = function(){

var i, j;

for (i=0; i<3; i++)
    for (j=0; j<3; j++)
        if (model[i][j] == 1)
            cells[i][j].getElementsByTagName("img").src= CROSS.getAttribute("src");
        else if (model[i][j] == 2)
            cells[i][j].getElementsByTagName("img").src = TICK.getAttribute("src");

}

var checkWin = function(x, y){

// 检查 X 方向
if (model[x][y] != 0 && model[0][y] == model[1][y] && model[0][y] == model[2][y])
    return 1;

// 检查 Y 方向
if (model[x][y] != 0 && model[x][0] == model[x][1] && model[x][0] == model[x][2])
    return 1;

// 如果在 \ 方向
if (x == y)
    // 检查 \ 方向
    if (model[0][0] != 0 && model[0][0] == model[1][1] && model[0][0] == model[2][2])
        return 1;

// 如果在 / 方向
if ( ( x == 2 && y == 0 ) || ( x == 0 && y == 2 ) || ( x == 1 && y == 1 ) ) 
    // 检查 / 方向
    if (model[2][0] != 0 && model[2][0] == model[1][1] && model[2][0] == model[0][2])
        return 1;

return 0;

}

window.onload = function(){

var i, j;

// 初始化二维数组
for (i=0; i<3; i++){
    model[i] = [];
    cells[i] = [];
}

for (i=0; i<3; i++)
    for (j=0; j<3; j++){
        cells[j][i] = document.getElementById('cell-' + i + '-' + j);

        (function(j,i){
            cells[i][j].onclick = function(){
                model[i][j] = flag + 1;

                if (flag)
                    flag = 0;
                else
                    flag = 1;

                freshView();

                if (checkWin(i, j)){
                    if (flag)
                        alert(document.getElementById("x") + " wins!");
                    else
                        alert(document.getElementById("o") + " wins!");
                    newGame();
                }
                
            }
        })(i, j);

    }

newGame();

}