六子冲棋实验室(php+jquery)在完善中...


六子冲棋,有些地方叫二吃一、六子棋,小时候在农村,地面上或者在一小块石板上简单画一个井字方框,一人找相同颜色相同大小的6个石子,另一个找另一种颜色相同大小的6个石子并可以进入游戏模式,不需要随身携带棋子和棋盘,方便就地取材,即使荒山老林、深沟峡谷都可到处使用,真是无智能手机时代居家旅行、无聊卖萌、打发童年的必备佳品。点击这里亲自运行看看
<font color=green>
<?
define('MAX',4);

if($_POST){
    print_r($_POST);
    echo '<hr>';
}
?>
</font>


<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;}    
.chess0{ margin:0px; padding:0px; border:solid 0px #ccc; height:80px;width:80px; background-image:url('1500km-6-empty-chess.png');}
.chess1{ margin:0px; padding:0px; border:solid 0px #ccc; height:80px;width:80px; background-image:url('1500km-6-black-chess.png');}
.chess2{ margin:0px; padding:0px; border:solid 0px #ccc; height:80px;width:80px; background-image:url('1500km-6-white-chess.png');}
</style>    
<script type="text/javascript" src="http://blog.1500km.com/sites/ui-blog/other/jquery.js"></script>  

<form action="" target="_blank" method="post">
<img src="http://blog.1500km.com/sites/download/images/1500km.png" style="vertical-align:middle;" />六子冲棋实验室



<button type="submit" class="btn">查看棋局数据</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="0" height="350"><tr>
<td valign="top" width="15"><img src="position_6_y.png" style="width:15px;" /></td>
<td valign="top">
<img src="position_6_x.png" />
<div style="width:350px; height:350px;">
<?
//(1)button用于触发clickx()
//(2)x记录x坐标
//(3)y记录y坐标
//(4)chess_value记录白棋、黑棋还是空白
$init = array(
     array(2,2,2,2)
    ,array(2,0,0,2)
    ,array(1,0,0,1)
    ,array(1,1,1,1)
);
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<?=$init[$y][$x]?>" id="<?=$id?>"><input type="hidden" id="x<?=$id?>" value="<?=$x?>"><input type="hidden" id="y<?=$id?>" value="<?=$y?>"><input type="hidden" name="<?=$id?>" id="chess_value<?=$id?>" value="<?=$init[$y][$x]?>"><? 
}
echo '<br>';
}
?>
</div>
</td>
<td valign="top" bgcolor="#f1f1f1"><div id="div_who_will_win" style="width:120px; ">...</div></td>
<td valign="top" bgcolor="#f9f9f9"><div id="show_click_postion" style="width:160px;">...</div></td>
</tr></table>
</form>









<script>
function is_black_chess_win(last_x_line,last_y_line){
    if(1 != get_last_chess_value()){
        return false;
    }
    if(
         '1120'==last_x_line 
    /*|| '1102'==last_x_line*/
      || '0211'==last_x_line 
      || '0112'==last_x_line
      || '2110'==last_x_line 
    /*|| '2011'==last_x_line*/
    
      || '1120'==last_y_line 
    /*|| '1102'==last_y_line*/
      || '0211'==last_y_line 
      || '0112'==last_y_line
      || '2110'==last_y_line 
    /*|| '2011'==last_y_line*/
    ){
        return true;
    }
    return false;
}
function is_white_chess_win(last_x_line,last_y_line){
    if(2 != get_last_chess_value()){
        return false;
    }
    if(
         '2210'==last_x_line 
    /*|| '2201'==last_x_line*/
      || '0122'==last_x_line 
      || '0221'==last_x_line
      || '1220'==last_x_line 
    /*|| '1022'==last_x_line*/
    
      || '2210'==last_y_line 
    /*|| '2201'==last_y_line*/
      || '0122'==last_y_line 
      || '0221'==last_y_line
      || '1220'==last_y_line 
    /*|| '1022'==last_y_line*/
    ){
        return true;
    }
    return false;
}
function get_last_chess_x_line(){
    var x = parseInt(get_last_chess_x());
    var y = parseInt(get_last_chess_y());
    var temp = '';
    temp += check_x(x-3,y);
    temp += check_x(x-2,y);
    temp += check_x(x-1,y);
    temp += check_x(x,y);
    temp += check_x(x+1,y);
    temp += check_x(x+2,y);
    temp += check_x(x+3,y);
    return temp;
}
function get_last_chess_y_line(){
    var x = parseInt(get_last_chess_x());
    var y = parseInt(get_last_chess_y());
    var temp = '';
    temp += check_x(x,y-3);
    temp += check_x(x,y-2);
    temp += check_x(x,y-1);
    temp += check_x(x,y);
    temp += check_x(x,y+1);
    temp += check_x(x,y+2);
    temp += check_x(x,y+3);
    return temp;
}
function check_x(x,y){
        if(false==is_index(x,y)){
                return '';
        }
        var id = x+'_'+y;
        var temp=$('#chess_value'+id).val();
        return temp;
}





var global_last_selected_x = 0;
var global_last_selected_y = 0;
var global_last_selected_value = 0;
function select_a_chess(x,y,value){
    var id = x+'_'+y;
    if(0!=value){
        global_last_selected_x = x;
        global_last_selected_y = y;
        global_last_selected_value = value;
    }
}
function get_last_selected_chess_x(){
    return global_last_selected_x;
}
function get_last_selected_chess_y(){
    return global_last_selected_y;
}
function get_last_selected_chess_value(){
    return global_last_selected_value;
}
function move_a_chess(x,y){
    var last_x = get_last_selected_chess_x();
    var last_y = get_last_selected_chess_y();
    var last_id = last_x+'_'+last_y;
    
    if(is_empty_chess(last_id)){
        return;
    }
    set_empty_chess(last_id);
    alert(x);
    var id = x+'_'+y;
    var temp = get_last_selected_chess_value();
    if(is_black_chess(last_id)){set_black_chess(id);}
    else{set_white_chess(id);}
}
function is_empty_chess(id){var x=$('#'+id).val();if(0 == parseInt(x)){return true;}return false;}
function is_black_chess(id){var x=$('#'+id).val();if(1 == parseInt(x)){return true;}return false;}
function is_white_chess(id){var x=$('#'+id).val();if(2 == parseInt(x)){return true;}return false;}



</script>
    




<script type="text/javascript">
////////////////////////////////////////////////////////////////
//(function(){////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
function MAX_LEN(){return <?=MAX?>;}

var global_row_count = 1;
var global_col_count = 1;



function get_row_count (){return global_row_count;}
function get_col_count (){return global_col_count;}



function increase_row_count (){global_row_count++;}
function increase_col_count (){global_col_count++;}



function row_count_as_one(){global_row_count=1;};
function col_count_as_one(){global_col_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 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-6-empty-chess.png)'});
        $('#chess_value'+id).val(0);//视觉上的棋子变了,对应的元素值也要变
}
function set_black_chess(id){
        $('#'+id).css({'background-image':'url(1500km-6-black-chess.png)'});
        $('#chess_value'+id).val(1);//视觉上的棋子变了,对应的元素值也要变
}
function set_white_chess(id){
        $('#'+id).css({'background-image':'url(1500km-6-white-chess.png)'});
        $('#chess_value'+id).val(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(){

});





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);
        
        var last_chess_value = get_last_chess_value();
        
        row_count_as_one();
        col_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);
        
        info += ('get_row_count='+get_row_count()+'<br>');
        info += ('get_col_count='+get_col_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 += '<hr>';
        info += check_xy(x-1,y);//左1
        info += check_xy(x-2,y);//左2
        info += check_xy(x-3,y);//左3
        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 += '<hr>';
        info += check_xy(x,y-1);//1
        info += check_xy(x,y-2);//2
        info += check_xy(x,y-3);//3
        info += '</div><hr>';
        return info;
}









