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>

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 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 setPosition(sprite) {
  var e = document.getElementById(sprite.element);
  e.style.left = sprite.x + 'px';
  e.style.top = sprite.y + 'px';
}

function getFireableLaser() {
  var result = null;
  for (var i = 0; i < lasers.length; i++) {
    if (lasers[i].y <= -120) {
      result = lasers[i];
    }
  }
  return result;
}

function gameOver() {
  var element = document.getElementById(hero.element);
  element.style.visibility = 'hidden';
  element = document.getElementById('gameover');
  element.style.visibility = 'visible';
}

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>