之前看到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>
<div class="player1">
<img src="player1.gif" class="player" />
<img src="o.gif" id="o" />
<h1><img src="win.gif" /><b id="player1"></b></h1>
</div>
<div 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>
</div>
<div class="player2">
<img src="player2.gif" class="player" />
<img src="x.gif" id="x"/>
<h1><img src="win.gif" /><b id="player2"></b></h1>
</div>
<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();
}