css+js实现拯救地球射击游戏代码
代码语言:html
所属分类:游戏
代码描述:css+js实现拯救地球射击游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { background: #222; min-height: 100vh; display: grid; place-items: center; cursor: crosshair; } body { inset: 0; display: grid; place-items: center; overflow: hidden; } .star { width: 2px; height: 2px; background: white; position: absolute; z-index: -1; pointer-events: none; } .screen_shake { --shake-amount: 5px; animation: screen_shake .25s linear forwards; } @keyframes screen_shake { 20% { margin-left: var(--shake-amount); } 40% { margin-left: calc(-1*var(--shake-amount)); } 60% { margin-left: var(--shake-amount); } 80% { margin-left: calc(-1*var(--shake-amount)); } 100% { margin-left: var(--shake-amount); } } * { user-select: none; } #ship { width: 15vmax; aspect-ratio: 1/1; position: absolute; transform-origin: 50% 50%; z-index: 9999; border-radius: 50%; } #ship:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%, MediumSeaGreen 25%, transparent 25%), radial-gradient(circle at 80% 30%, MediumSeaGreen 25%, transparent 25%), radial-gradient(circle at 110% 60%, MediumSeaGreen 25%, transparent 25%), radial-gradient(circle at 50% 125%, white 25%, transparent 25%) deepskyblue; border-radius: 50%; transform-origin: 50% 50%; transform: var(--anti-spin); z-index: -1; } #ship:after { content: ''; position: absolute; left: 2.5vmax; top: -5vmax; width: 10vmax; height: 5vmax; background: white; clip-path: polygon(50% 0%, 100% 100%, 70% 70%, 30% 70%, 0% 100%); } #bullet_point { position: absolute; width: 1px; aspect-ratio: 1/1; left: 50%; top: -4vmax; } #hits { width: 100%; text-align: center; z-index: 100; position: absolute; left: 0; top: 45%; pointer-events: none; } #kills_counter { position: absolute; left: 0; top: -3.5vmax; z-index: 100; width: 100%; text-align: center; pointer-events: none; } .bullet { width: 16px; height: 16px; background-color: white; position: absolute; left: -8px; border-radius: 50%; transform-origin: 50% 8px; transform: translate(-50%,-50%); pointer-events: none; outline-offset: 5px; outline: 1px solid red; } .asteroid { width: 50px; height: 50px; box-sizing: border-box; border: 2px solid white; background: #222; position: absolute; top: 25%; left: 25%; animation: roll 3s linear infinite; z-index: -1; /* pointer-events: none; */ } @keyframes roll { 100% { transform: rotate(360deg); } } .explode { animation-play-state: paused; pointer-events:none; border: 2px solid transparent; background: radial-gradient(circle at 50% 50%, white 3px, transparent 3px), radial-gradient(circle at 30% 53%, white 3px, transparent 3px), radial-gradient(circle at 90% 60%, white 3px, transparent 3px), radial-gradient(circle at 25% 28%, white 3px, transparent 3px), radial-gradient(circle at 23% 75%, white 3px, transparent 3px), radial-gradient(circle at 72% 25%, white 3px, transparent 3px), radial-gradient(circle at 75% 77%, white 3px, transparent 3px); animation: explode .25s linear forwards; z-index: 999999; } @keyframes explode { 100% { transform: scale(2); opacity: 0; } } </style> </head> <body > <div id='ship' class='earth'> <div id='bullet_point'></div> <div id='hits'></div> <div id='kills_counter'></div> </div> <script > setTimeout(function () { var mousePos = {}, shipPos = { x: window.innerWidth * .5, y: window.innerHeight * .5 }, vector = {}, angle, b_speed = 10, ast_speed = 1, kills = 0, impacts = 0, planet_life = 100, ast_attack_damage = 10; function screenShake() { document.body.classList.add('screen_shake'); document.body.onanimationend = function () { this.classList.remove('screen_shake'); }; } function rotateShip(e) { mousePos = { x: e.clientX, y: e.clientY }; vector = { x: mousePos.x - shipPos.x, y: mousePos.y - shipPos.y }; angle = Math.atan2(vector.y, vector.x) * (180 / Math.PI) + 90; ship.style.transform = 'rotate(' + angle + 'deg)'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0