方块游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Block Blaster</title> <style> @import url("https://fonts.googleapis.com/css?family=VT323"); * { box-sizing: border-box; font-family: "VT323", monospace; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .game { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: black; } .game .canvas-holder { height: 600px; width: 600px; overflow: hidden; border: 5px solid #777; box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.2); border-radius: 15px; background: black; } .game p { position: absolute; color: #fff; left: 0px; font-size: 20pt; top: 20px; width: 100%; text-align: center; } .extra-screen { position: absolute; width: 600px; height: 600px; top: calc(50% - 300px); left: calc(50% - 300px); display: flex; justify-content: center; align-items: center; border-radius: 10px; } .extra-screen.hide { display: none; } .extra-screen#lose-title { background: #000; width: 590px; height: 590px; top: calc(50% - 295px); left: calc(50% - 295px); } .extra-screen .content-hold { flex: 1; margin-top: -40px; } .extra-screen h1 { margin-top: 40px; color: lime; font-size: 45pt; text-shadow: 0px 0px 15px lime; width: 100%; float: left; text-align: center; margin: 10px 0px; } .extra-screen h1 span.hide { display: none; } .extra-screen p { width: 100%; float: left; text-align: center; color: lime; font-size: 15pt; margin: 10px 0px; text-shadow: 0px 0px 15px lime; position: relative; } </style> </head> <body translate="no"> <div class="game"> <div class="canvas-holder"> <p> Score: <span id="score">0</span><br>Best Score: <span id="best-score">0</span> </p> <canvas id="canvas" width="600" height="600">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0