js版五子棋,css3+js

来源：互联网发布：unity3d放大缩小编辑：程序博客网时间：2024/05/22 03:15

在线测试：http://www.cuteui.com/

效果图：

没有用到任何的图片，全部是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="<div class='box'><table>";for(var i=0;i<config.row;i++){html+="<tr>";for(var k=0;k<config.rank;k++){html+="<td>";//html+=i+" - "+k;html+="</td>";}html+="</tr>";}html+="</table></div>";$(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<config.row-1;i++){for(var k=0;k<config.rank-1;k++){var box="";box="<div class='block' style='width:${w}px;height:${h}px;left:${x}px;top:${y}px;'></div>";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:

<!DOCTYPE HTML><html>  <head>    <title>Oneline Gomoku</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="jquery-1.10.2.min.js"></script><script type="text/javascript" src="gomoku.js"></script><style type="text/css">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);}</style>  </head>  <body>  <div>  <button onclick="config.colorSign=1">白棋</button><button onclick="config.colorSign=0">黑棋</button>  </div>  </body></html>

0 0