js实现一个点击跳跃逃离房屋坍塌小游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现一个点击跳跃逃离房屋坍塌小游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: "Open Sans", sans-serif; background-color: #111; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .game { position: relative; width: 960px; height: 340px; overflow: hidden; background-image: linear-gradient(#001, #200); box-shadow: 0 0 1em #fff1; } .score { position: absolute; top: 0.5em; left: 0.5em; } .msg { position: absolute; top: 2em; left: 50%; font-size: 1.2em; transform: translateX(-50%); text-align: center; transition: opacity 0.25s; } .msg.off { opacity: 0; } .player { position: absolute; top: var(--player-y, 320px); left: var(--player-x, 480px); transform: translate(-100%, -100%); width: 24px; height: 24px; background-size: contain; } .player.idle { background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-idle.gif"); } .player.run { background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-run.gif"); } .player.jump { background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-jump.gif"); } .player.dead { background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-dead.gif"); } .building { position: absolute; bottom: 20px; left: var(--building-x, 960px); border: solid #0007; border-width: 0 1px; } .building_fragment { position: absolute; width: 25%; height: 33.334%; background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/building02.png"); background-size: 1600% 300%; filter: hue-rotate(var(--hue)); } .building_fragment:nth-child(4n+1) { left: 0%; background-position-x: calc(var(--buildingImageX, 0%) + 0%); } .building_fragment:nth-child(4n+2) { left: 25%; background-position-x: calc(var(--buildingImageX, 0%) + 6.25%); } .building_fragment:nth-child(4n+3) { left: 50%; background-position-x: calc(var(--buildingImageX, 0%) + 12.5%); } .building_fragment:nth-child(4n+4) { left: 75%; background-position-x: calc(var(--buildingImageX, 0%) + 18.75%); } .building_fragment:nth-child(n+1):nth-child(-n+4) { top: 0%; background-position-y: 0%; } .building_fragment:nth-child(n+5):nth-child(-n+8) { top: 33.334%; background-position-y: 50%; } .building_fragment:nth-child(n+9):nth-child(-n+12) { top: 66.668%; background-position-y: 100%; } .building.destroy .building_fragment { z-index: 100; -webkit-animation: destroy 1s ease-out forwards; animation: destroy 1s ease-out forwards; } @-webkit-keyframes destroy { to { transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); opacity: 0; } } @keyframes destroy { to { transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); opacity: 0; } } .building.destroy::before { content: ""; position: absolute; top: calc(50% - 5px); right: 90%; width: 320px; height: 10px; border-radius: 5px; background-image: linear-gradient(#f000, #f00, #f000); -webkit-animation: laserOff 0.5s ease-out forwards; animation: laserOff 0.5s ease-out forwards; } @-webkit-keyframes laserOff { to { opacity: 0; } } @keyframes laserOff { to { opacity: 0; } } .road { position: absolute; bottom: 0; width: calc(100% + 10px); height: 20px; background-image: linear-gradient(#555, #333); } .road::after { content: ""; position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient(90deg, #aaa 0px 5px, #aaa0 5px 10px); } </style> </head> <body > <!-- Coded live on Component Carousel --> <!-- https://www.youtube.com/watch?v=atxvy-FVz4Y --> <div class="game"> <div class="player idle"></div> <div class="buildings"></div> <div class="road"></div> <div class="score">Score: 0</div> <div class="msg">Click to Start...</div> </div> <script> // DOM variables const scoreDiv = document.querySelector('.score'); const msgDiv = document.querySelector('.msg'); const gameContainer = document.querySelector('.game'); const playerDiv = document.querySelector('.player'); const buildingsDiv = document.querySelector('.buildings'); const road = document.querySelector('.road'); // Game const / variables const g = 0.098; const buildings = []; const player = { x: 320, y: 0, v: 0 }; let gameStatus = 'start'; let speed, score, nextBuildingX, gameProgress, lastHeight, lastTime; // On click event gameContainer.addEventListener('click', () => { switch (gameStatus) { case "start": case "end": startGame(); break; case "on": jump(); break;} }); // document.addEventListener('keydown.........完整代码请登录后点击上方下载按钮下载查看
网友评论0