象棋排版
![在這裏插入圖片描述]()
象棋結構
<!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;
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){
obj.classList.add("active");
this.nowChess=obj;
}
if(this.count==2){
this.count=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)
}
}
象棋備註：
- 這個案例最主要用於網頁排版，功能很少
- 如果你會象棋規則，你可以在這個代碼的基礎上去完善
- 在這個排版中相同內容紅黑棋子之間的距離的和是一樣的
- 建議你重點看如何把棋子排列好的部分
