<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> table{ width: 700px; height: 700px; background: aliceblue; box-shadow: cadetblue; margin:6% auto; border-collapse: collapse; } td{ border:1px solid darkred; width: 68px; height: 68px; } .divw { width: 100%; height: 100%; background: white; border-radius: 50%; box-shadow: 0px 0px 10px gray; } .divb { width: 100%; height: 100%; background: black; border-radius: 50%; box-shadow: 0px 0px 20px gray; } </style> <body> <table> <tr> <td></td> <td></td> <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> <td></td> <td></td> </tr><tr> <td></td> <td></td> <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> <td></td> <td></td> </tr><tr> <td></td> <td></td> <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> <td></td> <td></td> </tr><tr> <td></td> <td></td> <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> <td></td> <td></td> </tr><tr> <td></td> <td></td> <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> <td></td> <td></td> </tr> </table> <script> window.onload=function () { var tabEle=document.querySelectorAll("tr td"); var a=false; for(var index=0;index<tabEle.length;index++){ tabEle[index].onclick=function () { if(a==false){ if(this.className==''){ fall('divw'); this.className='white'; this.appendChild(div); a=true; } } else{ if(this.className==''){ fall('divb'); this.className='black'; this.appendChild(div); a=false; } } function fall(classEle) { div=document.createElement('div'); div.className=classEle; } } } } </script> </body> </html> 效果如图: 几点收获:border-callapse:设置表格边框是否合并为单一的边框; 由于每次放置棋子都是在方格中新添加,可以设置flag判断该方格有没有放置棋子,并决定放置白棋还是黑棋。ClassName都为“”,我们可以根据其className做文章,用到了createElement() appendChild(), 事实上,在if语句中添加ClassName是多余的,没有起到明显作用。在最后fall方法中统一设置ClassName即可,不同在于css渲染是白棋还是黑棋。 几点疑惑:棋盘方格大小设置 与 其他数字计算是否有什么关系。只有69px左右时,棋子是铺满的,其他设置就会出现椭圆,还没有搞明白。
js实现五子棋
最新推荐文章于 2024-06-27 10:26:13 发布