function check_row_left(id,x,y,last_chess_value){
        var temp = '';
        for(var i=1;i<3;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<3;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<3;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<3;i++){
                temp = $('#chess_value'+x+'_'+(y-i)).val();
                if(last_chess_value != temp){return;}
                increase_col_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>');

        select_a_chess(x,y,chess_value);
        move_a_chess(x,y);
                
        str += 'which_turn_next='+get_which_turn_status()+'<hr>';
        
        str += ('get_last_chess_x_line='+get_last_chess_x_line()+'<br>');
        str += ('get_last_chess_y_line='+get_last_chess_y_line()+'<hr>');
        
        
        str += ('get_last_selected_chess_x='+get_last_selected_chess_x()+'<br>');
        str += ('get_last_selected_chess_y='+get_last_selected_chess_y()+'<br>');
        str += ('get_last_selected_chess_value='+get_last_selected_chess_value()+'<hr>');
        
        $('#show_click_postion').html(str);
        
        {
                var last_chess_x_line = get_last_chess_x_line();
                var last_chess_y_line = get_last_chess_y_line();
                if(is_black_chess_win(last_chess_x_line,last_chess_y_line)){
                    alert('黑棋赢了');
                }
                else if(is_white_chess_win(last_chess_x_line,last_chess_y_line)){
                    alert('白棋赢了');
                }
        }

}
    
</script>





<hr>
<a target="_blank" href="http://www.1500km.com">返回1500km</a> 
| <a target="_blank" href="/sites/ui-blog/?id=26&f=php-jquery-6-zi-chong">查看该六子冲棋源码</a> 
<hr><br><br>  

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