象棋排版

最新推荐文章于 2020-03-07 13:03:37 发布

如鹰展翅上腾

最新推荐文章于 2020-03-07 13:03:37 发布

阅读量511

点赞数

分类专栏： js系列

本文链接：https://blog.csdn.net/wdq121516/article/details/102508473

版权

js系列专栏收录该内容

8 篇文章

订阅专栏

象棋排版

在这里插入图片描述

象棋结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>象棋</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				overflow: hidden;
				height: 100%;
			}
			table,tbody{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				height: 600px;
				width: 480px;
				border-collapse: collapse;
			}
			td{
				border: 1px solid red;
				width: 60px;
				height: 60px;
				/*确保每一个方格的面积是60*60*/
				box-sizing: border-box;
			}
			.limit{
				height: 120px;
				font-size: 60px;
				text-align: center;
				color: green;
				letter-spacing: 20px;
			}
			.rChess{
				width: 40px;
				height: 40px;
				background: red;
				position: absolute;
				border-radius: 50%;
				text-align: center;
				line-height: 40px;
				color: #fff;
				border: double red 3px;
				font-size: 26px;
				font-family: "微软雅黑";
			}
			.bChess{
				width: 40px;
				height: 40px;
				background: black;
				position: absolute;
				border-radius: 50%;
				text-align: center;
				line-height: 40px;
				color: #fff;
				font-size: 26px;
				font-family: "微软雅黑";
			}
			span{
				cursor: move;
			}
			.line{
				width: 168px;
				height: 0px;
				border: .5px solid red;
				position: absolute;
				left: 156px;
				top: 60px;
				z-index: -1;
			}
			.active{
				background: gold;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="limit" colspan="8"  >
					楚河●汉界
				</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>
<script src="js/chess1.js"></script>

象棋脚本


/*
黑白两棋子的纵向距离之和等于高

*/
function Chess(){
	this.wrap=document.querySelector('table');
	this.firstPerson="r";
	this.nowChess=null;
	this.count=0;
	this.initLeft=this.wrap.offsetLeft;
	this.initTop=this.wrap.offsetTop;
	this.lineutil=function(left,top,trans){
		
	}
	this.util01=function(rows,cols,content,oclass){
			var oRedChess = document.createElement("span");
			oRedChess.innerText = content;
			oRedChess.style.left = cols * 60 - 20 + "px"
		    oRedChess.style.top = rows * 60 - 20 + "px"
		    oRedChess.classList.add(oclass);
			this.wrap.appendChild(oRedChess)
	}
	this.util02=function(rowStart,colsStart,rows,cols,oclass){//棋子排列
			for(var j = rowStart; j < rows; j++) {
				for(var i = colsStart; i < cols; i++) {
					if((i == 0 || i == 8) && (j == 0 || j==10)) {
						this.util01(j,i,"车",oclass)
					}
					if((i == 1 || i == 7) && (j == 0 || j==10)) {
						this.util01(j,i,"马",oclass)
					
					}
					if((i == 2 || i == 6) && (j == 0 || j==10)) {
						this.util01(j,i,"相",oclass)
					}
					if((i == 3 || i == 5) && (j == 0 || j==10)) {
					this.util01(j,i,"士",oclass)
					}
					if(i == 4 && (j == 0 || j==10)) {
						this.util01(j,i,"将",oclass)
					}
					if((j == 1 || j==9) && (i == 1 || i == 7)) {
						this.util01(j,i,"炮",oclass)
					}
					if((j == 3 || j==7) && (i == 0 || i == 2 || i == 4 || i == 6 || i == 8)) {
						this.util01(j,i,"兵",oclass)
					}
			
				}
			}
			
	}
	this.initRedChess=function(){
		this.util02(0,0,5,9,"rChess")
	}
	this.initBlackChess=function(){
		this.util02(6,0,11,9,"bChess")
	}
    this.createLine=function(){
    	for(var i=0;i<4;i++){
    		var oLine=document.createElement("section");
		    oLine.classList.add("line");
		    this.wrap.appendChild(oLine);
		    switch (i){
		    	case 0:
		    	   oLine.style.transform="rotateZ(45deg)"
		    		break;
		    	case 1:
		    	   oLine.style.transform="rotateZ(-45deg)"
		    		break;
		    	case 2:
		    	   oLine.style.top="540px"
		    	   oLine.style.transform="rotateZ(45deg)"

		    		break;
		    	case 3:
		    	  oLine.style.top="540px"
		    	   oLine.style.transform="rotateZ(-45deg)"

		    		break;
		    }
    	}
    }
    
    this.isChess=function(target,x,y){
    	if(target.nodeName=="SPAN"){
    		return true;
    	}else{
    		return false;
    	}

    }
    this.isCurrentChess=function(obj,x,y){
    	this.count++;
		 //是指定方走棋
		 if(obj.className.indexOf(this.firstPerson) != -1 && this.count==1){//当次数为1时标记是哪一个棋子被激活
		 	obj.classList.add("active");
		 	this.nowChess=obj;
		 }
		 if(this.count==2){//棋子要移动
		 	this.count=0;//清0，便于重新开始
		 	if(this.isChess(obj,x,y)){ //判断第二次点击的地方有没有棋子
		 		console.log("true")
		 	}else{//无棋子
	 			this.nowChess.style.left=x*60-20+"px";
	 			this.nowChess.style.top=y*60-20+"px";
		 		
		 	}
		 		this.nowChess.classList.remove("active")//取消激活状态
		 }
    }
}
window.onload=function(){
	var chess=new Chess();
	chess.initRedChess();
	chess.initBlackChess();
	chess.createLine();
	document.querySelector("table").onmouseup=function(ev){
		var ev=ev||event;
		var offsetX=ev.pageX-chess.initLeft;
		var offsetY=ev.pageY-chess.initTop;
		var disx=Math.round(offsetX/60);
		var disy=Math.round(offsetY/60);
		console.log(ev.target.offsetLeft)
//		chess.isCurrentChess(ev.target,disx,disy)
	}
//	setTimeout(function(){
//		alert("红方优先！")
//	},500)
}