js实现跳跃避障类小游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现跳跃避障类小游戏代码,按住键盘上下左右键跳动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --tile-line-height: 30px; --tile-size: 10px; --clr: gray; --pl-clr: radial-gradient(circle at 75% 50%, white 1px, transparent 2px), radial-gradient(circle at 25% 50%, white 1px, transparent 2px), radial-gradient(circle at 75% 40%, black 3px, transparent 4px), radial-gradient(circle at 25% 40%, black 3px, transparent 4px), white; } html, body { min-width: 100vw; min-height: 100vh; overflow: hidden; margin: 0; display: grid; place-items: center; background: #111; } #game_console { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; position: relative; background: #200; text-align: center; line-height: var(--tile-line-height); font-size: 0; color: transparent; user-select: none; box-shadow: 0 20px 20px black; } #game_alert { padding: 1rem 2rem; font-size: 16px; font-family: system-ui, serif; color: white; background: rgba(0,0,0,.75); /* box-sizing: border-box; */ border: 1px dashed white; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 99999; border-radius: 50px; transition: .5s; opacity: 0; pointer-events: none; user-select: none; } h2 { margin: 0; margin-bottom: 10px; } .tile { /* outline: 1px dotted dimgray; */ } .ground { background: dimgray; box-shadow: inset 2px 2px 0 2px rgba(0,0,0,.25), inset -2px -2px 0 2px rgba(0,0,0,.5); } .door { box-shadow: none !important; } .cube { background: var(--clr); box-sizing: border-box; border-top: 5px solid rgba(0,0,0,.25); border-right: 5px solid rgba(0,0,0,.65); border-bottom: 5px solid rgba(0,0,0,.65); border-left: 5px solid rgba(0,0,0,.25); } .stripes { background: linear-gradient(to right, transparent 3px, rgba(0,0,0,.25) 2px), var(--clr); background-size: 6px 11px; background-repeat: repeat-x; background-position: 3px 5px; } .lava { background: linear-gradient(to top, orangered, gold 90%, transparent 90%); background-size: 100% 200%; background-position: 0 0; } .key, .finalgoal { box-sizing: border-box; border-top: 5px solid rgba(0,0,0,.25); border-right: 5px solid rgba(0,0,0,.65); border-bottom: 5px solid rgba(0,0,0,.65); border-left: 5px solid rgba(0,0,0,.25); } .highjump { clip-path: polygon(40% 100%, 60% 100%, 100% 0%, 0% 0%); background: linear-gradient(to bottom, aqua 3px, transparent 3px); background-size: 100% 6px; } #player, #player:after { content:''; width: var(--tile-line-height); height: var(--tile-line-height); background: transparent; position: absolute; /* left: calc(var(--tile-line-height)*27); top: calc(var(--tile-line-height)*13); */ z-index: 10000; pointer-events: none; } #player:after { background: var(--pl-clr); position: absolute; top: 0; left: 0; z-index: 10000; border-radius: 5px; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 100%, 80% 100%, 80% 80%, 20% 80%, 20% 100%, 10% 100%, 10% 80%, 0% 80%); pointer-events: none; transform-origin: 50% 100%; } .goleft:after { transform: skewX(10deg); animation: moving .25s linear infinite; } .goright:after { transform: skewX(-10deg); animation: moving .25s linear infinite; } @keyframes moving { 50% { clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 80%, 80% 100%, 70% 100%, 70% 80%, 30% 80%, 30% 100%, 20% 100%, 20% 80%, 0% 80%) } } #level_mask { width: 200vw; height: 200vw; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0), black 12.5%); position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); opacity: 1; } .rocket { /* opacity: 0; */ } #big_rocket { width: 40px; height: 125px; background: linear-gradient(to right, transparent 45%, firebrick 45%, firebrick 55%, transparent 55%), radial-gradient(circle at 50% 40%, rgba(255,255,255,1) 10%, #aaa 11%, #aaa 15%, transparent 16%), linear-gradient(to right, transparent 50%, rgba(0,0,0,.1) 50%), linear-gradient(to bottom, firebrick 12%, transparent 12%), lightgray; background-size: 100% 40%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 50% 95%, 0 0, 0 0, 0 0, 0 0; background-repeat: no-repeat; border-radius: 50px 50px 50px 50px / 200px 200px 10px 10px; position: absolute; left: 54.25%; top: 0; box-shadow: 0 15px 0 -5px gray; } #big_rocket:before { content:''; width: 200%; height: 50%; position: absolute; top: 55%; left: -50%; background: radial-gradient(circle at 50% 100%, transparent 50%, firebrick 51%); clip-path: polygon(0% 0%, 25% 0%, 25% 100%, 75% 100%, 75% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 100% 100% 0 0; } #big_rocket:after { content:''; width: 60%; height: 25%; position: absolute; top: 108%; left: 20%; background: linear-gradient(to bottom, orangered, gold); border-radius: 0 0 25% 25%; filter: blur(2px); opacity: .75; animation: blast_off .75s linear infinite; } @keyframes blast_off { 33% { background: linear-gradient(to bottom, orangered 25%, gold 75%); } 66% { background: linear-gradient(to bottom, orangered 50%, gold 90%); } } .adios { animation: adios 2s ease-in forwards; } @keyframes adios { 100% { transform: translateY(-200%); opacity: 0; } } </style> </head> <body> <div id='game_console'> <div id='player'><div id='level_mask'></div></div> <div id='big_rocket'></div> <div id='game_alert'></div> </div> <script> const gc = document.querySelector('#game_console') const ga = document.querySelector('#game_alert') const gc_loc = gc.getBoundingClientRect() const pl = document.querySelector('#player') var cols = 48 // multiple of 16 var rows = 27 // multiple of 9 const tile_size = gc_loc.width*(100/cols/100) document.body.style.setProperty('--tile-line-height', tile_size+'px') pl.style.top = (tile_size*13) + 'px' pl.style.left = (tile_size*27) + 'px' var pl_loc = pl.getBoundingClientRect() gc.style.width = '1000px' gc.style.height = tile_size*rows+'px' var gravity = 8, kd, x = pl_loc.left, x_speed = 5, pb_y = 0, score = 0, rot = 0, data_p = 0, bonus = 1, dead = false, kd_list = [], d = {}, highjump = false, timer = 0; const level = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,8,8,0,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,0, 0,1,'B',1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,8,8,8,1,9,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,0, 0,1,0,1,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,1,0,8,8,0,0,0,1,1,1,1,1,1,1,0,0,1,1,1,0,0,1,1,0, 0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,8,8,0,0,0,1,1,1,1,1,1,1,1,0,0,1,1,0,1,1,1,0, 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,8,8,0,0,0,1,1,1,1,1,1,1,1,0,1,1,1,0,1,1,1,0, 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,8,8,0,0,0,1,1,1,1,1,1,1,1,0,1,1,0,0,1,1,0,0, 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,8,8,0,0,0,0,0,0,1,1,1,1,1,0,1,1,1,0,1,1,1,0, 0,1,1,1,0,2,2,0,0,0,2,2,0,0,0,2,2,0,0,2,2,0,1,1,1,0,8,8,0,0,0,1,1,1,1,1,0,0,0,0,0,1,1,0,1,1,1,0, 0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,1,1,0, 0,'BD','BD',0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0,1,0,1,1,1,0, 0,1,1,1,0,1,'G',1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,0, 0,0,1,1,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,2,2,0,1,1,1,1,1,1,0,'PD','PD',0,0, 0,1,1,1,0,0,0,0,0,2,2,0,2,2,0,2,2,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0, 0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,'GD',1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0, 0,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,'GD',1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0, 0,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,'BD',0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0, 0,0,1,1,0,0,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0, 0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,'P',1,0,1,1,0,1,1,1,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0