Frogger - Implementing the Cars - Revision history

Filmote at 10:21, 17 June 2024

2024-06-17T10:21:36Z

← Older revision		Revision as of 10:21, 17 June 2024
Line 10:		Line 10:
	* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]

			Throughout the tutorials, you will be prompted to complete sections of code utilising the knowledge you have just gained. If you are unable to complete the code you can simply download the starting code presented at the start of the next section as it will contain a valid solution.

	Other sections in this tutorial:		Other sections in this tutorial:

Filmote at 10:19, 17 June 2024

2024-06-17T10:19:09Z

← Older revision		Revision as of 10:19, 17 June 2024
Line 5:		Line 5:
	This tutorial is designed to be completed in order and builds on the code from the previous sections. However, you can jump to any section and download the completed code to that point and continue from that section onwards.		This tutorial is designed to be completed in order and builds on the code from the previous sections. However, you can jump to any section and download the completed code to that point and continue from that section onwards.

	The tutorial utilises two files which can be downloaded using the following links:		The tutorial utilises two files which can be downloaded using the following links. To download the files, right click on the filename and select 'Save Link As …'

	* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]
	* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]

	~~To download the files, right click on the filename and select 'Save Link As …'~~

Filmote at 10:18, 17 June 2024

2024-06-17T10:18:25Z

← Older revision		Revision as of 10:18, 17 June 2024
Line 10:		Line 10:
	* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]

	To download the files, right click on the filename and select 'Save Link As ~~...~~'		To download the files, right click on the filename and select 'Save Link As …'

Filmote at 10:17, 17 June 2024

2024-06-17T10:17:34Z

← Older revision		Revision as of 10:17, 17 June 2024
Line 7:		Line 7:
	The tutorial utilises two files which can be downloaded using the following links:		The tutorial utilises two files which can be downloaded using the following links:

	* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]
	* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]]		* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]

	~~<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">~~		To download the files, right click on the filename and select 'Save Link As ...'
	~~<span style="font-size: 160%">Your Turn</span>~~

	~~Add two additional if statements to handle the remaining two car types, Truck and Van. Their image names are Car_Truck and Car_Van respectively.~~

	~~</span>~~


	~~</div>~~

	Other sections in this tutorial:		Other sections in this tutorial:

Filmote at 10:16, 17 June 2024

2024-06-17T10:16:05Z

← Older revision		Revision as of 10:16, 17 June 2024
Line 7:		Line 7:
	The tutorial utilises two files which can be downloaded using the following links:		The tutorial utilises two files which can be downloaded using the following links:

	* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino\|Frogger.ino]]		* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]]
	* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h]]		* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]]

	<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">		<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
Line 17:		Line 17:
	</span>		</span>

	~~Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.~~

	</div>		</div>

Filmote at 10:14, 17 June 2024

2024-06-17T10:14:57Z

← Older revision		Revision as of 10:14, 17 June 2024
Line 1:		Line 1:


	== Tutorial Instructions ==		== Tutorial Instructions ==

Filmote at 10:14, 17 June 2024

2024-06-17T10:14:49Z

← Older revision		Revision as of 10:14, 17 June 2024
Line 2:		Line 2:
	== Tutorial Instructions ==		== Tutorial Instructions ==

			This tutorial is designed to be completed in order and builds on the code from the previous sections. However, you can jump to any section and download the completed code to that point and continue from that section onwards.

			The tutorial utilises two files which can be downloaded using the following links:

			* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino\|Frogger.ino]]
			* [[https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h]]

	<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">		<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">

Filmote at 10:10, 17 June 2024

2024-06-17T10:10:49Z

← Older revision		Revision as of 10:10, 17 June 2024
Line 12:		Line 12:
	Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.		Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.

	<div>		</div>

	Other sections in this tutorial:		Other sections in this tutorial:
Line 232:		Line 232:
	Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.		Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.

	<div>		</div>

Filmote at 10:10, 17 June 2024

2024-06-17T10:10:18Z

← Older revision		Revision as of 10:10, 17 June 2024
Line 1:		Line 1:

			== Tutorial Instructions ==


			<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
			<span style="font-size: 160%">Your Turn</span>

			Add two additional if statements to handle the remaining two car types, Truck and Van. Their image names are Car_Truck and Car_Van respectively.

			</span>

			Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.

			<div>

	Other sections in this tutorial:		Other sections in this tutorial:

Line 142:		Line 157:

	The <code>resetGame()</code> function has only specified the starting location for three of the six vehicles in game. Add the remaining 3 vehicles at locations (110, 41), (45, 50) and (70, 50) and of types Van, Car and Van, respectively.		The <code>resetGame()</code> function has only specified the starting location for three of the six vehicles in game. Add the remaining 3 vehicles at locations (110, 41), (45, 50) and (70, 50) and of types Van, Car and Van, respectively.

	~~A completed solution can be found here.~~

	</div>		</div>
Line 181:		Line 194:


	<~~pre~~ style="color: ~~red~~">		<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
	~~'''~~Your Turn~~'''~~		<span style="font-size: 160%">Your Turn</span>
	In the main loop(), add some code that iterates through the array of cars. For each car found, call the moveCars() function passing both the car and the increment to move the car each frame. As we are moving from right to left, this should be a value of -1.
	</~~pre~~>		In the main <code>loop()</code>, add some code that iterates through the array of cars. For each car found, call the <code>moveCars()</code> function passing both the car and the increment to move the car each frame. As we are moving from right to left, this should be a value of -1.

			</div>


Line 206:		Line 221:
	}		}
	</pre>		</pre>


			<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
			<span style="font-size: 160%">Your Turn</span>

			Add two additional if statements to handle the remaining two car types, Truck and Van. Their image names are Car_Truck and Car_Van respectively.

			</span>

	Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.		Now that we have a simple function that renders a single car, we can wrap this up into an overall function that renders the road sides, traffic lanes and all six cars.

	<~~pre~~>		<div>


	void drawScreen() {		void drawScreen() {

Filmote at 10:06, 17 June 2024

2024-06-17T10:06:20Z

← Older revision		Revision as of 10:06, 17 June 2024
Line 137:		Line 137:

	<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">		<div style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
	<span style="font-size: ~~140~~%">Your Turn</span>		<span style="font-size: 160%">Your Turn</span>


	Download the sample code and complete the following tasks:		Download the sample code and complete the following tasks:
Line 145:		Line 144:

	A completed solution can be found here.		A completed solution can be found here.

	</div>		</div>