五子棋实验室(php+jquery简单5子连珠)


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel="shortcut icon" />  
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel=bookmark />  
<title>五子棋实验室(php+jquery)(陆续完善中...)</title>
<style>    
div,body{ font-size:12px; color:#666;}  
hr{ border-bottom:dashed 1px #ccc; border-top:solid 0px #ccc;}    
.btn{ background-color:#339933; color:#FFFFFF; padding:3px;}    
.chess{ margin:0px; padding:0px; border:solid 0px #ccc; height:40px;width:40px; background-image:url('1500km-empty-chess.png');}
</style>    
<script type="text/javascript" src="http://blog.1500km.com/sites/ui-blog/other/jquery.js"></script>  

<img src="http://blog.1500km.com/sites/download/images/1500km.png" style="vertical-align:middle;" />五子棋实验室

<button class="btn" id="fill_rand_chess">随机棋子</button>
<button class="btn" id="fill_white_chess">铺满白棋</button>
<button class="btn" id="fill_black_chess">铺满黑棋</button>
<button class="btn" id="fill_empty_chess">空白黑棋</button>
<span id="div_which_turn">接下来要下黑子<img src="1500km-black-chess.png" style="vertical-align:middle; height:36px; width:36px;"></span>
<hr>






<table border="0" cellpadding="0" cellspacing="9" height="760"><tr>
<td valign="top"><img src="position_y.png" style="width:21px;" /></td>
<td valign="top">
<img src="position_x.png" />
<div style="width:640px; height:640px;">
<?
define('MAX',15);
//(1)button用于触发clickx()
//(2)x记录x坐标
//(3)y记录y坐标
//(4)chess_value记录白棋、黑棋还是空白
for($y=0;$y<MAX;$y++){
for($x=0;$x<MAX;$x++){
$id = ($x.'_'.$y);
?><input type="button" onClick="clickx('<?=$id?>',<?=$x?>,<?=$y?>)" class="chess" id="<?=$id?>"><input type="hidden" id="x<?=$id?>" value="<?=$x?>"><input type="hidden" id="y<?=$id?>" value="<?=$y?>"><input type="hidden" id="chess_value<?=$id?>" value="0"><? 
}
echo '<br>';
}
?>
</div>
</td>
<td valign="top" bgcolor="#f1f1f1"><div id="div_who_will_win" style="width:150px; ">...</div></td>
<td valign="top" bgcolor="#f9f9f9"><div id="show_click_postion" style="width:150px;">...</div></td>
</tr></table>



<script type="text/javascript">
////////////////////////////////////////////////////////////////
//(function(){////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var __________global_row_count = 1;
var __________global_col_count = 1;
var __________global_drop_count = 1;
var __________global_rise_count = 1;

function get_row_count (){return __________global_row_count;}
function get_col_count (){return __________global_col_count;}
function get_drop_count(){return __________global_drop_count;}
function get_rise_count(){return __________global_rise_count;}

function increase_row_count (){__________global_row_count++;}
function increase_col_count (){__________global_col_count++;}
function increase_drop_count(){__________global_drop_count++;}
function increase_rise_count(){__________global_rise_count++;}

function row_count_as_one(){__________global_row_count=1;};
function col_count_as_one(){__________global_col_count=1;};
function drop_count_as_one(){__________global_drop_count=1;};
function rise_count_as_one(){__________global_rise_count=1;};




//last chess是最后落下的那个棋子
var __________global_last_chess_x=0;
var __________global_last_chess_y=0;
var __________global_last_chess_value=0;

function get_last_chess_x(){return __________global_last_chess_x;}
function get_last_chess_y(){return __________global_last_chess_y;}
function get_last_chess_value(){return __________global_last_chess_value;}

function set_last_chess_x(x){__________global_last_chess_x=x;}
function set_last_chess_y(y){__________global_last_chess_y=y;}
function set_last_chess_as_black(){__________global_last_chess_value=1;}
function set_last_chess_as_white(){__________global_last_chess_value=2;}





var __________global_which_turn = 2;//现在状态是白子,所以接下来要下黑子
function set_black_turn(){__________global_which_turn = 1;}
function set_white_turn(){__________global_which_turn = 2;}
function is_black_turn(){return (1==__________global_which_turn);}
function is_white_turn(){return (2==__________global_which_turn);}
function get_which_turn_status(){return __________global_which_turn;}


function MAX_LEN(){return 15;}


function rand(Min,Max){
        var Range = Max - Min;
        var Rand = Math.random();
        return(Min + Math.round(Rand * Range));
}

function init_all_chess(chess_value){
        var a=0,b=0,id='';
        for(a=0;a<MAX_LEN();a++){
                for(b=0;b<MAX_LEN();b++){
                        id = a+'_'+b;
                        $('#chess_value'+id).val(chess_value);//视觉上的棋子变了,对应的元素值也要变
                }
        }
}





function set_empty_chess(id){
        $('#'+id).css({'background-image':'url(1500km-empty-chess.png)'});
        $('#chess_value'+id).val(0);//视觉上的棋子变了,对应的元素值也要变
}
function set_black_chess(id){
        $('#'+id).css({'background-image':'url(1500km-black-chess-with-line.png)'});
        $('#chess_value'+id).val(1);//视觉上的棋子变了,对应的元素值也要变
}
function set_white_chess(id){
        $('#'+id).css({'background-image':'url(1500km-white-chess-with-line.png)'});
        $('#chess_value'+id).val(2);//视觉上的棋子变了,对应的元素值也要变
}





function set_all_chess_as_empty(){
        $('.chess').css({'background-image':'url(1500km-empty-chess.png)'});
        init_all_chess(0);
}
function set_all_chess_as_black(){
        $('.chess').css({'background-image':'url(1500km-black-chess-with-line.png)'});
        init_all_chess(1);
}
function set_all_chess_as_white(){
        $('.chess').css({'background-image':'url(1500km-white-chess-with-line.png)'});
        init_all_chess(2);
}





function show_which_turn(id){
        if(is_black_turn()){
                set_black_chess(id);
                $('#div_which_turn').html('接下来要下白子<img src="1500km-white-chess.png" style="vertical-align:middle;">');
        }
        else{
                set_white_chess(id);
                $('#div_which_turn').html('接下来要下黑子<img src="1500km-black-chess.png" style="vertical-align:middle;">');
        }
}





$(document).ready(function(){
        $('#fill_empty_chess').click(function(){
                set_all_chess_as_empty();
        });
        $('#fill_black_chess').click(function(){
                set_all_chess_as_black();
        });
        $('#fill_white_chess').click(function(){
                set_all_chess_as_white();
        });
        $('#fill_rand_chess').click(function(){
                var a=0,b=0,id='',r=0;
                for(a=0;a<MAX_LEN();a++){
                        for(b=0;b<MAX_LEN();b++){
                                r = rand(0,2);
                                id = a+'_'+b;
                                switch(r){
                                        case 0:set_empty_chess(id);break;
                                        case 1:set_black_chess(id);break;
                                        default:set_white_chess(id);break;
                                }
                        }
                }
        });
});





function judge_who_is_win(id,x,y){
        var info = '';
        x = parseInt(x);
        y = parseInt(y);

        {
                info += '<div style="color:blue;"><b>last chess<br>';
                info += check_xy(x,y);//当前
                info += '</b></div><hr>';
        }
        
        info += row_info(x,y);
        info += col_info(x,y);
        info += rise_info(x,y);
        info += drop_info(x,y);
        
        
        var last_chess_value = get_last_chess_value();
        
        row_count_as_one();
        col_count_as_one();
        rise_count_as_one();
        drop_count_as_one();
        
        check_row_left(id,x,y,last_chess_value);
        check_row_right(id,x,y,last_chess_value);
        
        check_col_left(id,x,y,last_chess_value);
        check_col_right(id,x,y,last_chess_value);
        
        check_rise_left(id,x,y,last_chess_value);
        check_rise_right(id,x,y,last_chess_value);
        
        check_drop_left(id,x,y,last_chess_value);
        check_drop_right(id,x,y,last_chess_value);
                
        info += ('get_row_count='+get_row_count()+'<br>');
        info += ('get_col_count='+get_col_count()+'<br>');
        info += ('get_drop_count='+get_drop_count()+'<br>');
        info += ('get_rise_count='+get_rise_count()+'<br>');
        $('#div_who_will_win').html(info);
}






//水平方向////////////////////////////
function row_info(x,y){
        info = '';
        info += '<div style="color:green;">水平方向<br>';
        info += check_xy(x+1,y);//右1
        info += check_xy(x+2,y);//右2
        info += check_xy(x+3,y);//右3
        info += check_xy(x+4,y);//右4
        info += '<hr>';
        info += check_xy(x-1,y);//左1
        info += check_xy(x-2,y);//左2
        info += check_xy(x-3,y);//左3
        info += check_xy(x-4,y);//左4
        info += '</div><hr>';
        return info;
}
//垂直方向////////////////////////////
function col_info(x,y){
        info = '';
        info += '<div style="color:red;">垂直方向<br>';
        info += check_xy(x,y+1);//1
        info += check_xy(x,y+2);//2
        info += check_xy(x,y+3);//3
        info += check_xy(x,y+4);//4
        info += '<hr>';
        info += check_xy(x,y-1);//1
        info += check_xy(x,y-2);//2
        info += check_xy(x,y-3);//3
        info += check_xy(x,y-4);//4
        info += '</div><hr>';
        return info;
}

//左上右下////////////////////////////
function drop_info(x,y){
        info = '';
        info += '<div style="color:green;">左上右下<br>';
        info += check_xy(x+1,y+1);//1
        info += check_xy(x+2,y+2);//2
        info += check_xy(x+3,y+3);//3
        info += check_xy(x+4,y+4);//4
        info += '<hr>';
        info += check_xy(x-1,y-1);//1
        info += check_xy(x-2,y-2);//2
        info += check_xy(x-3,y-3);//3
        info += check_xy(x-4,y-4);//4
        info += '</div><hr>';
        return info;
}

//左下右上////////////////////////////
function rise_info(x,y){
        info = '';
        info += '<div style="color:red;">左下右上<br>';
        info += check_xy(x+1,y-1);//1
        info += check_xy(x+2,y-2);//2
        info += check_xy(x+3,y-3);//3
        info += check_xy(x+4,y-4);//4
        info += '<hr>';
        info += check_xy(x-1,y+1);//1
        info += check_xy(x-2,y+2);//2
        info += check_xy(x-3,y+3);//3
        info += check_xy(x-4,y+4);//4
        info += '</div><hr>';
        return info;
}





function check_row_left(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x+i)+'_'+y).val();
                if(last_chess_value != temp){return;}
                increase_row_count();
        }
}
function check_row_right(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x-i)+'_'+y).val();
                if(last_chess_value != temp){return;}
                increase_row_count();
        }
}

        

