js版五子棋,css3+js

最新推荐文章于 2023-09-14 14:57:00 发布

潘敬

最新推荐文章于 2023-09-14 14:57:00 发布

阅读量1.3k

点赞数

分类专栏： JavaScript CSS3 文章标签：五子棋

本文链接：https://blog.csdn.net/dreamerframework/article/details/17260391

版权

JavaScript 同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

在线测试：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 οnclick="config.colorSign=1">白棋</button><button οnclick="config.colorSign=0">黑棋</button>
  	</div>
  </body>
</html>

潘敬

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js版五子棋,css3+js

效果图：没有用到任何的图片，全部是js+css做的。只是实现了界面，功能暂时没有实现。js：var config={ row:16, //行 rank:16, //列 white:112, //白色 black:113, //黑色 overtime:1000*60,//超时时间 gameState:0, //0未开始，1.进行中，2暂停中 margin:5,
复制链接

扫一扫