├── E7-DKz2WYAIPQKp.png
├── space-inviders-timed
├── assets
│ ├── nave.png
│ ├── laser.png
│ ├── pngegg.png
│ ├── explosion.jpg
│ └── E7-DKz2WYAIPQKp.png
├── index.html
├── styles.css
└── app.js
└── README.md
/E7-DKz2WYAIPQKp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/E7-DKz2WYAIPQKp.png
--------------------------------------------------------------------------------
/space-inviders-timed/assets/nave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/space-inviders-timed/assets/nave.png
--------------------------------------------------------------------------------
/space-inviders-timed/assets/laser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/space-inviders-timed/assets/laser.png
--------------------------------------------------------------------------------
/space-inviders-timed/assets/pngegg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/space-inviders-timed/assets/pngegg.png
--------------------------------------------------------------------------------
/space-inviders-timed/assets/explosion.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/space-inviders-timed/assets/explosion.jpg
--------------------------------------------------------------------------------
/space-inviders-timed/assets/E7-DKz2WYAIPQKp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dellamora/sapace-invaders/HEAD/space-inviders-timed/assets/E7-DKz2WYAIPQKp.png
--------------------------------------------------------------------------------
/space-inviders-timed/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Space Invaders
7 |
8 |
9 |
10 | Score: 0
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## About The Project
2 |
3 | 
4 |
5 | A simple Space Invaders game.
6 |
7 |
8 | ### Built With
9 |
10 | * CSS
11 | * HTML
12 | * JavaScript
13 |
14 |
15 |
16 |
17 |
18 | ## Contact
19 |
20 | Twitter: [@francidellamora](https://twitter.com/francidellamora)
21 |
22 | Project Link: [https://github.com/francidellamora/Space-Invaders](https://github.com/francidellamora/Space-Invaders)
23 |
--------------------------------------------------------------------------------
/space-inviders-timed/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: black;
3 | background-repeat: no-repeat;
4 | background-size: cover;
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
9 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
10 | sans-serif;
11 | -webkit-font-smoothing: antialiased;
12 | -moz-osx-font-smoothing: grayscale;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | flex-direction: column;
17 | min-height: 100vh;
18 | }
19 |
20 | .btn {
21 | padding: 5px 20px;
22 | background: #ab7fea;
23 | border-radius: 20px;
24 | border: none;
25 | }
26 | .grid {
27 | width: 300px;
28 | height: 300px;
29 | border: solid #ab7fea 1px;
30 | display: flex;
31 | flex-wrap: wrap;
32 | background-color: black;
33 | }
34 |
35 | .grid div {
36 | width: 20px;
37 | height: 20px;
38 | }
39 |
40 | .invader {
41 | background-image: url("./assets/pngegg.png");
42 | background-repeat: no-repeat;
43 | background-size: cover;
44 | }
45 | .results {
46 | color: #ab7fea;
47 | }
48 |
49 | .shooter {
50 | background-image: url("./assets/nave.png");
51 | background-repeat: no-repeat;
52 | background-size: cover;
53 | }
54 |
55 | .laser {
56 | background-image: url("./assets/laser.png");
57 | background-repeat: no-repeat;
58 | background-size: cover;
59 | }
60 |
61 | .boom {
62 | background-image: url("./assets/explosion.jpg");
63 | background-repeat: no-repeat;
64 | background-size: cover;
65 | }
66 |
--------------------------------------------------------------------------------
/space-inviders-timed/app.js:
--------------------------------------------------------------------------------
1 | const grid = document.querySelector(".grid");
2 | const resultsDisplay = document.querySelector(".results");
3 | const button = document.querySelector(".btn");
4 |
5 | let currentShooterIndex = 202;
6 | let width = 15;
7 | let direction = 1;
8 | let invadersId;
9 | let goingRight = true;
10 | let aliensRemoved = [];
11 | let results = 0;
12 | let play = false;
13 |
14 | button.onclick = (e) => {
15 | for (let i = 0; i < 225; i++) {
16 | const square = document.createElement("div");
17 | grid.appendChild(square);
18 | }
19 |
20 | const squares = Array.from(document.querySelectorAll(".grid div"));
21 |
22 | const alienInvaders = [
23 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 30,
24 | 31, 32, 33, 34, 35, 36, 37, 38, 39,
25 | ];
26 |
27 | function draw() {
28 | for (let i = 0; i < alienInvaders.length; i++) {
29 | if (!aliensRemoved.includes(i)) {
30 | squares[alienInvaders[i]].classList.add("invader");
31 | }
32 | }
33 | }
34 |
35 | function remove() {
36 | for (let i = 0; i < alienInvaders.length; i++) {
37 | squares[alienInvaders[i]].classList.remove("invader");
38 | }
39 | }
40 |
41 | squares[currentShooterIndex].classList.add("shooter");
42 |
43 | function moveShooter(e) {
44 | squares[currentShooterIndex].classList.remove("shooter");
45 | switch (e.key) {
46 | case "ArrowLeft":
47 | if (currentShooterIndex % width !== 0) currentShooterIndex -= 1;
48 | break;
49 | case "ArrowRight":
50 | if (currentShooterIndex % width < width - 1) currentShooterIndex += 1;
51 | break;
52 | }
53 | squares[currentShooterIndex].classList.add("shooter");
54 | }
55 | document.addEventListener("keydown", moveShooter);
56 |
57 | function moveInvaders() {
58 | const leftEdge = alienInvaders[0] % width === 0;
59 | const rightEdge =
60 | alienInvaders[alienInvaders.length - 1] % width === width - 1;
61 | remove();
62 |
63 | if (rightEdge && goingRight) {
64 | for (let i = 0; i < alienInvaders.length; i++) {
65 | alienInvaders[i] += width + 1;
66 | direction = -1;
67 | goingRight = false;
68 | }
69 | }
70 |
71 | if (leftEdge && !goingRight) {
72 | for (let i = 0; i < alienInvaders.length; i++) {
73 | alienInvaders[i] += width - 1;
74 | direction = 1;
75 | goingRight = true;
76 | }
77 | }
78 |
79 | for (let i = 0; i < alienInvaders.length; i++) {
80 | alienInvaders[i] += direction;
81 | }
82 |
83 | draw();
84 |
85 | if (squares[currentShooterIndex].classList.contains("invader", "shooter")) {
86 | resultsDisplay.innerHTML = "GAME OVER";
87 | clearInterval(invadersId);
88 | }
89 |
90 | for (let i = 0; i < alienInvaders.length; i++) {
91 | if (alienInvaders[i] > squares.length) {
92 | resultsDisplay.innerHTML = "GAME OVER";
93 | clearInterval(invadersId);
94 | }
95 | }
96 | if (aliensRemoved.length === alienInvaders.length) {
97 | resultsDisplay.innerHTML = "YOU WIN";
98 | clearInterval(invadersId);
99 | }
100 | }
101 | invadersId = setInterval(moveInvaders, 600);
102 | function shoot(e) {
103 | let laserId;
104 | let currentLaserIndex = currentShooterIndex;
105 | function moveLaser() {
106 | squares[currentLaserIndex].classList.remove("laser");
107 | currentLaserIndex -= width;
108 | squares[currentLaserIndex].classList.add("laser");
109 |
110 | if (squares[currentLaserIndex].classList.contains("invader")) {
111 | squares[currentLaserIndex].classList.remove("laser");
112 | squares[currentLaserIndex].classList.remove("invader");
113 | squares[currentLaserIndex].classList.add("boom");
114 |
115 | setTimeout(
116 | () => squares[currentLaserIndex].classList.remove("boom"),
117 | 300
118 | );
119 | clearInterval(laserId);
120 |
121 | const alienRemoved = alienInvaders.indexOf(currentLaserIndex);
122 | aliensRemoved.push(alienRemoved);
123 | results++;
124 | resultsDisplay.innerHTML = "Score: " + results;
125 | console.log(aliensRemoved);
126 | }
127 | }
128 | switch (e.key) {
129 | case "ArrowUp":
130 | laserId = setInterval(moveLaser, 100);
131 | }
132 | }
133 |
134 | document.addEventListener("keydown", shoot);
135 | };
136 |
--------------------------------------------------------------------------------