纯css编写的h5蹦跳小游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CSS Runner</title> <style> body { background-color: #34495e; color: #fff; font-family: sans-serif; } /* Game style */ input { display: none; } .game { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; height: 90vh; } .buttons { margin-top: 30px; display: flex; justify-content: center; } .buttons > * { position: absolute; background-color: #9b59b6; color: #fff; font-weight: bold; height: 70px; width: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #8e44ad; cursor: pointer; display: none; user-select: none; } .buttons > *:active { opacity: 0.8; } .screen { width: 50vw; height: 30vw; border: 2px solid #2c3e50; background-color: #3498db; position: relative; overflow: hidden; } .over { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 9; background-color: #ecf0f1; flex-direction: column; justify-content: center; align-items: center; display: flex; left: -100vw; font-size: 30px; color: #2c3e50; user-select: none; } .over.start { left: initial; } .over.game_over { color: #fff; background-color: #c0392b; } .over label, .over a { background-color: #f1c40f; color: #fff; font-weight: bold; padding: 10px 20px; font-size: 20px; border: 0; cursor: pointer; text-decoration: none; } .over a { margin-top: 30px; } .ground { position: absolute; bottom: 0; width: 100%; height: 3.5vw; background-color: #cc8e35; border-top: 1.5vw solid #2ecc71; box-shadow: 0 -5px #27ae60; } .player { position: absolute; bottom: 5vw; left: 5vw; height: 4.2vw; width: 3vw; z-index: 1; } .player * { position: absolute; } .player > div { height: 100%; width: 100%; bottom: 0; } .player .head { height: 1vw; width: 1vw; left: 2vw; border-radius: 50%; background-color: #000; } .player .body { height: 2vw; width: 2px; top: 1vw; background-color: #000; left: calc(2.5vw - 1px); } .player .arm { height: 2px; width: 1vw; top: 1.6vw; left: 2.5vw; background-color: #000; } .player .leg { top: 3vw; left: calc(2.5vw - 1px); animation: 0.2s run alternate infinite linear; } .player .leg + .leg { animation-delay: 0.2s; } .player .leg:before { content: ""; position: absolute; width: 2px; height: 0.7vw; background-color: #000; transform-origin: top; transform: rotate(-60deg); } .player .leg:after { content: ""; position: absolute; width: 2px; height: 0.7vw; left: 0.6vw; top: 0.3vw; background-color: #000; transform-origin: top; transform: rotate(10deg); } .obstacle { position: absolute; height: 3vw; width: 3vw; background-color: #cc8e35; border-top: 1.5vw solid #2ecc71; box-shadow: 0 -5px #27ae60; bottom: 2vw; left: 50vw; animation: 3s obstacle-move linear; display: none; } .obstacle.victory { background-color: #e74c3c; border: 0; height: calc(5vw + 5px); bottom: 0; box-shadow: none; } /* Game logic That's where magic happens */ #s-1:checked ~ .game label[for="s-2"] { display: flex; } #s-2:checked ~ .game label[for="s-1"] { display: flex; } #s-1:checked ~ .game .player { animation: 0.3s jump-1 alternate 2 linear; } #s-2:checked ~ .game .player { animation: 0.3s jump-2 alternate 2 linear; } #o-2:checked ~ .game .player > div { animation: 0.3s jump-o-2 alternate 2 linear; } #o-3:checked ~ .game .player > div { animation: 0.3s jump-o-3 alternate 2 linear; } #o-4:checked ~ .game .player > div { animation: 0.3s jump-o-4 alternate 2 linear; } #o-5:checked ~ .game .player > div { animation: 0.3s jump-o-5 alternate 2 linear; } #win:checked ~ .game .player > div { animation: 0.3s jump-o-6 alternate 2 linear; } input[name="obstacle"]:checked ~ .game .start { display: none; } #o-1:checked ~ .game .game_over { animation: show-1 0s 2.4s forwards; } #o-1:checked ~ .game label[for="o-2"] { display: flex; left: -100vw; animation: show-hide-1 0.4s 2s linear forwards; } #o-1:checked ~ .game .obstacle-1, #o-1 ~ input[name="obstacle"]:checked ~ .game .obstacle-1 { display: block; } #o-2:checked ~ .game .game_over { animation: show-2 0s 2.4s forwards; } #o-2:checked ~ .game label[for="o-3"] { display: flex; left: -100vw; animation: show-hide-2 0.4s 2s linear forwards; } #o-2:checked ~ .game .obstacle-2, #o-2 ~ input[name="obs.........完整代码请登录后点击上方下载按钮下载查看
网友评论0