用SVG写的数独小游戏

 

本来想以文件链接的方式上传,但不知为什么超链接上传总是有问题,但图像可以上传,只能这样了,可以将源码拷贝到

一个SVG文件,然后用IE等支持SVG VIEWER的浏览器打开.

SVG沉寂了几年,现在有卷土重来的感觉.

改进了一下界面，将鼠标输入改为键盘输入。

 2006-10-24 针对FIREFOX1.5 修改

< svg  xmlns = " http://www.w3.org/2000/svg "  onload = " initialize(evt) "   >  
< title > SUDOKU </ title >
< desc >
      A little sudoku game. Demonstrate SVG including event process (mouse and keyboard),
      dynamic SVG element create and change by JavaScript.
</ desc >

< script type = " text/javascript " >
<! [CDATA[
     var  svgns  =   " http://www.w3.org/2000/svg " ;
     var  selectedRect  =   null ;  // Current selected rect
        
     var  DIMENSION  =   9 ;
     var  RECT_H  =   46 ;
     var  RECT_W  =   46 ;
     var  RECT_INTERVAL  =   50 ;
    
     var  INTERVAL_LINE_OFFSET  =   2 ;
     var  INTERVAL_LINE_STROKE_WIDTH  =   3 ;
    
     var  ORIGINAL_X  =   50 ;
     var  ORIGINAL_Y  =   50 ;
    
     var  RECT_NAME  =   " R " ;
     var  TEXT_NAME  =   " T " ;
    
     var  UNFINISHED  =   - 1 ;
     var  FAIL  =   0 ;
     var  SUCCESS  =   1 ;
    
     var  RECT_ORG_COLOR  =   " moccasin " ;
     var  RECT_MOUSE_OVER_COLOR  =   " sandybrown " ;
     var  RECT_SELECTED_COLOR  =   " green " ;
    
     var  TEXT_FIXED_COLOR  =   " saddlebrown " ;
     var  TEXT_ORG_COLOR  =   " saddlebrown " ;
     var  TEXT_SELECTED_COLOR  =   " red " ;
    
     var  a  =   new  Array();
    
     /**/ /*
    //A little difficult one
    a[0] = [0,6,0,3,0,4,7,0,0];
    a[1] = [0,0,5,0,0,6,4,1,0];
    a[2] = [9,0,0,0,5,0,0,0,3];
    a[3] = [0,0,0,0,0,0,9,3,0];
    a[4] = [1,0,0,0,3,0,8,0,0];
    a[5] = [0,7,2,6,0,0,0,0,0];
    a[6] = [0,0,0,4,0,7,0,0,0];
    a[7] = [4,0,0,0,0,3,0,0,1];
    a[8] = [0,2,3,0,0,0,0,8,0];
    
    //answer    
    a[0] = [5,4,9, 1,7,3, 8,6,2];
    a[1] = [3,6,7, 2,5,8, 1,9,4];
    a[2] = [2,8,1, 9,4,6, 7,5,3];
    
    a[3] = [4,2,8, 3,9,7, 6,1,5];
    a[4] = [9,1,6, 4,2,5, 3,7,8];
    a[5] = [7,5,3, 6,8,1, 2,4,9];
    
    a[6] = [1,3,4, 8,6,9, 5,2,7];
    a[7] = [8,9,5, 7,1,2, 4,3,6];
    a[8] = [6,7,2, 5,3,4, 9,8,1];
    
    */
        a[ 0 ]  =  [ 5 , 0 , 0 , 0 , 0 , 0 , 8 , 0 , 2 ];
    a[ 1 ]  =  [ 0 , 0 , 7 , 0 , 5 , 8 , 0 , 0 , 4 ];
    a[ 2 ]  =  [ 2 , 0 , 1 , 0 , 0 , 0 , 7 , 5 , 3 ];
    a[ 3 ]  =  [ 0 , 0 , 0 , 3 , 9 , 0 , 0 , 0 , 0 ];
    a[ 4 ]  =  [ 9 , 1 , 6 , 4 , 0 , 5 , 3 , 7 , 8 ];
    a[ 5 ]  =  [ 0 , 0 , 0 , 0 , 8 , 1 , 0 , 0 , 0 ];
    a[ 6 ]  =  [ 1 , 3 , 4 , 0 , 0 , 0 , 5 , 0 , 7 ];
    a[ 7 ]  =  [ 8 , 0 , 0 , 7 , 1 , 0 , 4 , 0 , 0 ];
    a[ 8 ]  =  [ 6 , 0 , 2 , 0 , 0 , 0 , 0 , 0 , 1 ];
                
     // Document and root
     var  svgDocument  =   null ;
         var  svgRoot  =   null ;

     // Initialize canvas
     function  initialize(evt) 
     ... {
        svgDocument = evt.target.ownerDocument;
             svgRoot = svgDocument.documentElement;
             
        var mainElem = svgDocument.getElementById("main");
        svgRoot.addEventListener("keypress", tape, false); //We must add keypress here to support FF1.5 

        //Show date time
        yy_datetime();
        
        //Create rects and text
        for (var row = 0; row<DIMENSION; row++)
        ...{
            for (var col = 0; col<DIMENSION; col++)
            ...{
                //Create rect dynamically
                var rect = svgDocument.createElementNS(svgns, "rect");
                
                rect.setAttributeNS(null, "id", RECT_NAME + row + col);
                rect.setAttributeNS(null, "x", ORIGINAL_X + col*RECT_INTERVAL);
                rect.setAttributeNS(null, "y", ORIGINAL_Y + row*RECT_INTERVAL);
                rect.setAttributeNS(null, "width", RECT_W);
                rect.setAttributeNS(null, "height", RECT_H);
                rect.setAttributeNS(null, "fill", RECT_ORG_COLOR);
                
                if( a[row][col] == 0) //Accept user input
                ...{
                    //Add event
                    rect.addEventListener("click", clickRect, false);
                    rect.addEventListener("mouseover", changeColor, false);
                    rect.addEventListener("mouseout", changeColor, false);
                }
                
                //Add to doc
                mainElem.appendChild(rect);
                
                //Create text dynamically, get value from array       
                var text = svgDocument.createElementNS(svgns, "text");
                                
                text.setAttributeNS(null, "id", TEXT_NAME + row + col);
                text.setAttributeNS(null, "x", ORIGINAL_X + col*RECT_INTERVAL + 20);
                text.setAttributeNS(null, "y", ORIGINAL_Y + row*RECT_INTERVAL + 30);
                
                var myData;
                
                if( a[row][col] > 0) //Fixed
                ...{
                    text.setAttributeNS(null, "font-size", "22pt");
                    text.setAttributeNS(null, "stroke", TEXT_FIXED_COLOR);
                    
                    myData = svgDocument.createTextNode( a[row][col] );
                }
                else //Accept user change
                ...{
                    text.setAttributeNS(null, "font-size", "20pt");
                    text.setAttributeNS(null, "stroke", TEXT_ORG_COLOR);
                    text.setAttributeNS(null, "point-events", "none");
                    
                    myData = svgDocument.createTextNode("");
                }
                
                //Add text node
                text.appendChild(myData);
                
                //Add to doc                
                mainElem.appendChild(text);
            }
        }
        
        //Add horizontal seperate line
        for(var k = 3; k < 9; k = k + 3)
        ...{
            var line = svgDocument.createElementNS(svgns, "line");
                
            line.setAttributeNS(null, "x1", ORIGINAL_X);
            line.setAttributeNS(null, "y1", ORIGINAL_Y + k*RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "x2", ORIGINAL_X + DIMENSION * RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "y2", ORIGINAL_Y + k*RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "stroke", "brown");
            line.setAttributeNS(null, "stroke-width", INTERVAL_LINE_STROKE_WIDTH);
            
            //Add to doc
            svgDocument.documentElement.appendChild(line);
        }
        
        //Add vertical seperate line
        for(var k = 3; k < 9; k = k + 3)
        ...{
            var line = svgDocument.createElementNS(svgns, "line");
                
            line.setAttributeNS(null, "x1", ORIGINAL_X + k*RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "y1", ORIGINAL_Y );
            line.setAttributeNS(null, "x2", ORIGINAL_X + k*RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "y2", ORIGINAL_Y + DIMENSION*RECT_INTERVAL - INTERVAL_LINE_OFFSET );
            line.setAttributeNS(null, "stroke", "brown");
            line.setAttributeNS(null, "stroke-width", INTERVAL_LINE_STROKE_WIDTH);
            
            //Add to doc
            svgDocument.documentElement.appendChild(line);
        }
    }

function  changeColor(evt)
... {
    var overRect = evt.target;
    var type = evt.type;
    
    if(type == "mouseover")
        overRect.setAttributeNS(null, "fill", RECT_MOUSE_OVER_COLOR);
    else if(type == "mouseout")
        overRect.setAttributeNS(null, "fill", RECT_ORG_COLOR);
}

function  commit(evt)
... {    
    setColorBack();
    
    var ret = isTarget();
    
    if( ret == UNFINISHED )
    ...{
        alert("unfinished");
    }
    else if( ret == FAIL )
    ...{
        alert("error");
    }
    else
        alert("success");
}
    
function  isTarget()
... {
    //Check whether player finished
    for (var i = 0; i < DIMENSION; i++)
    ...{
        for (var j = 0; j < DIMENSION; j++)
        ...{
            if(a [i][j] == 0)
                return UNFINISHED; //continue;
        }
    }
    
    //Check row
    for (var i = 0; i < DIMENSION; i++)
    ...{
        var temp = [0,0,0,0,0,0,0,0,0];
        for (var j = 0; j < DIMENSION; j++)
        ...{
            temp[ a[i][j]-1 ] = 1;
        }
        
        for(var k = 0; k < DIMENSION; k++)
        ...{
            if(temp[k] != 1)
                return FAIL;
        }
    }
    
    //Check col
    for (var i = 0; i < DIMENSION; i++)
    ...{
        var temp = [0,0,0,0,0,0,0,0,0];
        for (var j = 0; j < DIMENSION; j++)
        ...{
            temp[ a[j][i]-1 ] = 1;
        }
        
        for(var k = 0; k < DIMENSION; k++)
        ...{
            if(temp[k] != 1)
                return FAIL;
        }
    }
    
    //Check block
    for(var bx = 0; bx < 3; bx++)
    ...{
        for(var by = 0; by < 3; by++)
        ...{
            var temp = [0,0,0,0,0,0,0,0,0];
            for(var i = bx * 3; i < bx * 3 + 3; i++)
            ...{
                for(var j = by * 3; j < by * 3 + 3; j++)
                ...{
                    //alert(bx + "," + by + "," + i + "," + j + "," + a[i][j]);
                    temp[ a[i][j]-1 ] = 1;
                }
            }
            
            for(var k = 0; k < DIMENSION; k++)
            ...{
                if(temp[k] != 1)
                    return FAIL;
            }
        }
    }
    
    return SUCCESS; //Success
}

function  tape(evt)
... {    
    if(selectedRect == null)
        return;
        
    key = evt.charCode;
    //alert(key);
    
    //Get corresponding text object by ID
    var id = selectedRect.getAttributeNS(null,"id").substr(1,2);
    var row = parseInt( id.substr(0,1) );
    var col = parseInt( id.substr(1,1) );
    
    var selectedText = svgDocument.getElementById(TEXT_NAME + id);
    
    if ( key == 32 ) //"SPACE" key to delete
    ...{
        selectedText.firstChild.data = "";
        a[row][col] = 0;
    }
    else if( key > 48 && key <=57 )
    ...{
        var char = String.fromCharCode(key);
        selectedText.firstChild.data = char;
        
        a[row][col] = parseInt(char);
    }
}

function  setColorBack()
... {
    if(selectedRect != null)
    ...{
        selectedRect.setAttributeNS(null, "stroke", "none");
        var id = selectedRect.getAttributeNS(null,"id").substr(1,2);
                
        //Get corresponding text object by ID
        var selectedText = svgDocument.getElementById(TEXT_NAME + id);
        
        //Change color to indicate user
        if(selectedText != null)
        ...{
            selectedText.setAttributeNS(null, "stroke", TEXT_ORG_COLOR);
        
        }
        
        selectedRect = null;
    }
}
        
function  clickRect(evt) 
... {
    setColorBack();
        
    //Get new target and target id
    selectedRect = evt.target;
    var id = selectedRect.getAttributeNS(null,"id").substr(1,2);
        
    //Get corresponding text object by ID
    var selectedText = svgDocument.getElementById(TEXT_NAME + id);
    
    //Change color to indicate user
    if(selectedText != null)
    ...{
        selectedText.setAttributeNS(null, "stroke", TEXT_SELECTED_COLOR);
    
    }

    selectedRect.setAttributeNS(null, "stroke", RECT_SELECTED_COLOR);
}

function  yy_datetime()
... {
    var text;
    text = svgDocument.getElementById("updateTime");
        
    var datetime,temp,date,time;
    datetime = new Date().toLocaleString();
    
    temp = datetime.lastIndexOf(" ");
    date = datetime.substring(0,temp);
    time = datetime.substring(temp+1,datetime.length);
    
    text.firstChild.data = "Update time: " + date + " " + time;
    
    setTimeout("yy_datetime()",1000);
}     

//  ]]>
</ script >

< filter id = " dropShadow "  filterUnits = " userSpaceOnUse "  x = " 0 "  y = " 0 "  width = " 400 "  height = " 200 " >
     < feOffset  in = " SourceAlpha "  dx = " 5 "  dy = " 5 "  result = " offset " />
     < feGaussianBlur  in = " offset "  stdDeviation = " 5 "  result = " blur " />
     < feMerge >
         < feMergeNode  in = " blur " />
         < feMergeNode  in = " SourceGraphic " />
     </ feMerge >  
</ filter >

< text filter = " url(#dropShadow) "  x = " 200 "  y = " 30 "  
        font - size = " 30 "  font - family = " Monotype Corsiva "  fill = " yellow "  stroke = " red "   >
        SUDOKU
</ text >

< rect  x = " 0 "  y = " 0 "  width = " 600 "  height = " 550 "  fill = " none "  stroke = " black "  stroke - width = " 5 "   />
< g id = " main " ></ g >

< ellipse onclick = " commit(evt) "  cx = " 558 "  cy = " 505 "  rx = " 40 "  ry = " 20 "  fill = " thistle "  stroke = " black "  stroke - width = " 3 " />
< text onmouseout = " changeColor(evt) "  onmouseover = " changeColor(evt) "  onclick = " commit(evt) "  x = " 533 "  y = " 510 "  style = " font-size:20 "  fill = " peru "   > commit </ text >

< text id = " updateTime "  x = " 200 "  y = " 520 "  style = " font-size:10 "  fill = " peru "   >   </ text >

</ svg >