象棋排版

最新推荐文章于 2020-03-07 13:03:37 发布
最新推荐文章于 2020-03-07 13:03:37 发布
阅读量442 收藏
点赞数
分类专栏： js系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdq121516/article/details/102508473
版权

象棋排版

在这里插入图片描述

象棋结构

<!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)
}

象棋备注：

  1. 这个案例最主要用于网页排版，功能很少
  2. 如果你会象棋规则，你可以在这个代码的基础上去完善
  3. 在这个排版中相同内容红黑棋子之间的距离的和是一样的
  4. 建议你重点看如何把棋子排列好的部分
如鹰展翅上腾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
C++900行代码实现中国象棋游戏规则以及相关功能
m0_52215008的博客
03-22 2423
本文章通过C++中的900行代码实现中国象棋游戏以及相关功能，主要的内容如下：1.设置未进入游戏前的主页面；2.绘制棋盘（如果有刚好尺寸的图片也可直接加载），包括棋盘网格，炮与兵的特殊标记绘制；3.绘制和创建棋子，并令其初始化在棋盘的相应位置；4.游戏开始，开始计时，鼠标点击棋子，控制其在棋盘的移动；5.各类棋子的行棋规则判定（主要思路是先让其能够按照自身规则移动，后面再判断是否吃子）6.其它功能，主要包括：不同场合和时刻的音效处理；回合计数；
中国象棋棋谱
05-21
同时，通过Word的排版功能，可以创建专业且易于阅读的棋谱，这对于教学、研究和程序开发都是极其有益的。 对于“方便程序利用”，这意味着棋谱数据可以被编程语言解析，用于开发各种与象棋相关的应用程序。例如，...
中国象棋棋谱大全中国象棋棋谱大全
11-10
中国象棋棋谱大全
Latex 趣味应用之 中国象棋排版
D_turtle的博客
06-02 1008
由于LATEX是通过语法来排版的，任何想得到的东西，像是[乐谱]、[棋谱]、[化学结构式]及[物理学]中的[费曼图]等等都可以先定义规则，然后再以简单的语法排版出来。而那些规则也往往早有人写出对应的宏包，所以用户只需要弄懂他的语法就可以了。 ——维基百科Latex作为专业的排版工具，除了在写Paper, 做Pre 方面展现出强大的优势外，还有一些比较有意思的应用。本篇文章主要介绍Latex 在 中...
棋类网站
weixin_30646315的博客
03-30 147
游戏http://www.gamerdown.com/sort/4_1.htm棋软收藏站http://qiruan.com/中国五子棋网http://www.wuzi8.com/Index.asp杰出连珠http://www.jjie.net/down/index.asp西部图林http://202.115.24.10/blog/default.asp?cateID=5程焕文http://blog...
【中国象棋学习】打谱复盘
悟已往之不谏 知来者之可追
03-07 1511
红方：一二三四五… 黑方：123456… 一、当头炮开局 执红方开局 对方并炮 炮二平五 炮８平５ 2. 马二进三 马８进７ 车一平二 炮２平４ 4. 马八进七 马２进３【注意，对方并炮不要进兵！】 车九平八 车１平２ 6. 车二进六 卒７进１【脱谱】 对方比较稳健 炮二平五 马８进７ 2. 马八进七 卒３进１ 兵三进一 马２进...
画象棋棋谱
小小少年
06-06 588
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
象棋布局系统设计
I_LOVE_MCU的博客
12-29 1238
要求： 在象棋棋盘中，只布局了红方的棋子，不断输入要移动棋子的位置及目的位置，设计程序判断走棋是否符合规则并动态显示出棋盘布局。 程序更够完美实现要求的内容。 代码正文： //#include "pch.h" #include <iostream> #include <cstring> #include "string.h" #include "math.h" us...
LaTeX技巧009：中国象棋的LaTeX排版
weixin_34354945的博客
06-21 238
Latex可以排版容易排版中国象棋,围棋,国际象棋棋谱和乐谱, 详情请见. http://bbs.chinatex.org/forum.php?mod=viewthread&tid=4987&extra=page=1 这里以中国象棋棋谱为例: 中国象棋所需宏包：cchess（Chinese chess）\usepackage{cchess} \normalboard画...
中国象棋对弈系统
07-16
这涉及到如何撰写清晰的API文档，如何编写用户手册，以及如何使用Markdown或LaTeX等工具来排版和格式化文档。 通过这个项目，初学者不仅可以掌握Java编程，还能深入理解游戏开发的各个方面，包括游戏逻辑设计、人工...
易语言QQ象棋棋谱打印
07-23
打印棋谱不仅需要正确解析这些数据，还涉及到排版和打印设置，比如页边距、字体大小、颜色配置等。易语言提供了一系列的图形用户界面（GUI）组件和系统调用，可以方便地实现这些功能。 在实际的开发过程中，开发者...
金色城市建筑国际象棋背景创业融资PPT模板
07-17
PowerPoint图表为38张白色扁平化幻灯片图表，另外使用了多张商务人物、握手图片、办公场景、青铜鼎、财富图片作为排版素材。 本模板适合用于制作各类商业融资计划书PPT，创业融资幻灯片等。.PPTX格式；
源代码-创意互动网站导航（ASP静态版） v1.0.zip
最新发布
08-24
源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip
java源码资源很不错的Java计算器java源码资源很不错的Java计算器
08-24
java源码资源很不错的Java计算器java源码资源很不错的Java计算器提取方式是百度网盘分享地址
源代码-补单系统 v1.0.zip
08-24
源代码-补单系统 v1.0.zip
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版
08-24
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版提取方式是百度网盘分享地址
数字万用表使用介绍.mp4
08-24
数字万用表使用介绍.mp4
SAP 客户主数据导入程序模板
08-24
客户主数据导入模板
C语言实现中国象棋
"C语言实现的中国象棋程序" 在C语言中编写中国象棋游戏是一项具有挑战性的任务，因为象棋规则复杂，涉及到棋子的移动规则、吃子逻辑以及胜负判断等多个方面。这个程序使用二维数组来表示棋盘，每个元素代表一个位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

如鹰展翅上腾

谢谢老板

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值