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