简单canvas五子棋

var YFTools = {
            $:function(id)
            {
                return document.getElementById(id);    
            },
            
            addHandler:function(element,type,handler)
            {
                if (element.addEventListener)
                {
                    element.addEventListener(type, handler, false);
                }
                else if(element.attachEvent)
                {
                    element.attachEvent('on'+type, handler)
                }
                else
                {
                    element['on'+type] = handler;
                }
            },
            
            removeHandler:function(element, type, handler)
            {
                if (element.removeEventListener)
                {
                    element.removeEventListener(type, handler, false);
                }
                else if(element.detachEvent)
                {
                    element.detachEvent('on'+type, handler);
                }
                else
                {
                    element['on'+type] = null;    
                }
            },
            
            getEvent:function(event)
            {
                return event || window.event;    
            },
            
            getTarget:function(event)
            {
                return event.target || event.srcEvent;
            },
            
            getRelatedTarget:function(event)
            {
                return event.relatedTarget || 
                        event.stoElement || 
                        fromElement || 
                        null;
            },
            
            getMouseX:function(event)
            {
                var event = this.getEvent(event);
                var pageX = event.pageX;
                
                    if(pageX===undefined)
                    {
                        pageX = event.clientX + (document.body.scrollLeft || 
                                                 document.documentElement.scrollLeft);
                    }
                
                    return pageX;
            },
            
            getMouseY:function(e)
            {
                var event = this.getEvent(e)
                var pageY = event.pageY;
                
                    if(pageY===undefined)
                    {
                        pageY = event.clientY + (document.body.scrollTop || 
                                                 document.documentElement.scrollTop);
                    }
                
                    return pageY;
            }
        }
        
    var BindAsEventListener = function(object, fun) 
        {
            return function(event) 
            {
                return fun.call(object, (event || window.event));
            }
        }
        
    function WUZI(id)
    {
        this.isBlack     =  true;
        this.canvas      =  YFTools.$(id);
        this.context     =  this.canvas.getContext('2d');
        this.arrayChess  =  [];
        this.canPlay     =  true;
    }
    
    WUZI.prototype = {
            constructor:WUZI,
            init:function(event)
            {
                for (var i=0;i<=15;i++)
                {
                    this.arrayChess[i] = [];
                    
                    for (var j=0;j<=15;j++)
                    {
                        this.arrayChess[i][j] = 0;
                    }
                }
                
                this.drawBoard();
                YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess))
            },
            
            // 画棋盘网格
            drawBoard:function()
            {
            
                    var context = this.context;
                        this.context.strokeStyle = "#1d1409";
                        this.context.lineWidth = 1;
                    
                    for (var i=0;i<15;i++)
                    {
                        this.context.beginPath();
                        this.context.moveTo(24,i*35+24);
                        this.context.lineTo(15*35-11,i*35+24);
                        this.context.closePath();
                        this.context.stroke();
                        
                    }
                    
                    for (var j=0;j<15;j++)
                    {
                        this.context.beginPath();
                        this.context.moveTo(j*35+24,24);
                        this.context.lineTo(j*35+24,15*35-11);
                        this.context.closePath();
                        this.context.stroke();
                        
                    }

            },
            
            /*画棋子*/
            drawChess:function(event)
            {
                
                if (this.canPlay)
                {
                    var context = this.context;
                        
                    var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft;
                                    
                    var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop;
                                    
                    var tempX = Math.floor(pageX/35);
                        tempX = tempX >= 15 ? 14 : tempX;
                        
                    var tempY = Math.floor(pageY/35);
                        tempY = tempY >= 15 ? 14 : tempY;
                        
                    var x = tempX*35+24;
                    var y = tempY*35+24;
                    
                    //console.log("横向第"+x+" 纵向第"+y)
                    if (this.arrayChess[tempX][tempY]==0)
                    {
                        
                        this.isBlack ? context.fillStyle = "#000000" :
                                        context.fillStyle = "#ffffff";
                                        
                        context.beginPath();      
                        context.moveTo(x,y);
                        context.arc(x,y,15,0,2*Math.PI,false);
                        context.fill();
                        context.closePath(); 
                            
                        if (this.isBlack)
                        {
                            this.arrayChess[tempX][tempY]=1;
                            this.isBlack = false;
                        }
                        else
                        {
                            this.arrayChess[tempX][tempY]=2;    
                            this.isBlack = true;
                        }
                        
                        var tempFlag = this.checkWin(tempX,tempY);
                        
                        if (tempFlag)
                        {
                            this.canPlay = false;
                            if (this.isBlack)
                            {
                                alert('游戏结束,白方获胜！');
                            }
                            else
                            {
                                alert('游戏结束,黑方获胜！');
                            }
                            
                        }
                    }
                }
            },
            
            checkWin:function(x,y)
            {
                var flag = false,
                    color = this.arrayChess[x][y],
                    count = 1,
                        i = 1;
                    //console.log("X:"+(x)+" Y:"+(y))
                    // 横向判断
                    while(color == this.arrayChess[x+i][y+0])
                    {
                        count++;
                            i++;
                    };
                    
                    i = 1;
                    
                    while(color == this.arrayChess[x-i][y-0])
                    {
                        count++;
                            i++;
                    };
                    
                    
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 纵向判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+0][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-0][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 右上左下判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+i][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-i][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 左上右下判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+i][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-i][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    return flag;
            }
        }
    
    window.onload = function()
    {
        var w = new WUZI('mycanvas');
            w.init();
    }    

