css+js实现一个扫雷游戏代码
代码语言:html
所属分类:游戏
代码描述:css+js实现一个扫雷游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "digital-7"; src: url("//repo.bfw.wiki/bfwrepo/fonts/digital-7.ttf"); font-style: normal; font-weight: normal; } body { background-color: #eae0d5; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: helvetica; color: #0a0908; perspective: 1000px; } .container { background-color: #5e503f; padding: 15px; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.3); } .info-bar { display: flex; justify-content: space-between; align-items: center; } .info-bar label { background-color: #22333b; color: #eae0d5; font-family: "digital-7", "Courier New", serif; font-size: 30px; padding: 5px; display: block; min-width: 80px; text-align: center; box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.3); } .info-bar button { width: 60px; height: 40px; border: none; background-color: #c6ac8f; color: #0a0908; font-size: 25px; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } #panel { display: flex; flex-direction: column; margin-top: 20px; } .cell { width: 30px; height: 30px; background-color: #eae0d5; text-indent: -9999px; cursor: pointer; font-size: 12px; } .cell.flagged { text-indent: 0; cursor: default; } .cell.pressed { text-indent: 0; background-color: #d9c7b3; border: 1px solid #c6ac8f; cursor: default; } .cell.pressed.no-visible { text-indent: -9999px; } .cell.one { color: royalblue; } .cell.two { color: forestgreen; } .cell.three { color: firebrick; } .cell.four { color: #270066; } .cell.five { color: brown; } .cell.six { color: cyan; } .cell.seven { color: magenta; } #lossBanner, #victoryBanner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(90deg); background-color: #22333b; color: #eae0d5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px; transition: all 0.3s ease-in-out; } #lossBanner label, #victoryBanner label { font-size: 30px; margin-bottom: 15px; } #lossBanner button, #victoryBanner button { background-color: #5e503f; border: none; color: #eae0d5; font-size: 20px; padding: 10px; width: 200px; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.5); } #lossBanner button:hover, #victoryBanner button:hover { box-shadow: inset 0px -100px 50px rgba(0, 0, 0, 0.5); color: #c6ac8f; } #lossBanner.show, #victoryBanner.show { transform: translate(-50%, -50%); } @media only screen and (max-width: 1000px) { .container #panel .cell { width: 21px; height: 21px; font-family: 8px !important; border: 1px solid #5e503f; } } @media only screen and (max-width: 700px) { .container #panel .cell { width: 17px; height: 17px; font-family: 4px !important; border: none; box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5); } } @media only screen and (max-width: 500px) { .container #panel .cell { width: 13px; height: 13px; font-family: 2px !important; border: none; box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5); } } </style> </head> <body > <div id="lossBanner"> <label>Congratulations! you loose</label> <label>Play again?</label> <button id="btnResetLost">Yes</button> </div> <div id="victoryBanner"> <label>Congratulations! you win</label> <label>Play again?</label> <button id="btnResetVictory">Yes</button> </div> <div class="container"> <div class="info-bar"> <label id="lblTime">00:00</label> <button id="btnReset">🙂</button> <label id="lblMines">000</label> </div> <div id="panel"></div> </div> <script > const rows = 15; const cols = 30; const totalMines = 99; let lossCondition = false; let winCondition = false; let mines; let buttons; let flags; let timer; let seconds = 0; const fill = () => { for (let i = 0; i < totalMines; i++) { const y = Math.floor(Math.rand.........完整代码请登录后点击上方下载按钮下载查看
网友评论0