Как обновлять label меняя значение на число и как с помощью style.display начать отображение скрытого текста?
Не получается выводить счёт при попадании. Так же я скрыл часть кода который должен показываться в конце, а должен пропасть. field пропадает, но gameOver не показывается.
var counter = 0;
var numInvaders = 16;
var base = {
left: 250,
top: 500
};
var missiles = [];
var invaders = [
{ left: 100, top: 50 },
{ left: 150, top: 50 },
{ left: 200, top: 50 },
{ left: 250, top: 50 },
{ left: 300, top: 50 },
{ left: 350, top: 50 },
{ left: 400, top: 50 },
{ left: 450, top: 50 },
{ left: 100, top: 85 },
{ left: 150, top: 85 },
{ left: 200, top: 85 },
{ left: 250, top: 85 },
{ left: 300, top: 85 },
{ left: 350, top: 85 },
{ left: 400, top: 85 },
{ left: 450, top: 85 }
];
var score = 0;
document.onkeydown = function(e) {
if (e.keyCode === 37) {
// Left(Left arrow)
base.left = base.left - 15;
}
if (e.keyCode === 39) {
// Right(Right arrow)
base.left = base.left + 15;
}
if (e.keyCode === 32) {
// Fire(Space)
missiles.push({
left: base.left + 20,
top: base.top - 20
});
displayMissiles();
}
displayBase();
}
function displayBase() {
document.getElementById("base").style.left = base.left + "px";
document.getElementById("base").style.top = base.top + "px";
}
function displayInvaders() {
document.getElementById("invaders").innerHTML = ""
for (var i = 0; i < invaders.length; i++) {
document.getElementById("invaders").innerHTML += `<div class="invader" style="left:${invaders[i].left}px; top:${invaders[i].top}px"></div>`;
}
for (var i = 0; i < invaders.length; i++) {
invaders[i].top = invaders[i].top + 5;
}
}
function displayMissiles() {
document.getElementById("missiles").innerHTML = ""
for (var i = 0; i < missiles.length; i++) {
document.getElementById("missiles").innerHTML += `<div class="missile" style="left:${missiles[i].left}px; top:${missiles[i].top}px"></div>`;
}
}
function moveMissiles() {
for (var i = 0; i < missiles.length; i++) {
missiles[i].top = missiles[i].top - 30;
}
}
function collisionDetection() {
for (var invader = 0; invader < invaders.length; invader++) {
for (var missile = 0; missile < missiles.length; missile++) {
if (
missiles[missile].left >= invaders[invader].left &&
missiles[missile].left <= (invaders[invader].left + 30) &&
missiles[missile].top <= (invaders[invader].top + 30) &&
missiles[missile].top >= invaders[invader].top &&
) {
invaders.splice(invader, 1);
missiles.splice(missile, 1);
score+=20;
numInvaders--;
}
}
}
}
function drawScore(){
document.getElementById("Score").innerHTML=""+score;
}
var timer=setInterval(function(){startTimer()},500);
function startTimer(){
if(counter == 70) {
clearInterval(timer);
} else {
displayMissiles();
moveMissiles();
displayInvaders();
collisionDetection();
isGameOver();
counter++;
drawScore();
}
}
function isGameOver(){
if (numInvaders==0 || counter == 69){
document.getElementById("field").style.display = "none";
document.getElementById("gameOver").style.display = "inline";
}
}
body{
color: chartreuse;
background: black;
}
.title{
margin: 30px auto;
margin-left: 200px;
}
div#field {
top: 100px;
width: 600px;
height: 600px;
background-image: url('black.gif');
position: absolute;
text-align: center;
color: chartreuse;
}
div#base {
width: 72px;
height: 52px;
background-image: url('base.png');
background-repeat:no-repeat;
background-size: 50%;
position: absolute;
left: 250px;
top: 500px;
}
div#missiles {
width: 600px;
height: 600px;
position: absolute;
}
div.missile {
width: 10px;
height: 28px;
background-image: url('missile.png');
background-repeat:no-repeat;
background-size: 75%;
position: absolute;
}
div#invaders {
width: 50px;
height: 50px;
position: absolute;
}
div.invader {
width: 50px;
height: 50px;
background-image: url('invader.png');
background-repeat:no-repeat;
background-size: 75%;
position: absolute;
}
.Score {
margin-top: auto;
color: chartreuse;
}
#Score {
margin-top: auto;
color: chartreuse;
}
#gameOver {
display: none;
text-align: center;
font-size: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Space Invaders</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<h1 class="title">Space Invaders</h1>
<div id="field">
<div id="base"></div>
<div id="missiles"></div>
<div id="invaders"></div>
<div class="Score">Score:
<label id="Score">0</label>
</div>
<div id="gameOver">
<div class="Score">GAME OVER!</div>
<div class="Score">Score:
<label id="Score">0</label>
</div>
</div>
</div>
<script lang="text/javascript" src="code.js"></script>
</body>
</html>