把上面代码加入到head,以html5格式声明DOCTYPE

如果是ie8以下浏览器，可以在网上找到这两个文件：

html5.js 和 excanvas.compiled.js

<!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

下面是完整代码：

<!DOCTYPE html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
<meta charset="gb2312" />
<title>简单五子棋</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body,td,th {
    font-size: 12px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align:center;
}
canvas{display:block;background:url(images/bg.jpg);margin:20px auto;width:537px;cursor:pointer;}
</style>
<script>
    
    var YFTools = {
            $:function(id)
            {
                return document.getElementById(id);    
            },
            
            addHandler:function(element,type,handler)
            {
                if (element.addEventListener)
                {
                    element.addEventListener(type, handler, false);
                }
                else if(element.attachEvent)
                {
                    element.attachEvent('on'+type, handler)
                }
                else
                {
                    element['on'+type] = handler;
                }
            },
            
            removeHandler:function(element, type, handler)
            {
                if (element.removeEventListener)
                {
                    element.removeEventListener(type, handler, false);
                }
                else if(element.detachEvent)
                {
                    element.detachEvent('on'+type, handler);
                }
                else
                {
                    element['on'+type] = null;    
                }
            },
            
            getEvent:function(event)
            {
                return event || window.event;    
            },
            
            getTarget:function(event)
            {
                return event.target || event.srcEvent;
            },
            
            getRelatedTarget:function(event)
            {
                return event.relatedTarget || 
                        event.stoElement || 
                        fromElement || 
                        null;
            },
            
            getMouseX:function(event)
            {
                var event = this.getEvent(event);
                var pageX = event.pageX;
                
                    if(pageX===undefined)
                    {
                        pageX = event.clientX + (document.body.scrollLeft || 
                                                 document.documentElement.scrollLeft);
                    }
                
                    return pageX;
            },
            
            getMouseY:function(e)
            {
                var event = this.getEvent(e)
                var pageY = event.pageY;
                
                    if(pageY===undefined)
                    {
                        pageY = event.clientY + (document.body.scrollTop || 
                                                 document.documentElement.scrollTop);
                    }
                
                    return pageY;
            }
        }
        
    var BindAsEventListener = function(object, fun) 
        {
            return function(event) 
            {
                return fun.call(object, (event || window.event));
            }
        }
        
    function WUZI(id)
    {
        this.isBlack     =  true;
        this.canvas      =  YFTools.$(id);
        this.context     =  this.canvas.getContext('2d');
        this.arrayChess  =  [];
        this.canPlay     =  true;
    }
    
    WUZI.prototype = {
            constructor:WUZI,
            init:function(event)
            {
                for (var i=0;i<=15;i++)
                {
                    this.arrayChess[i] = [];
                    
                    for (var j=0;j<=15;j++)
                    {
                        this.arrayChess[i][j] = 0;
                    }
                }
                
                this.drawBoard();
                YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess))
            },
            
            // 画棋盘网格
            drawBoard:function()
            {
            
                    var context = this.context;
                        this.context.strokeStyle = "#1d1409";
                        this.context.lineWidth = 1;
                    
                    for (var i=0;i<15;i++)
                    {
                        this.context.beginPath();
                        this.context.moveTo(24,i*35+24);
                        this.context.lineTo(15*35-11,i*35+24);
                        this.context.closePath();
                        this.context.stroke();
                        
                    }
                    
                    for (var j=0;j<15;j++)
                    {
                        this.context.beginPath();
                        this.context.moveTo(j*35+24,24);
                        this.context.lineTo(j*35+24,15*35-11);
                        this.context.closePath();
                        this.context.stroke();
                        
                    }

            },
            
            /*画棋子*/
            drawChess:function(event)
            {
                
                if (this.canPlay)
                {
                    var context = this.context;
                        
                    var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft;
                                    
                    var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop;
                                    
                    var tempX = Math.floor(pageX/35);
                        tempX = tempX >= 15 ? 14 : tempX;
                        
                    var tempY = Math.floor(pageY/35);
                        tempY = tempY >= 15 ? 14 : tempY;
                        
                    var x = tempX*35+24;
                    var y = tempY*35+24;
                    
                    //console.log("横向第"+x+" 纵向第"+y)
                    if (this.arrayChess[tempX][tempY]==0)
                    {
                        
                        this.isBlack ? context.fillStyle = "#000000" :
                                        context.fillStyle = "#ffffff";
                                        
                        context.beginPath();      
                        context.moveTo(x,y);
                        context.arc(x,y,15,0,2*Math.PI,false);
                        context.fill();
                        context.closePath(); 
                            
                        if (this.isBlack)
                        {
                            this.arrayChess[tempX][tempY]=1;
                            this.isBlack = false;
                        }
                        else
                        {
                            this.arrayChess[tempX][tempY]=2;    
                            this.isBlack = true;
                        }
                        
                        var tempFlag = this.checkWin(tempX,tempY);
                        
                        if (tempFlag)
                        {
                            this.canPlay = false;
                            if (this.isBlack)
                            {
                                alert('游戏结束,白方获胜！');
                            }
                            else
                            {
                                alert('游戏结束,黑方获胜！');
                            }
                            
                        }
                    }
                }
            },
            
            checkWin:function(x,y)
            {
                var flag = false,
                    color = this.arrayChess[x][y],
                    count = 1,
                        i = 1;
                    //console.log("X:"+(x)+" Y:"+(y))
                    // 横向判断
                    while(color == this.arrayChess[x+i][y+0])
                    {
                        count++;
                            i++;
                    };
                    
                    i = 1;
                    
                    while(color == this.arrayChess[x-i][y-0])
                    {
                        count++;
                            i++;
                    };
                    
                    
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 纵向判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+0][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-0][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 右上左下判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+i][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-i][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    // 左上右下判断
                    count = 1;
                        i = 1;
                    while (color == this.arrayChess[x+i][y-i])
                    {
                        count++;
                            i++;
                    }
                    
                    i = 1;
                    while (color == this.arrayChess[x-i][y+i])
                    {
                        count++;
                            i++;
                    }
                    
                    if (count >= 5)
                    {
                        flag = true;
                    }
                    
                    return flag;
            }
        }
    
    window.onload = function()
    {
        var w = new WUZI('mycanvas');
            w.init();
    }    
</script>
</head>

<body>
<canvas id="mycanvas" width="537" height="537"></canvas>
</body>
</html>