├── .github
    └── stale.yml
├── README.md
├── images
    ├── arrows.png
    ├── car.png
    ├── logo.png
    └── road.png
├── index.html
├── js
    └── index.js
└── styles
    └── style.css


/.github/stale.yml:
--------------------------------------------------------------------------------
 1 | # Configuration for probot-stale - https://github.com/probot/stale
 2 | 
 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale
 4 | daysUntilStale: 21
 5 | 
 6 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
 7 | exemptLabels:
 8 |   - bug
 9 |   - enhancement
10 | 
11 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
12 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
13 | daysUntilClose: 7
14 | 
15 | # Label to use when marking as stale
16 | staleLabel: stale
17 | 
18 | # Comment to post when marking as stale. Set to `false` to disable
19 | markComment: >
20 |   This pull request has been automatically marked as stale because it didn't have any recent activity. It will be closed if no further activity occurs. Thank you
21 |   for your contributions.
22 | closeComment: >
23 |   This pull request is closed. Thank you.
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)
 2 | 
 3 | # LAB | Canvas Race Car
 4 | 
 5 | <details>
 6 |   <summary>
 7 |    <h2>Learning Goals</h2>
 8 |   </summary>
 9 | 
10 |   This exercise allows you to practice and apply the concepts and techniques taught in class. 
11 | 
12 |   Upon completion of this exercise, you will be able to:
13 | 
14 |   - Use Canvas API to create a simple 2d game.
15 |   - Implement game logic and UI using HTML, CSS, and JavaScript, including start, game, and end game screens.
16 |   - Draw shapes using Canvas API methods.
17 |   - Change the style and color of the Canvas shapes.
18 |   - Create animations in Canvas using a game loop that continuously updates the screen.
19 |   - Load and display images of different formats on canvas.
20 |   - Display text on canvas.
21 |   - Handle user input and events to control game elements.
22 |   - Create and display randomly generated obstacles to add complexity to the game.
23 | 
24 |   <br>
25 |   <hr> 
26 | 
27 | </details>
28 | 
29 | ## Introduction
30 | 
31 | We are ready to start making some games with `canvas` help, so in this first exercise, we will do a **Car Race** using some basic animations we learned today.
32 | 
33 | Remember, you have the Learning Units to check any concept you need. We are working with the `2D` context, so you should think the canvas is a cartesian plane, where you can move elements changing their position in any of the `axis`.
34 | 
35 | ## Requirements
36 | 
37 | - Fork this repo
38 | - Clone this repo
39 | 
40 | ## Submission
41 | 
42 | - Upon completion, run the following commands:
43 | 
44 |   ```
45 |   git add .
46 |   git commit -m "done"
47 |   git push origin master
48 |   ```
49 | 
50 | - Create Pull Request so your TAs can check up your work.
51 | 
52 | ## Instructions
53 | 
54 | ### Iteration 1: Draw the game board
55 | 
56 | ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ab5a6ba28003829bd3d8d485feeee649.png)
57 | 
58 | The first thing we need is to create our board. The left side of the image is already on the HTML file, but when we click on the **Start Game** button, we need to create the canvas and display the road.
59 | 
60 | The canvas HTML element is already part of the HTML starter code provided in the `index.html` file. In addition, you can find the image of the road in the `images` folder.
61 | 
62 | ### Iteration 2: Draw the car
63 | 
64 | ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_9a8f35a079a1343f39cee4028ab8a081.png)
65 | 
66 | Once we have our road, we need the player's car - the same as the road. In the `images` folder, you will find a `.png` file you should use.
67 | 
68 | ### Iteration 3: Make the car move right and left
69 | 
70 | In our game, the player can only move the car to the right and left. Using the `left` and `right` arrows, the player should be able to move the car.
71 | 
72 | :bulb: Remember the boundaries!
73 | 
74 | ### Iteration 4: Create obstacles
75 | 
76 | ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_618fa6bbeed08f1e74b9457af1ecaf4c.png)
77 | 
78 | Now let's make this interesting. First, we should create obstacles that show up every specific amount of time.
79 | 
80 | They will always start in the position **0** of the `y` axis (the obstacles will be coming from the top of the canvas), but you should make them appear in a random place on the `x`-axis.
81 | 
82 | ### Iteration 5: Move the obstacles
83 | 
84 | To move the obstacles, we need to update our `canvas` continuously. In this iteration, you need to continually change the position of the obstacles in every update, making them move down the road.
85 | 
86 | ### Iteration 6: Points, points, points
87 | 
88 | Oh! If we want to challenge somebody, we need to quantify who is making it better. So we need to add a **score**. Add a method to count points while you keep the car avoiding obstacles.
89 | 
90 | ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e4b1a09cee1b1a827a2c68023d0d2b1f.png)
91 | 
92 | ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_4e64a09180fd0add2766f7e28ebce6bf.png)
93 | 
94 | <br>
95 | 
96 | **Happy coding!** :heart:


--------------------------------------------------------------------------------
/images/arrows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-canvas-race-car/fd192dda0e305410642448f6eeeddb591d60f21d/images/arrows.png


--------------------------------------------------------------------------------
/images/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-canvas-race-car/fd192dda0e305410642448f6eeeddb591d60f21d/images/car.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-canvas-race-car/fd192dda0e305410642448f6eeeddb591d60f21d/images/logo.png


--------------------------------------------------------------------------------
/images/road.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-canvas-race-car/fd192dda0e305410642448f6eeeddb591d60f21d/images/road.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="styles/style.css" />
 8 |     <title>Race Car</title>
 9 |   </head>
10 |   <body>
11 |     <div class="game-intro">
12 |       <img src="./images/logo.png" alt="" class="logo-img" />
13 |       <br />
14 |       <button id="start-button">StartGame</button>
15 |       <p>Use the left and right arrow to control the car!</p>
16 |       <img src="./images/arrows.png" alt="" class="arrows-img" />
17 |     </div>
18 | 
19 |     <div id="game-board">
20 |       <canvas id="canvas" width="500" height="700"></canvas>
21 |     </div>
22 | 
23 |     <script type="text/javascript" src="js/index.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | window.onload = () => {
2 |   document.getElementById('start-button').onclick = () => {
3 |     startGame();
4 |   };
5 | 
6 |   function startGame() {}
7 | };
8 | 


--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   padding: 0;
 3 |   text-align: center;
 4 | }
 5 | 
 6 | .game-intro {
 7 |   float: left;
 8 |   padding: 0% 10%;
 9 | }
10 | 
11 | .game-intro p {
12 |   font-size: 18px;
13 |   font-family: "Verdana"
14 | }
15 | 
16 | .logo-img {
17 |   width: 350px;
18 | }
19 | 
20 | .arrows-img {
21 |   width: 150px;
22 | }
23 | 
24 | body button {
25 |   font-size: 30px;
26 |   background-color: #870007;
27 |   color: #fff;
28 |   padding: 20px 40px;
29 |   border: 0;
30 |   box-shadow: 0;
31 |   border-radius: 5px;
32 |   margin-bottom: 20px;
33 | }
34 | 
35 | #game-board {
36 |     float: left;
37 |     padding: 20px 0px;
38 | }
39 | 


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