花了一個早上寫的五子棋，好久不寫前端都有些生疏了，有啥好的建議可以反饋給我，謝謝哈。
話不多說，開始介紹。
一，主要三部分
樣式代碼
<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，計時功能，整盤棋的有效時間和玩家單次下棋所用時間。