自製html五子棋

標籤：log   win   問題   指令碼   橫線   技術分享   pen   ott   朋友   

花了一個早上寫的五子棋，好久不寫前端都有些生疏了，有啥好的建議可以反饋給我，謝謝哈。

話不多說，開始介紹。

一，主要三部分

　　　樣式代碼　

<style>        *{            margin:0px;            padding: 0px;        }        #box{            width:600px;            height:600px;            border:1px solid;            margin:0px;        }        .line{            border:1px solid;            border-top:0px;            border-left:0px;            border-right:0px;            width:600px;            position:absolute;        }        .shu{            border:1px solid;            border-top:0px;            border-bottom:0px;            border-right:0px;            height:600px;            position:absolute;        }        .qi{            border:1px solid;            width:25px;            height: 25px;            border-radius: 45px;            position: absolute;        }    </style>

           body層代碼

　

<div id="box">    </div>

 js指令碼代碼

<script text="text/javascript" src="jquery.min.js"></script>

<script text="text/javascript">        var k=0;        var j = 0;        var q = 0;        var red_array =new Array();        var blue_array =new Array();        for(var i=1;i<20;i++){//構造棋盤            var num = 30*i;            var line_dom = "<div class=‘line‘ style=‘top:"+num+"px‘></div>"                var shu_dom = "<div class=‘shu‘ style=‘left:"+num+"px‘></div>"            $("#box").append(line_dom);            $("#box").append(shu_dom);        }        $("#box").click(function(e){            var positionX=e.pageX-$(this).offset().left; //擷取當前滑鼠相對img的X座標            var positionY=e.pageY-$(this).offset().top; //擷取當前滑鼠相對img的Y座標                        var real_x = Math.round(positionX/30)*30-12.5;//計算實際旗子中心落點位置            var real_y = Math.round(positionY/30)*30-12.5;//計算實際旗子中心落點位置            if(k%2==0){            var dom_color = ‘red‘;            var is_not = $.inArray(real_x+","+real_y, blue_array);//判斷點是否重複                if(is_not == -1){                    winer(red_array,real_x,real_y);//判斷此時點擊後該點周圍是否有五子                    red_array[j]= real_x+","+real_y;                    console.log(red_array);                    j++;                }            }else{            var dom_color= ‘blue‘;            var is_not = $.inArray(real_x+","+real_y, red_array);//判斷點是否重複                if(is_not == -1){                    winer(blue_array,real_x,real_y);//判斷此時點擊後該點周圍是否有五子                    blue_array[q]= real_x+","+real_y;                    q++;                }            }            if(is_not == -1){                var qi_dom = "<div class=‘qi‘ style=‘left: "+real_x+";top: "+real_y+";background-color:"+dom_color+";‘></div>";//添加棋元素            $("#box").append(qi_dom);            k++;            }                    })        function winer(winer_array,real_x,real_y){//判斷輸贏規則            //橫向判別                var o = 0;                for(var w=1;w<5;w++){                    var new_x =real_x+30*w;                    var click_result = $.inArray(new_x+","+real_y, winer_array);//判斷點是否存在                    if(click_result ==-1){                        break;                    }else{                        o++;                    }                }            for(var w=1;w<5;w++){                var new_x =real_x-30*w;                var click_result = $.inArray(new_x+","+real_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    o++;                }            }            if(o>=4){                if(k%2==0){                    alert("紅方勝");                }else{                    alert("藍方勝");                }            }            //縱向            var l = 0;            for(var w=1;w<5;w++){                var new_y =real_y+30*w;                var click_result = $.inArray(real_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    l++;                }            }            for(var w=1;w<5;w++){                var new_y =real_y-30*w;                var click_result = $.inArray(real_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    l++;                }            }            if(l>=4){                if(k%2==0){                    alert("紅方勝");                }else{                    alert("藍方勝");                }            }            //斜線(正斜線反斜線)            //正斜杆            var m = 0;            for(var w=1;w<5;w++){                var new_x =real_x-30*w;                var new_y =real_y+30*w;                var click_result = $.inArray(new_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    m++;                }            }            for(var w=1;w<5;w++){                var new_x =real_x+30*w;                var new_y =real_y-30*w;                var click_result = $.inArray(new_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    m++;                }            }            if(m>=4){                if(k%2==0){                    alert("紅方勝");                }else{                    alert("藍方勝");                }            }            //反斜杆            var n = 0;            for(var w=1;w<5;w++){                var new_x =real_x+30*w;                var new_y =real_y+30*w;                var click_result = $.inArray(new_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    n++;                }            }            for(var w=1;w<5;w++){                var new_x =real_x-30*w;                var new_y =real_y-30*w;                var click_result = $.inArray(new_x+","+new_y, winer_array);//判斷點是否存在                if(click_result ==-1){                    break;                }else{                    n++;                }            }            if(n>=4){                if(k%2==0){                    alert("紅方勝");                }else{                    alert("藍方勝");                }            }        }    </script>

 

下面說下主要的思路，你需要做一個五子棋的小遊戲，那麼這個遊戲裡麵包括的對象就有棋盤，棋子(紅，藍)，規則。

一，需要構造一個棋盤

　　1，構造棋盤的方法就是用html+css完成，我寫的都放在js中產生，方法多種多樣，可以隨自己的喜好寫。

　　2，棋盤構造完之後，需要想的一個問題是棋子落點和顯示，我採用的是滑鼠點擊時擷取當前座標（那麼這裡就有一個問題，滑鼠點擊只有一個點，而且是隨便點的不一定在兩條線的焦點怎麼辦，我的解決辦法是當滑鼠點擊一個位置時，我通過演算法判定這個座標是在離最近一個以焦點為圓心的棋子大小有限範圍內，那麼這次點擊事件最終顯示的棋子就會顯示在這個距離最近焦點上），然後顯示在棋盤上

 

　　3，就是判定雙方獲勝的規則，五子棋獲勝的方式無非四種，以橫線五子，縱線五子，正斜線五子，反斜線五子，那麼知道了這四種情況就可以針對每一種獲勝方式進行判定，具體的方法如上代碼，我個人覺的不是最優的演算法，有好的朋友可以回複我。

　　總結：

　　　　1，由於寫的時間比較緊，沒有把棋盤完全設定為一個對象進行可控調整

　　　　2，棋子還未點擊前可以添加一個滑鼠移動的事件，出現一個閃爍的棋子，用來告訴玩家滑鼠點擊後棋子將會落與哪一點

　　　　3，悔棋功能，可以將使用者下棋的每一次點擊座標記錄，當使用者需要悔棋的時候，剔除數組中的最後一個，並在顯示端移除該座標的棋子

　　　　4，計時功能，整盤棋的有效時間和玩家單次下棋所用時間。

自製html五子棋