js实现一个深度优先的迷宫生成器代码
代码语言:html
所属分类:其他
代码描述:js实现一个深度优先的迷宫生成器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: gainsboro; font-family: sans-serif; text-align: center; --wall-width: 10px; --wall-height: 6px; --wall-color: cadetblue; --wall-side-color: darkolivegreen; --maze-width: 4; --maze-height: 4; --maze-tile-size: 30px; --maze-border-bottom: solid var(--wall-height) var(--wall-side-color); } .maze-container { display: grid; grid-template-columns: repeat(var(--maze-width), var(--maze-tile-size)); grid-template-rows: repeat(var(--maze-height), var(--maze-tile-size)); gap: calc(var(--wall-width) / 1); border-style: solid; border-color: var(--wall-color); border-width: var(--wall-width); border-radius: calc(var(--wall-width) / 2); background-color: wheat; position: relative; overflow: hidden; box-shadow: 0px var(--wall-height) 0px var(--wall-side-color); } .cell { position: relative; width: var(--maze-tile-size); height: var(--maze-tile-size); --visibility-before: hidden; --visibility-after: hidden; background-color: #00000009; } .cell:first-child { background-color: turquoise; } .cell:last-child { background-color: tomato; } .cell::before, .cell::after { content: ''; position: absolute; height: calc(100% + var(--wall-width)*2); width: var(--wall-width); right: 0; top: 0; background-color: var(--wall-color); border-radius: calc(var(--wall-width) / 2); box-sizing: content-box; margin-top: calc(var(--wall-width) / -1); margin-right: calc(var(--wall-width) / -1); z-index: 1; visibility: var(--visibility-before); border-bottom: var(--maze-border-bottom); } .cell::after { width: calc(100% + var(--wall-width)*2); height: var(--wall-width); top: 0%; right: 0; margin-right: calc(var(--wall-width) / -1); margin-top: calc(var(--wall-width) / -1); visibility: var(--visibility-after); z-index: 0; } .buttons button{ margin: 15px 5px; border-radius: 5px; cursor: pointer; background-color: darkgreen; color: seashell; padding: 5px; border-style: solid; border-width: 1px 0px 4px 0px; border-color: olive; border-radius: 4px; } .buttons button:active{ border-width: 4px 0px 1px 0px; border-color: green; } </style> </head> <body > <div> <div class="maze-container" id="container"></div> <div class="buttons"> <button id="generate">Generate</button> </div> </div> <script > console.clear(); let container = document.querySelector(&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0