function check_col_left(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+x+'_'+(y+i)).val();
                if(last_chess_value != temp){return;}
                increase_col_count();
        }
}
function check_col_right(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+x+'_'+(y-i)).val();
                if(last_chess_value != temp){return;}
                increase_col_count();
        }
}



function check_rise_left(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x+i)+'_'+(y+i)).val();
                if(last_chess_value != temp){return;}
                increase_rise_count();
        }
}
function check_rise_right(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x-i)+'_'+(y-i)).val();
                if(last_chess_value != temp){return;}
                increase_rise_count();
        }
}




function check_drop_left(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x+i)+'_'+(y-i)).val();
                if(last_chess_value != temp){return;}
                increase_drop_count();
        }
}
function check_drop_right(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<5;i++){
                temp = $('#chess_value'+(x-i)+'_'+(y+i)).val();
                if(last_chess_value != temp){return;}
                increase_drop_count();
        }
}





function check_xy(x,y){
        if(false==is_index(x,y)){
                return '';
        }
        var id = x+'_'+y;
        var temp=$('#chess_value'+id).val();
        return '['+x+']'
               +'['+y+']='
               +temp+'<br>';
}
function is_index(x,y){
        var len = MAX_LEN();
                if(x<0 || x>=len || y<0 || y>=len){
                return false;
        }
        return true;
}

