-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
161 lines (147 loc) · 4.94 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
const yourShip = document.querySelector('.player-shooter');
const playArea = document.querySelector('#main-play-area');
const aliensImg = ['img/monster1.png', 'img/monster2.png', 'img/monster3.png'];
const instructionsText = document.querySelector('.game-instructions');
const startButton = document.querySelector('.start-button');
let alienInterval;
//movimento de atirar
function flyShip(event) {
if(event.key === 'ArrowUp') {
event.preventDefault();
moveUp();
} else if(event.key === 'ArrowDown') {
event.preventDefault();
moveDown();
} else if(event.key === " ") {
event.preventDefault();
fireLaser();
}
}
//subir
function moveUp() {
let topPosition = getComputedStyle(yourShip).getPropertyValue('top');
if(topPosition === "0px") {
return
} else {
let position = parseInt(topPosition);
position -= 50;
yourShip.style.top = `${position}px`;
}
}
//descer
function moveDown() {
let topPosition = getComputedStyle(yourShip).getPropertyValue('top');
if(topPosition === "510px"){
return
} else {
let position = parseInt(topPosition);
position += 50;
yourShip.style.top = `${position}px`;
}
}
//função de tiro
function fireLaser() {
let laser = createLaserElement();
playArea.appendChild(laser);
moveLaser(laser);
}
function createLaserElement() {
let xPosition = parseInt(window.getComputedStyle(yourShip).getPropertyValue('left'));
let yPosition = parseInt(window.getComputedStyle(yourShip).getPropertyValue('top'));
let newLaser = document.createElement('img');
newLaser.src = 'img/shoot.png';
newLaser.classList.add('laser');
newLaser.style.left = `${xPosition}px`;
newLaser.style.top = `${yPosition - 10}px`;
return newLaser;
}
function moveLaser(laser) {
let laserInterval = setInterval(() => {
let xPosition = parseInt(laser.style.left);
let aliens = document.querySelectorAll('.alien');
aliens.forEach((alien) => { //comparando se cada alien foi atingido, se sim, troca o src da imagem
if(checkLaserCollision(laser, alien)) {
alien.src = 'img/explosion.png';
alien.classList.remove('alien');
alien.classList.add('dead-alien');
}
})
if(xPosition === 340) {
laser.remove();
} else {
laser.style.left = `${xPosition + 8}px`;
}
}, 10);
}
//criando inimigos aleatórios
function createAliens() {
let newAlien = document.createElement('img');
let alienSprite = aliensImg[Math.floor(Math.random() * aliensImg.length)]; //sorteio de imagens
newAlien.src = alienSprite;
newAlien.classList.add('alien');
newAlien.classList.add('alien-transition');
newAlien.style.left = '370px';
newAlien.style.top = `${Math.floor(Math.random() * 330) + 30}px`;
playArea.appendChild(newAlien);
moveAlien(newAlien);
}
//movimentando inimigos
function moveAlien(alien) {
let moveAlienInterval = setInterval(() => {
let xPosition = parseInt(window.getComputedStyle(alien).getPropertyValue('left'));
if(xPosition <= 50) {
if(Array.from(alien.classList).includes('dead-alien')) {
alien.remove();
} else {
gameOver();
}
} else {
alien.style.left = `${xPosition - 4}px`;
}
}, 30);
}
//função colisão
function checkLaserCollision(laser, alien) {
let laserTop = parseInt(laser.style.top);
let laserLeft = parseInt(laser.style.left);
let laserBottom = laserTop - 20;
let alienTop = parseInt(alien.style.top);
let alienLeft = parseInt(alien.style.left);
let alienBottom = alienTop - 30;
if(laserLeft != 340 && laserLeft + 40 >= alienLeft) {
if(laserTop <= alienTop && laserTop >= alienBottom) {
return true;
} else {
return false;
}
} else {
return false;
}
}
//inicio do jogo
startButton.addEventListener('click', (event) => {
playGame();
})
function playGame() {
startButton.style.display = 'none';
instructionsText.style.display = 'none';
window.addEventListener('keydown', flyShip);
alienInterval = setInterval(() => {
createAliens();
}, 2000);
}
//game over
function gameOver() {
window.removeEventListener('keydown', flyShip);
clearInterval(alienInterval);
let aliens = document.querySelectorAll('.alien');
aliens.forEach((alien) => alien.remove());
let lasers = document.querySelectorAll('.laser');
lasers.forEach((laser) => laser.remove());
setTimeout(() => {
alert('GAME OVER!');
yourShip.style.top = "250px";
startButton.style.display = "block";
instructionsText.style.display = "block";
});
}