用JS画一个Scrabble的棋盘-2

作者: Raow1 | 来源:发表于2020-08-08 21:53 被阅读0次

用JS画一个Scrabble的棋盘-2
用JS画一个Scrabble的棋盘
Scrabble
ios 五子棋二
RN原生模块的调用基础（五）
Python算法之旅字符串游戏之九路棋盘
CES 2018黑科技：互联望远镜、全息投影和智能面料
20160627
Python：游戏：五子棋之人机对战
递归与分治

以下为标准布局的Scrabble棋盘。还可以进一步更换棋盘的颜色，分值标识的颜色与形式，添加代表方位的标识等。

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Scrabble playing board</title>
  <style>
    table.board {
        table-layout:fixed;
    }
    td {
    background-color:#009900;
    width:50px;
    height:50px;
    }
  </style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="uidiv"></div>
<!-- partial -->
  <script>
var mults = ["","DL","TL","DW","TW"];
var mult="";
var html="";
var bx=15;
var by=15;

html += "<table class='board' id='PlayBoard'>";
for (i=0;i<by;i++) {
  html += "<tr>";
  for (j=0;j<bx;j++) {
    html += "<td> ";
    mult = "";
    if (i==7 && j==7)
        mult = "ST";
    if (((i==0 || i==14) && (j==0 || j==7 || j==14)) || (i==7 && (j==0 || j==14)))
        mult = mults[4];
    if ( ((i==0 || i==7 || i==14) && (j==3 || j==11)) || ( (i==2 || i==6 || i==8 || i==12) && (j== 6|| j==8)) || ( (i==3 || i==11)&&(j==0 || j==7 || j==14)) || ( (i==6 || i==8) && (j==2 || (j==12)) ) )
        mult = mults[1];
    if ( (i==j || (i+j)==14) && (i!=0 && i!=5 && i!=6 &&i!=8 &&i!=9 &&i!=14) )
        mult = mults[3];
    if ( ((i==1 || i==5 || i==9 || i==13) && (j==5 || j==9)) || ( (i==5 || i==9) && (j==1 || j==13) ) )
        mult = mults[2];
    if (mult !== "")
      mult = "<img src='https://github.com/amnond/jscrab/blob/master/pics/"+mult+".png?raw=true' alt='ImgUnload' width='50' height='50'>";
    html += mult + "</td>";
  }
  html += "</tr>";
}
html += "</table>";

document.getElementById('uidiv').innerHTML=html;
  </script>

</body>
</html>

效果图