jquery益智类管道旋转拼接游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery益智类管道旋转拼接游戏代码,点击管道进行旋转,拼接打通后即可进入下一关。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Rotation Game</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family:'Source Sans Pro', 'Helvetica Neue'; font-size:16px; background:#000; color:#fff; } body.light { background:#fff; color:#111; } #toolbar { position:fixed; top:0; left:0; width:100%; line-height:25px; padding:10px; box-sizing:border-box; -webkit-transition:0.15s; transition:0.15s; opacity:0; z-index:999999999; -webkit-animation:3s toolbar ease-in-out; animation:3s toolbar ease-in-out; } #toolbar:hover { opacity:1; } @-webkit-keyframes "toolbar" { 0%,50%{opacity:1} } @keyframes "toolbar" { 0%,50%{opacity:1} } #theme { padding-right:15px; float:left; } #toolbar .link{ float:right; } #toolbar a { color:inherit; text-decoration:none; } #win, #finished{ position:fixed; top:0; left:0; width:100%; height:100%; background:inherit; color:inherit; z-index:9999; display:none; } #win .text, #finished .text { position:absolute; top:50%; left:50%; font-size:40px; font-weight:100; -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0); } body.light #win .text, body.light #finished .text { color:#111!important; } div[class^="level"] { position:fixed; top:50%; left:50%; width:280px; -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0); display:none; } div[class^="level"] .text { font-size:19px; padding-top:20px; clear:both; overflow:hidden; } div[class^="level"] .text span { padding:10px 0 0; font-size:15px; display:block; } div[class^="level"] .text.center { text-align:center; } div[class^="level"] .block, #createLevel .newLevel .block { position:relative; width:70px; height:70px; float:left; cursor:pointer; overflow:hidden; -webkit-transition:0.15s ease-in-out; transition:0.15s ease-in-out; } div[class^="level"] .block.curve:before, #createLevel .newLevel .block.curve:before { position:absolute; top:0; left:0; width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/rato/curve.png) 50% 50% / contain no-repeat; display:block; content:''; } div[class^="level"] .block.curve.double:before, #createLevel .newLevel .block.curve.double:before { background:url(//repo.bfw.wiki/bfwrepo/images/game/rato/curve-double.png) 50% 50% / contain no-repeat; } div[class^="level"] .block.straight:before, #createLevel .newLevel .block.straight:before { position:absolute; top:0; left:0; width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/rato/straight.png) 50% 50% / contain no-repeat; display:block; content:''; } div[class^="level"] .block.straight.double:before, #createLevel .newLevel .block.straight.double:before { background:url(//repo.bfw.wiki/bfwrepo/images/game/rato/straight-double.png) 50% 50% / contain no-repeat; } div[class^="level"] .block.end:before, #createLevel .newLevel .block.end:before { position:absolute; top:0; left:0; width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/rato/end.png) 50% 50% / contain no-repeat; display:block; content:''; } body.light div[class^="level"] .block, body.light #createLevel .newLevel .block { -webkit-filter: invert(1); filter: invert(1); } div[class^="level"] .block.r1, #createLevel .newLevel .block.r1{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } div[class^="level"] .block.r2, #createLevel .newLevel .block.r2{ -webkit-transform:rotate(90deg); transform:rotate(90deg); } div[class^="level"] .block.r3, #createLevel .newLevel .block.r3{ -webkit-transform:rotate(180deg); transform:rotate(180deg); } div[class^="level"] .block.r4, #createLevel .newLevel .block.r4{ -webkit-transform:rotate(270deg); transform:rotate(270deg); } #createLevel { position:fixed; top:0; left:0; width:100%; height:100%; background:inherit; color:inherit; z-index:99999; display:none; } #createLevel .newLevel { position:absolute; top:50%; left:50%; width:280px; -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0); } #createLevel .newLevel .block { border: 1px solid #fff; box-sizing: border-box; } #createLevel .stats { position:absolute; bottom:80px; width:100%; height:25px; line-height:25px; text-align:center; } #createLevel .tools { position:absolute; bottom:0; left:50%; width:280px; height:80px; -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); } body.light #createLevel .tools { -webkit-filter: invert(1); filter: invert(1); } #createLevel .tools img { margin:10px; width:50px; height:50px; float:left; border:2px solid #fff; box-sizing:border-box; cursor:pointer; display:block; } </style> </head> <body> <!-- This game is on iOS and Android "Infinity Loop" I loved the concept ant wanted to see if I could make it in jQuery --> <div id="toolbar"><span id="theme">关灯</span><span class="toggleCreateLevel"> 难度</span> </div> <div class="level1" data-code="1231243" data-set="e1.b.c2.c3.c1.s2.c4.e2" data-text="Rotation Game <br><span>Click a block to complete the pipe.</span>"></div> <div class="level2" data-code="2323114311231414" data-set="c1.c2.c4.c1.s2.c3.c1.e1.s1.e2.c1.c3.c4.c1.c2.c3"></div> <div class="level3" data-code="42232324114122322243" data-set="e2.s1.s2.c2.c2.c1.c1.c1.s2.c2.c2.b.c2.s2.s2.c1.c1.s1.s1.c1.e2.b.b.b"></div> <div class="level4" data-code="2222423124111111414" data-set="b.c1.s1.e1.c1.c1.c1.c2.s2.c2.c2.s2.s2.s1.e2.s1.c2.c1.c2.c2"></div> <div class="level5" data-code="222314311113443" data-set="c2.s1.s2.c1.s2.e1.c1.s1.s1.b.s2.s2.e1.e1.c1.e1" data-text="Multiple pipes."></div> <div class="level6" data-code="112413123111111414" data-set="b.e1.e2.b.c2.c1.c1.c1.s1.c1.c1.s2.s1.s2.s2.s1.c2.c1.c1.c2"></div> <div class="level7" data-code="232314142323.........完整代码请登录后点击上方下载按钮下载查看
网友评论0