├── .DS_Store
├── README.md
├── assets
    ├── .DS_Store
    ├── GalaxyImg.jpeg
    ├── GalaxyImg2.jpeg
    ├── GalaxyImg2.png
    ├── enemy1.png
    ├── enemy2.png
    ├── enemy3.png
    ├── pink-space-invader.png
    ├── player.png
    ├── purple-space-invader.png
    └── testgalaxy.png
├── index.html
├── script.js
└── style.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # My First Game: Space Invaders
 2 | 
 3 | ## Description
 4 | 
 5 | As part of my Software Engineering Program through Per Scholas, during the 6 week milestone, I have been tasked with creating a game. The game I have chosen to build is Space Invaders. I chose this game because it was one of the first video games I learned to play and have loved it since! 
 6 | 
 7 | Instructions: 
 8 | 
 9 | ## Tech Stack
10 | 
11 | HTML
12 | CSS
13 | Javascript
14 | 
15 | ## Upcoming Features


--------------------------------------------------------------------------------
/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/.DS_Store


--------------------------------------------------------------------------------
/assets/GalaxyImg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/GalaxyImg.jpeg


--------------------------------------------------------------------------------
/assets/GalaxyImg2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/GalaxyImg2.jpeg


--------------------------------------------------------------------------------
/assets/GalaxyImg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/GalaxyImg2.png


--------------------------------------------------------------------------------
/assets/enemy1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/enemy1.png


--------------------------------------------------------------------------------
/assets/enemy2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/enemy2.png


--------------------------------------------------------------------------------
/assets/enemy3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/enemy3.png


--------------------------------------------------------------------------------
/assets/pink-space-invader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/pink-space-invader.png


--------------------------------------------------------------------------------
/assets/player.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/player.png


--------------------------------------------------------------------------------
/assets/purple-space-invader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/purple-space-invader.png


--------------------------------------------------------------------------------
/assets/testgalaxy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyounger8/Project1-Game/78f134a8bd6e8a33271d73d0c66a17b906698864/assets/testgalaxy.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <script src="./script.js" defer></script>
 8 |     <link rel="stylesheet" href="./style.css" />
 9 |     <title>Document</title>
10 |   </head>
11 |   <body>
12 |     <div id="topPage" class="toppage">
13 |       <h1>Space Invaders</h1>
14 |     </div>
15 | 
16 |     <canvas
17 |       id="myCanvas"
18 |       class="mycanvas"
19 |       width="1000px"
20 |       height="800px"
21 |     ></canvas>
22 | 
23 |     <img
24 |       id="purpInvaderImg"
25 |       src="./assets/purple-space-invader.png"
26 |       style="display: none"
27 |     />
28 | 
29 |     <div id="bottomPg" class="bottompg">
30 |       <button id="playButton" class="playbtn">Play</button>
31 | 
32 |       <div id="scoreBoard" class="scoreboard"></div>
33 |     </div>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | //DOM - Items to Grab
 2 | const myCanvas = document.querySelector("canvas")
 3 | const c = myCanvas.getContext("2d");
 4 | // const plyBtn = document.getElementById('#playButton')
 5 | 
 6 | // Creating the Player - class
 7 | 
 8 | class Player {
 9 |   constructor() {
10 |       this.velocity = {
11 |           x: 0,
12 |           y: 0,
13 |         };
14 |     
15 |         const image = new Image();
16 |         image.src = "./assets/player.png";
17 |         image.onload = () => {
18 |             // const scale = 0.15
19 |             this.image = image
20 |             this.width = image.width 
21 |             this.height = image.height
22 |             this.position = {
23 |               x: myCanvas.width / 2 - this.width / 2,
24 |               y: myCanvas.height - this.height - 20
25 |             };
26 |         }
27 |   }
28 |   draw() {
29 |     // myCanvas.fillStyle = 'red'
30 |     // myCanvas.fillRect(this.position.x, this.position.y, this.width, this.height)
31 |     c.drawImage( 
32 |       this.image,
33 |       this.position.x, 
34 |       this.position.y,
35 |       this.width,
36 |       this.height
37 |       );
38 |     }
39 |     update(){
40 |     if (this.image){
41 |     this.draw()
42 |     this.position.x += this.velocity.x
43 |     }
44 |   }
45 | }
46 | 
47 | 
48 | const player = new Player();
49 | const keys = {
50 |   a: {
51 |     pressed: false
52 |   }
53 | }
54 | 
55 | function animate() {
56 |   requestAnimationFrame(animate);
57 |   player.update();
58 | 
59 |   if (keys.a.pressed) {
60 |     player.velocity.x = -5
61 |   } else {
62 |     player.velocity.x = 0
63 |   }
64 | }
65 | 
66 | 
67 | animate();
68 | 
69 | // if (){
70 | //   const speed = [-7, 7]
71 |   
72 | // }
73 | 
74 | // Add Event Listeners - get spaceship to move left or right based on key
75 | 
76 | const movement= myCanvas.addEventListener('keydown', ({key}) => {
77 |    switch(key) {
78 |        case 'a':
79 |         player.velocity.x = -5
80 |         break
81 |       //  case 'ArrowRight':
82 |       //   console.log('right')
83 |       //   break
84 |       //   case ' ':
85 |       //   console.log('space')
86 |       //   break
87 |     }    
88 |   
89 | })
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /* @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
 2 | 
 3 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); */
 4 | 
 5 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');
 6 |  
 7 | * {
 8 |   background-color: black;
 9 |   font-family: "Share Tech Mono", monospace;
10 | }
11 | 
12 | .mycanvas {
13 |   display: block;
14 |   margin: 0 auto;
15 |   background-image: url(./assets/GalaxyImg2.jpeg);
16 |   animation: scroll 5s linear infinite;
17 |   background-size: 100% 100%;
18 | }
19 | 
20 | @keyframes scroll {
21 |   from {
22 |     background-position-y: 0px;
23 |   }
24 |   to {
25 |     background-position-y: 800px;
26 |   }
27 | }
28 | 
29 | h1 {
30 |   text-align: center;
31 |   color: rgb(161, 104, 161);
32 |   font-family: "Press Start 2P", cursive;
33 | }
34 | 
35 | .playbtn {
36 |   padding: 10px 30px 10px 30px;
37 |   background-color: rgb(101, 126, 178);
38 |   color: white;
39 |   font-size: 20px;
40 | }
41 | 
42 | .playbtn:hover {
43 |   background-color: rgb(30, 50, 101);
44 | }
45 | 
46 | .bottompg {
47 |   margin-top: 20px;
48 |   display: flex;
49 |   justify-content: center;
50 | }
51 | 


--------------------------------------------------------------------------------