效果圖：
沒有用到任何的圖片，全部是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);
}