jquery实现走迷宫游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现走迷宫游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html,body { width: 100vw; height: 100vh; position: fixed; padding: 0; margin: 0; top: 0; bottom: 0; left: 0; right: 0 } #mazeContainer { transition-property: opacity; transition-duration: 1s; transition-timing-function: linear; top: 75px; opacity: 0; display: inline-block; background-color: rgba(0,0,0,0.3); margin: auto } #mazeContainer #mazeCanvas { margin: 0; display: block; border: solid 1px black } input,select { transition-property: background-color opacity; transition-duration: .2s; transition-timing-function: ease-in-out; cursor: pointer; background-color: rgba(0,0,0,0.3); height: 45px; width: 150px; padding: 10px; border: 0; border-radius: 5px; color: white; display: inline-block; font-size: 15px; text-align: center; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } input:hover,select:hover { background-color: rgba(0,0,0,0.7) } input:active,select:active { background-color: black } input:focus,select:focus { outline: 0 } .custom-select { display: inline-block } .custom-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 125px center } #Message-Container { visibility: hidden; color: white; display: block; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.3); z-index: 1 } #Message-Container #message { width: 300px; height: 300px; position: fixed; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px } #page { font-family: "Segoe UI",Arial,sans-serif; text-align: center; height: auto; width: auto; margin: auto } #page #menu { margin: auto; padding: 10px; height: 65px; box-sizing: border-box } #page #menu h1 { margin: 0; margin-bottom: 10px; font-weight: 600; font-size: 3.2rem } #page #view { position: absolute; top: 65px; bottom: 0; left: 0; right: 0; width: 100%; height: auto } .border { border: 1px black solid; border-radius: 5px } #gradient { z-index: -1; position: fixed; top: 0; bottom: 0; width: 100vw; height: 100vh; color: #fff; background: linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite } @-webkit-keyframes Gradient { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @keyframes Gradient { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @media only screen and (max-width:400px) { input,select { width: 120px } } </style> </head> <body>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0