js实现奔跑回家小游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现奔跑回家小游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --map: 0%; --map-goals: 0%; } html { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(to bottom right, #111 33%, #300); color: gray; font-family: system-ui; font-size: 12px; } * { user-select: none; } body { width: 100%; max-width: 1000px; } img { margin: 0 auto; display: grid; } #console { width: 100%; height: 400px; position: relative; background: #325139; border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,.5); perspective: 1000px; overflow: hidden; border-radius: 5px; } #console:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 75%, transparent, rgba(0,0,0,1)); z-index: 300; pointer-events: none; } #console:after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #325139, transparent 50%); z-index: 200; pointer-events: none; } #console * { user-select: none; } .stop_animation .tree, .stop_animation .pit { animation-play-state: paused !important; } #road_map { width: 250px; height: 5px; border-radius: 10px; background: linear-gradient(to right, rgba(255,255,255,.25) calc(100% - 3px), transparent calc(100% - 3px)); background-size: var(--map-goals) 100%; position: absolute; left: calc(50% - 125px); top: 15px; z-index: 500; } #road_map:before { content:''; width: 20px; height: 20px; background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/avaster.png'); background-size: 100% 100%; position: absolute; left: var(--map); top: -7.5px; transform: translateX(-50%); filter: drop-shadow(0 0 1px white); transition: .25s; z-index: 10; } #road_map:after { content:''; width: 20px; height: 20px; background: white; position: absolute; left: 100%; top: -7.5px; transform: translateX(-50%); clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 20% 100%, 20% 50%, 0% 50%); } #map_color { width: var(--map); height: 5px; border-radius: 10px; background: #cc0000; position: absolute; left: 0; top: 0; transition: .25s; } #start_btn { width: 75%; max-width: 75ch; min-width: 300px; padding: 2rem 2rem 4rem 2rem; font-family: system-ui; background: #cc0000; text-align: center; font-size: 20px; letter-spacing: 3px; font-weight: 100; color: white; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); filter: drop-shadow(0 5px 10px black); cursor: pointer; box-sizing: border-box; z-index: 500; border-radius: .5rem; transition: .75s; } #start_btn:before { content: ''; width: 100%; max-width: 100px; height: 100px; background-image: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/avaster.png'); background-size: 50% 50%; background-repeat: no-repeat; background-position: 50% 50%; box-sizing: border-box; border-radius: 50%; position: absolute; left: calc(50% - 50px); margin: 0 auto; transform: translateY(-75%); background-color: inherit; } #start_btn span { text-transform: uppercase; font-weight: 700; font-size: 24px; } .hide_start_btn { opacity: 0 !important; transform: translate(-50%,-75%) !important; pointer-events: none !important; } #game_track { width: 100%; max-width: 320px; height: 150%; /* outline: 1px solid red; */ margin: 0 auto; position: relative; transform: translateY(-17.15%) rotateX(60deg); background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/track.png'); overflow: hidden; box-shadow: inset 0 30px 25px 25px rgba(131,158,100, 0.1); border-radius: 3rem 3rem 0 0; } #game_track:after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #325139, transparent 50%); z-index: 200; pointer-events: none; } .pit { width: 100%; height: 50px; position: absolute; top: -50px; left: 0; background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/pit.png'); box-sizing: border-box; filter: drop-shadow(0 -5px rgba(0,0,0,.5)); animation: pit 3s linear forwards; } @keyframes pit { 100% { top: 100%; } } #game_player { width: 50px; aspect-ratio: 1 / 1; background-size: 300% auto; position: absolute; left: calc(50% - 25px); top: 75%; pointer-events: none; color: white; } #game_player:after { content: ''; width: 100% ; height: 100%; position: absolute; left: 0; top:0; pointer-event: none; background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/player.png'); filter: drop-shadow(0 0 1px white); animation: run .2s steps(2) alternate infinite; } @keyframes run { 0% { background-position: -200% 0; } 100% { background-position: -300% 0; } } .jump { pointer-events: auto !important; animation: jump .5s linear forwards; } @keyframes jump { 50% { transform: translateY(-50%) scale(1.2); } } .jump:after { background-position: 0 0 !important; animation: none !important; } .got_home { z-index: 300; animation: none !important; animation: red_home 1s linear forwards !important; } @keyframes red_home { 50% { top: 60%; left: calc(50% - 25px); } 100% { top: 50%; left: 50%; } } .red_dead { animation: none !important; animation: red_dead 1s linear forwards !important; } @keyframes red_dead { 25% { transform: scale(1.1) translateY(-50%); } 100% { transform: scale(0) translateY(-50%) rotateX(180deg); } } .red_wins:after { background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/success.gif') !important; background-position: 50% 50%; filter: drop-shadow(-5px 0px 1px rgba(0,0,0,.25)); } #game_wolf { width: 60px; aspect-ratio: 25 / 60; background-image: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/woffs.png'); background-size: 500% auto; background-repeat: repeat-x; position: absolute; left: calc(50% - 30px); top: 100%; pointer-events: none; z-index: 300; transform: translateY(-30%); animation: wolf .6s steps(5) infinite; } @keyframes wolf { 100% { background-position: 500% 0; } } .stop_animation #game_wolf { animation: wolf .6s steps(5) infinite, chase .5s linear forwards ; } @keyframes chase { 100% { top: 70%; transform: translateY(-30%) scale(.8); } } .wolf_wins { animation: wolf .6s steps(5) infinite, wolf_wins 1.5s linear .75s forwards !important; } @keyframes wolf_wins { 50% { opacity: 1; } 100% { opacity: 0; top: 0px; transform: translateY(-30%) scale(.5); } } .dead_wolf { aspect-ratio: 25 / 40 !important; background: url('//repo.bfw.wiki/bfwrepo/images/game/penbao/w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0