css+js实现迷宫游戏代码
代码语言:html
所属分类:游戏
代码描述:css+js实现迷宫游戏代码,键盘上下左右键移动,获得一个钥匙可打开一扇门,灰色方块可穿越,到右下角就算赢
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --groese: 1vw; --weite: 1vh; } *{ margin: 0px; padding: 0px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } header{ position: fixed; top: 0px; left: 0px; width: 100%; background-color: rgba(255,255,255,0.6); font-size: 25px; padding-top:15px; } footer{ position: fixed; bottom: 0px; left: 0px; width: 100%; background-color: rgba(255,255,255,0.6); font-size: 25px; } body{ background-color: aquamarine; text-align: center; } main{ display: inline-block; background-color: white; border-radius: 20px; margin: 5px; padding: 10px; width: calc(100vw - 35px); height: calc(100vw - 35px); } article{ width: calc(100% - 10px); height: calc(100% - 10px); display: flex; flex-wrap: wrap; border: 5px solid black; background-color: black; } section{ background-color: mistyrose; width: calc(10% - 10px); height: calc(10% - 10px); border: 5px solid rgba(0,0,0,0.00); line-height: 9vw; font-size: 5vw; } .oben{ border-top: 5px solid black; } .links{ border-left: 5px solid black; } .unten{ border-bottom: 5px solid black; } .rechts{ border-right: 5px solid black; } .coin{ background-color: gold; border-radius: 50%; height: 70%; width: 70%; line-height: 6vw; font-size: 5vw; font-weight: bolder; display: inline-block; color: goldenrod; border: 2px solid goldenrod; margin-top: 9px; overflow: hidden } #reset{ position: absolute; margin: 10px; width: auto; padding: 10px; border-radius: 10px; left: 0px; bottom: 0px; background-color: rgba(255,255,255,0.50) } #control{ position: absolute; margin: 10px; width: auto; padding: 10px; border-radius: 10px; right: 0px; bottom: 0px; background-color: rgba(255,255,255,0.50) } .arrow{ margin: 10px; padding: 10px; border-radius: 10px; left: 0px; bottom: 0px; background-color: rgba(255,255,255,0.50); display: inline; } .herz{ height: var(--groese); width: var(--groese); background-color: crimson; display: inline-block; transform: rotate(45deg); position: relative; } .herz:before{ content: ""; height: var(--groese); width: var(--groese); border-radius: 50%; background-color: crimson; display: inline-block; position: absolute; top: calc(var(--groese) / -2); right: 0px } .herz:after{ content: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0