花了一个早上写的五子棋，好久不写前端都有些生疏了，有啥好的建议可以反馈给我，谢谢哈。
话不多说，开始介绍。
一，主要三部分
样式代码
<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，计时功能，整盘棋的有效时间和玩家单次下棋所用时间。