minigame-spaceship -edit
✨ Trda sql
<html> <head> <style> #hero { width:65px; height:65px; position: absolute; } #background { background: #000000; position:absolute; width: 700px; height: 700px; left: 0px; top: 0px; } .star{ position:absolute; width:0.2em; height:0.2em; background: white; border-radius: 100%; box-shadow:0px 0px 80px 20px white; animation:wip 2.5s alternate infinite, move 1s linear infinite; } @keyframes move{ from{transform:transformY(0vh);} to{transform:translateY(15vh);} } @keyframes wip{ from{opacity:.2} to{opacity:8} } .star:nth-child(1){ top:30%; left:80%; } .star:nth-child(2){ top:80%; left:80%; } .star:nth-child(3){ top:20%; left:40%; } .star:nth-child(4){ top:80%; left:25%; } .star:nth-child(5){ top:60%; left:60%; } .star:nth-child(6){ top:10%; left:70%; } .star:nth-child(7){ top:50%; left:15%; } .star:nth-child(8){ top:15%; left:10%; } .laser { background:yellow; width: 5px; height: 20px; position: absolute; } .enemy { background: #0000ff; border-radius: 100%; width: 35px; height: 35px; position: absolute; } #score { color: #ffffff; font-size: 18pt; position: absolute; left: 20px; top: 20px; z-index:2; } #gameover { color: #ff0000; font-size: 20px; position: absolute; left: 300px; top: 350px; visibility: hidden; } </style> </head> <body> <div id="background"</div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div><img id="hero" src="https://www.seekpng.com/png/full/25-254127_spaceship-v-enemy-ship-pixel-art-png.png"></div> <div class="laser" id="laser0"></div> <div class="laser" id="laser1"></div> <div class="laser" id="laser2"></div> <div id="score"></div> <div id="gameover">GAME OVER</div> <script> var LEFT_KEY = 37; var UP_KEY = 38; var RIGHT_KEY = 39; var DOWN_KEY = 40; var SPACE_KEY = 32; var HERO_MOVEMENT = 15; var lastLoopRun = 0; var score = 0; var iterations = 0; var controller = new Object(); var enemies = new Array(); function createSprite(element, x, y, w, h) { var result = new Object(); result.element = element; result.x = x; result.y = y; result.w = w; result.h = h; return result; } function toggleKey(keyCode, isPressed) { if (keyCode == LEFT_KEY) { controller.left = isPressed; } if (keyCode == RIGHT_KEY) { controller.right = isPressed; } if (keyCode == UP_KEY) { controller.up = isPressed; } if (keyCode == DOWN_KEY) { controller.down = isPressed; } if (keyCode == SPACE_KEY) { controller.space = isPressed; } } function intersects(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; } function ensureBounds(sprite, ignoreY) { if (sprite.x < 20) { sprite.x = 20; } if (!ignoreY && sprite.y < 20) { sprite.y = 20; } if (sprite.x + sprite.w > 630) { sprite.x = 630 - sprite.w; } if (!ignoreY && sprite.y + sprite.h > 620) { sprite.y = 620 - sprite.h; } } function setPosition(sprite) { var e = document.getElementById(sprite.element); e.style.left = sprite.x + 'px'; e.style.top = sprite.y + 'px'; } function handleControls() { if (controller.up) { hero.y -= HERO_MOVEMENT; } if (controller.down) { hero.y += HERO_MOVEMENT; } if (controller.left) { hero.x -= HERO_MOVEMENT; } if (controller.right) { hero.x += HERO_MOVEMENT; } if (controller.space) { var laser = getFireableLaser(); if (laser) { laser.x = hero.x + 30; laser.y = hero.y - laser.h; } } ensureBounds(hero); } function getFireableLaser() { var result = null; for (var i = 0; i < lasers.length; i++) { if (lasers[i].y <= -120) { result = lasers[i]; } } return result; } function getIntersectingLaser(enemy) { var result = null; for (var i = 0; i < lasers.length; i++) { if (intersects(lasers[i], enemy)) { result = lasers[i]; break; } } return result; } function checkCollisions() { for (var i = 0; i < enemies.length; i++) { var laser = getIntersectingLaser(enemies[i]); if (laser) { var element = document.getElementById(enemies[i].element); element.style.visibility = 'hidden'; element.parentNode.removeChild(element); enemies.splice(i, 1); i--; laser.y = -laser.h; score += 100; } else if (intersects(hero, enemies[i])) { gameOver(); } else if (enemies[i].y + enemies[i].h >= 650) { var element = document.getElementById(enemies[i].element); element.style.visibility = 'hidden'; element.parentNode.removeChild(element); enemies.splice(i, 1); i--; } } } function gameOver() { var element = document.getElementById(hero.element); element.style.visibility = 'hidden'; element = document.getElementById('gameover'); element.style.visibility = 'visible'; } function showSprites() { setPosition(hero); for (var i = 0; i < lasers.length; i++) { setPosition(lasers[i]); } for (var i = 0; i < enemies.length; i++) { setPosition(enemies[i]); } var scoreElement = document.getElementById('score'); scoreElement.innerHTML = 'SCORE: ' + score; } function updatePositions() { for (var i = 0; i < enemies.length; i++) { enemies[i].y += 4; enemies[i].x += getRandom(7) - 3; ensureBounds(enemies[i], true); } for (var i = 0; i < lasers.length; i++) { lasers[i].y -= 12; } } function addEnemy() { var interval = 50; if (iterations > 1500) { interval = 5; } else if (iterations > 1000) { interval = 20; } else if (iterations > 500) { interval = 35; } if (getRandom(interval) == 0) { var elementName = 'enemy' + getRandom(10000000); var enemy = createSprite(elementName, getRandom(650), -40, 35, 35); var element = document.createElement('div'); element.id = enemy.element; element.className = 'enemy'; document.children[0].appendChild(element); enemies[enemies.length] = enemy; } } function getRandom(maxSize) { return parseInt(Math.random() * maxSize); } function loop() { if (new Date().getTime() - lastLoopRun > 40) { updatePositions(); handleControls(); checkCollisions(); addEnemy(); showSprites(); lastLoopRun = new Date().getTime(); iterations++; } setTimeout('loop();', 2); } document.onkeydown = function(evt) { toggleKey(evt.keyCode, true); }; document.onkeyup = function(evt) { toggleKey(evt.keyCode, false); }; var hero = createSprite('hero', 350, 620, 60, 60); var lasers = new Array(); for (var i = 0; i < 3; i++) { lasers[i] = createSprite('laser' + i, 0, -120, 2, 50); } loop(); </script> </body> </html>