效果圖：

沒有用到任何的圖片，全部是js+css做的。

隻是實現瞭界面，功能暫時沒有實現。

js：

var config={
	row:16,	//行
	rank:16,	//列
	white:112,	//白色
	black:113,	//黑色
	overtime:1000*60,//超時時間
	gameState:0,	//0未開始，1.進行中，2暫停中
	margin:5,	//每個棋子的邊距5像素
	colorSign:0,	//顏色標記
};
$(function(){
	initGame();
});
//初始化遊戲
function initGame(){
	createView();
	$(.block).click(function(){
		eventCLick($(this));
	});
}
//創建棋盤
function createView(){
	var html=

; for(var i=0;i; for(var k=0;k; //html+=i+ – +k; html+=; } html+=; } html+=

; $(document.body).append(html); //創建塊 var width=$(.box table).width(); var single=(width/config.row).toFixed(0); var leftMargin=(single/2).toFixed(0); var x=parseInt(leftMargin); var y=parseInt(leftMargin); //創建棋子盒子 for(var i=0;i; box=box.replace(${h}, single-config.margin); box=box.replace(${w}, single-config.margin); box=box.replace(${x}, x+(config.margin/2)+1); box=box.replace(${y}, y+(config.margin/2)); $(.box).append(box); x+=parseInt(single); } y+=parseInt(single); x=parseInt(leftMargin); } } //單擊棋子 function eventCLick(target){ if(config.colorSign==0){ $(target).addClass(focus-black); }else{ $(target).addClass(focus-white); } }
CSS and HTML:

<script type=text/javascript src=jquery-1.10.2.min.js></script><script type=text/javascript src=gomoku.js></script>

table {
border: 1px;
width: 500px;
height: 500px;
border-collapse: collapse;
background-color: #E1AF70;
}
table tr td{
border: #000 1px solid;
margin: 0px;
padding: 0px;
}
.box{
position: relative;
}
.block{
position: absolute;
border-radius:25px;
}
.block:HOVER{
cursor: pointer;
border: white 2px solid;
}
.focus-black{
background: -moz-linear-gradient(top, #CCC, #000);
background: -webkit-linear-gradient(top, #CCC, #000);
box-shadow:0px 0px 5px rgba(0,0,0, 0.45);
}
.focus-white{
background: -moz-linear-gradient(top, #FFF, #EEE);
background: -webkit-linear-gradient(top, #FFF, #EEE);
box-shadow:0px 0px 5px rgba(0,0,0, 0.45);
}

白棋黑棋