js实现一个简单的围棋效果代码
代码语言:html
所属分类:游戏
代码描述:js实现一个简单的围棋效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* RESET */ * { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Calibri; user-select: none; /* border: 1px dotted yellow; */ } body{ height: 100%; background: rgb(20,20,20); background-size: cover; background-attachment: fixed; background-position: top left; background-repeat: no-repeat; } #container{ width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 0px; padding: 10px; } .pawn{ width: 58px; height: 58px; position: absolute; display: block; border-radius: 50%; font-size: 30px; line-height: 58px; text-align: center; margin: 1px; z-index: 10; filter: drop-shadow(-2px -1px 1px rgba(0,0,0,0.5)); } .black{ color: transparent; background: black; background-size: cover; box-shadow: 0px 0px 13px gray inset; } .white{ color: transparent; background: white; background-size: cover; box-shadow: 0px 0px 13px gray inset; } .current{ /* box-shadow: 0px 0px 25px gold inset; */ border: 1px solid gold; } /* 13x13 */ .board{ width: 840px; height: 840px; display: block; position: absolute; top: 30px; left: 330px; background: rgb(216, 159, 67); background-size: cover; border:1px solid rgba(0,0,0,0.7); box-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 3px rgba(255,255,255,0.6) inset, 100px 100px 100px rgba(255,255,255,0.2) inset; } .board:after{ content: ''; width: 720px; height: 720px; display: block; position: absolute; margin: 60px; background: repeating-linear-gradient(to left, rgba(0,0,0,0.7) 0px, transparent 1px, transparent 59px, rgba(0,0,0,0.7) 60px), repeating-linear-gradient(to bottom, rgba(0,0,0,0.7) 0px, transparent 1px, transparent 59px, rgba(0,0,0,0.7) 60px); outline: 1px solid rgba(0,0,0,0.7); } .board:before{ content: ''; width: 790px; height: 790px; display: block; position: absolute; margin: 25px; } .jar{ width: 300px; height: 300px; position: absolute; border-radius: 50px; background: brown; box-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 7px rgba(255,255,255,0.3) inset; } .jar:after{ content: ''; width: 260px; height: 260px; position: relative; float: right; margin:20px; border-radius: 30px; background: rgba(0,0,0,0.3); box-shadow: 0px 0px 6px rgba(0,0,0,0.8) inset, 0px 0px 7px rgba(255,255,255,0.3); } #white{ top: 90px; left: 15px; } #black{ top: 510px; left: 15px; } #checkNumbers{ -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border-radius: 50%; position: absolute; border: 1px solid black; outline: none; background: white; cursor: pointer; } #checkNumbers:checked:after{ content: ''; -webkit-appearance: none; -moz-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin: 2px; position: absolute; outline: none; background: lime; box-shadow: 0px 0px 2px black inset; } #checkNumbers:after{ content: ''; -webkit-appearance: none; -moz-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin: 2px; position: absolute; outline: none; box-shadow: 0px 0px 2px black inset; background: darkgreen; } #checkNumbersLabel{ margin-left: 24px; color: white; user-select: none; cursor: pointer; text-shadow: 0px 0px 1px black; } .plate{ position: absolute; width: 410px; height: 440px; left: 1185px; top: 30px; box-shadow: 0px 0px 20px rgba(0,0,0,0.7) inset, 0px 0px 5px rgba(255,255,255,0.6) ; color: white; background: rgba(255,255,255,0.2); } .plate span{ position: absolute; bottom: 0px; left: 0px; padding: 5px; text-shadow: 0px 0px 1px black; } .dot{ width: 15px; height: 15px; display: block; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: black; box-shadow: 0px 0px 1px white inset; } #info{ position: fixed; width: 100%; height: 30px; background: rgba(0,0,0,0.8); color: white; text-shadow: 0px 0px 1px black; bottom: 0px; left: 0px; padding-left: 10px; line-height: 30px; box-shadow: 0px 0px 20px rgba(0,0,0,0.7) inset, 0px 0px 5px rgba(255,255,255,0.6) ; z-index: 1000; } #back{ width: 50px; border: none; outline: none; border: 1px solid yellowgreen; margin-top: 5px; background: black; color: greenyellow; } #back:hover{ box-shadow: 0px 0px 3px yellowgreen, 0px 0px 3px yellowgreen inset; text-shadow: 0px 0px 3px yellowgreen; } #back:active{ background: yellowgreen; border: 1px solid black; color: black; } #tree{ display: none; position: absolute; width: 410px; height: 385px; left: 1185px; top: 485px; box-shadow: 0px 0px 20px rgba(0,0,0,0.7) inset, 0px 0px 5px rgba(255,255,255,0.6) ; color: white; background: rgba(255,255,255,0.2); text-align: left; overflow-y: scroll; } </style> </head> <body > <div id="container"> <div class="board" id="board" ondrop="drop(event)" ondragover="allowDrop(event)" oncontextmenu="markMenu(event)"> <div class="dot" style="top: 240px; left: 240px;"></div> <div class="dot" style="top: 420px; left: 240px;"></div> <div class="dot" style="top: 600px; left: 240px;"></div> <div class="dot" style="top: 240px; left: 420px;"></div> <div class="dot" style="top: 420px; left: 420px;"></div> <div class="dot" style="top: 600px; left: 420px;"></div> <div class="dot" style="top: 240px; left: 600px;"></div> <div class="dot" style="top: 420px; left: 600px;"></div> <div class="dot" style="top: 600px; left: 600px;"></div> </div> <div class="jar" id="black" ondragover="allowDrop(event)"></div> <div class="jar" id="white" ondragover="allowDrop(event)"></div> <div class="plate" id="plate" ondrop="drop(event)" ondragover="allowDrop(event)"><span>Place captured pawns here</span></div> <span><input type="checkbox" id="checkNumbers"> <label for="checkNumbers" id="checkNumbersLabel">Show numbers</label></span><br> <span><button id="back">◀</button></span> <div id="tree"></div> </div> <span id="info"></span> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > /* tree element object */ function element(prev, obj){ this.depth = 0; this.prev = prev; this.obj = obj; this.next = []; if(prev != null) { prev.next.push(this); this.depth = parseInt(prev.depth) + 1; } } function showTree(node){ if(node == 'undefined') return; visit(node); for(var i=0;i<node.next.length;i++){ showTree(node.next[i]); } } function visit(node){ var spacing = ''; for(var i=0; i<node.depth; i++){ spacing += '  '; } var glyph = ''; node.obj.color === 'White' ? glyph = '⚪' : glyph = '⚫'; $('#tree')[0].innerHTML+=(spacing + glyph + '(' + node.obj.x + ',' + node.obj.y + ')<br>'); } /* VARS ------------------------------------ */ var g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0