////////////////////////////////////////////////////////////////
//})();///////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////









function clickx(id,x,y){
        var x = $('#x'+id).val();
        var y = $('#y'+id).val();
        var chess_value = $('#chess_value'+id).val();
        var str = '';
        if(0==chess_value){//空白位置才可以下子
                if(is_black_turn()){
                                                set_last_chess_as_white();
                        set_white_turn();
                }
                else{
                                                set_last_chess_as_black();
                        set_black_turn();
                }
                
                                set_last_chess_x(x);
                                set_last_chess_y(y);
                show_which_turn(id);
                                judge_who_is_win(id,x,y);
        }
                str += ('last_chess_x='+get_last_chess_x()+'<br>');
                str += ('last_chess_y='+get_last_chess_y()+'<br>');
                str += ('last_chess_value='+get_last_chess_value()+'<hr>');
                
        str += ('this_chess_x='+x+'<br>');
        str += ('this_chess_y='+y+'<br>');
                str += ('this_chess_value='+chess_value+'<hr>');
                
                str += 'which_turn_next='+get_which_turn_status()+'<hr>';
        $('#show_click_postion').html(str);
        
        if(get_row_count()>4 || get_col_count()>4 || get_drop_count()>4 || get_rise_count()>4){
                if(is_black_turn()){alert('黑棋赢了');}
                else{alert('白棋赢了');}
        }

}

</script>

<hr><br><br>  
<a target="_blank" href="http://www.1500km.com">返回1500km</a> 

运行结果如下图,点击这里亲自运行看看