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: ""; height: var(--groese); width: var(--groese); border-radius: 50%; background-color: crimson; display: inline-block; position: absolute; right: calc(var(--groese) / 2); bottom: 0px; } .figur{ width: 100%; height: 100%; border-radius: 50%; } .herzchen{ float: left; padding-left: var(--groese); } #anatar{ display: inline-block; } #anatar p{ display: inline-block; float: left; } #gameover{ position: absolute; background-color: black; top: 0px; left: 0px; width: 100%; height: 100%; color: wheat; font-size: 10vh; line-height: 100vh; } #winn{ position: absolute; background-color: cadetblue; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 10vh; line-height: 100vh; } @media screen and (orientation: landscape){ main{ width: calc(100vh - 35px); height: calc(100vh - 35px); } .coin{ line-height: 6vh; font-size: 5vh; } section{ line-height: 9vh; font-size: 5vh; } .herz,.herz:after,.herz:bevore{ height: var(--weite); width: var(--weite); top: calc(var(--weite) / -2); } } </style> </head> <body> <header><div id="herzen" ></div><div id="anatar" ></div><div style="float: right; padding-right: 10px; line-height: 140%" >①<span style="padding-left: 10px" id="coincount" >0</span></div></header> <main> <article id="feld"> </article> </main> <footer> <div id="reset">reset</div> <div id="control"> <div id="up" class="arrow">↑</div><br> <div id="left" class="arrow">←</div> <div id="right" class="arrow">→</div><br> <div id="down" class="arrow">↓</div> </div> </footer> <div id="gameover" hidden>🦴Game Over!🦴</div> <div id="winn" hidden>you win!</div> <script > const data={ matrix:[ ["links", "links oben", "links rechts", "links unten", "links oben unten"], ["oben links", "oben", "oben rechts", "oben unten", "links oben rechts"], ["rechts links", "rechts oben", "rechts", "rechts unten", "unten oben rechts"], ["unten links", "unten oben", "unten rechts", "unten", "unten rechts links"] ], maus:1, coin:0, key: 3, herz:3, tunnel: 0, geist: 56, game: 1, auswerten: function(){ const neues=document.getElementById("cell-"+data.maus); if(neues.innerHTML=='<div class="herz"></div>'){ data.herz+=1; view.herzen(); } if(neues.innerHTML=="🗝"){ data.key+=1; view.schlussel(); } if(neues.innerHTML=='<div class="coin">1</div>'){ data.coin+=1; view.coin(); } if(neues.innerHTML=='<div class="figur" style="background-color: white">👻</div>'){ view.gameOver(); } if(neues.innerHTML=='<div class="figur" style="background-color: blue">😿</div>'){ view.winn(); } if(neues.style.backgroundColor=="darkgray"&&data.tunnel==0){ //tunnel view.tunnel(); } else{ data.tunnel=0; } }, } const main={ init: function(){ data.maus=1; data.game=1; data.geist=56; view.draw(); document.getElementById("up").addEventListener("click",main.move); document.getElementById("left").addEventListener("click",main.move); document.getElementById("down").addEventListener("click",main.move); document.getElementById("right").addEventListener("click",main.move); document.addEventListener("keydown",main.move); document.addEventListener("keydown",main.move); document.addEventListener("keydown",main.move); document.addEventListener("keydown",main.move); view.schlussel(); view.herzen(); view.coin(); document.getElementById("cell-56").innerHTML='<div class="figur" style="background-color: white">👻</div>'; view.geist(); document.getElementById("reset").addEventListener("click",view.gameOver); }, feld: document.getElementById("feld"), move: function(evnt){ evnt.preventDefault(); //up if(evnt.target.id=="up"||evnt.key=="ArrowUp"){ if(document.getElementById("cell-"+data.maus).classList.value.indexOf("oben")==-1){ document.getElementById("cell-"+data.maus).innerHTML=""; data.maus-=10; data.auswerten(); document.getElementById("cell-"+data.maus).innerHTML='<div class="figur" style="background-color: orange">😎</div>'; }else if(data.key>0&&data.maus>10){ data.key-=1; view.schlussel(); document.getElementById("cell-"+data.maus).classList.remove("oben"); document.getElementById("cell-"+(data.maus-10)).classList.remove("unten"); } } //ri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0