每天学一个jquery插件-做一个围棋1

每天一个jquery插件-做一个围棋1

做一个围棋1

分成几个部分吧,首先就是完成动作,然后再是判断游戏结果的算法,接着用websocket弄成连接的模式

效果如下
每天学一个jquery插件-做一个围棋1_第1张图片

代码部分

*{
     
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
#div{
     
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #7f8c8d;
}
.chess{
     
	width: 28px;
	height: 28px;
	border-radius: 50%;
	position: absolute;
	z-index: 3;
}
.chess.black{
     
	background-color:black;
}
.chess.white{
     
	background-color: white;
}
#box{
     
	/* outline: 1px solid lightgray; */
	width: 540px;
	height: 540px;
	position: relative;
	border: 1px solid lightgray;
	border-top: none;
	border-left: none;
}
#point{
     
	width: 10px;
	height: 10px;
	background-color: red;
	z-index: 2;
	border-radius: 50%;
	position: absolute;
	left: -5px;
	top: -5px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	/* animation: point 0.5s linear infinite; */
}
#point:hover{
     
	opacity: 0.8;
}
#point:active{
     
	opacity: 0.6;
}
#point.white:active{
     
	background-color: white;
}
#point.black:active{
     
	background-color: black;
}
@keyframes point{
     
	from{
     
		opacity: 1;
	}
	to{
     
		opacity: 0;
	}
}
#msg{
     
	width: 540px;
	height: 90px;
	border: 1px solid lightgray;
	border-top: none;
	overflow:hidden auto; 
	color: white;
}
.item{
     
	height: 30px;
	width: 30px;
	display: inline-flex;
	border-left: 1px solid lightgray;
	border-top: 1px solid lightgray;
	z-index: 1;
	position: absolute;
}

<html>
	<head>
		<meta charset="utf-8">
		<title>做一个围棋title>
		<script src="js/jquery-3.4.1.min.js">script>
		<script src="js/zygwq.js">script>
		<link href="css/zygwq.css" rel="stylesheet" type="text/css" />
	head>
	<body>
		<div id="div">
			<div id="box">
				<div id="point" data-h="black">div>
			div>
			<div id="msg">
				<p>黑方执子……p>
			div>
		div>
	body>
html>

$(document).ready(function(){
     
	var $div = $("#div");
	var $box = $("#box");
	drawgrid();
	
	//显示点被点击,就执行落子效果
	$("#point").click(function(){
     
		var p = {
     
			x:parseInt($(this).attr("data-x")),
			y:parseInt($(this).attr("data-y"))
		}
		var h = $(this).attr("data-h");
		
		if(h=="white"){
     
			$("

黑方落子(x:"+p.x+",y:"+p.y+")

白方执子……

"
).appendTo($("#msg")) $(this).attr("data-h","black") }else{ $("

白方落子(x:"+p.x+",y:"+p.y+")

黑方执子……

"
).appendTo($("#msg")) $(this).attr("data-h","white") } var $chess = $("
"
); $chess.appendTo($box); $chess.css(chess(p)); // }) //棋子落点位置定位 function chess(p){ return{ left:p.x*30-14, top:p.y*30-14 } } //鼠标悬浮事件,就是显示点击效果的,对于落子辅助一下 $(".item").mousemove(function(e){ var x = e.offsetX; var y = e.offsetY; var p = { x:parseInt($(this).attr("data-x")), y:parseInt($(this).attr("data-y")) } //产生坐标 var p2 = { x:x<15?p.x:p.x+1, y:y<15?p.y:p.y+1 } point(p2); $("#point").attr("data-x",p2.x) $("#point").attr("data-y",p2.y) $("#point").show(); }) //移出棋盘就隐藏 $("#box").mouseleave(function(){ $("#point").hide(); }) //绘制格子 function drawgrid(){ for(var a = 0;a<18;a++){ for(var b = 0;b<18;b++){ var p = { x:a,y:b}; var $item = $("
"
); $item.appendTo($box) $item.css(item(p)) } } } //给显示点坐标的 function point(p){ $("#point").css({ 'left':(p.x*30-5)+'px', 'top':(p.y*30-5)+'px' }) } //给格子坐标的 function item(p){ //生成坐标位置 return{ left:p.x*30, top:p.y*30 } } //返回控制对象 function $item(p){ return $(".item[data-x='"+p.x+"'].item[data-y='"+p.y+"']"); } })

思路解释

  • 之前做五子棋的时候落子的动作做的好尬,不过现在我用了一种更好的办法来实现,就是预落子的效果
  • 只要预落子能被点到就是能够落子,而不能点到就是被棋子覆盖住了,自然就不能落子,不用做一个缓存部分再来判断是否能落子了
  • 未完,休息

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)