In this part we will take our first steps in programming.

Prerequisites

• You need NO prior knowledge of programming to start with Hello Dart!
• You must have Dart installed. If you don’t have it yet, please go through the installation instructions.

Setup for Hello Dart Scenarios

1. Download the source code (zip) from Hello Dart Releases (use the latest version).
2. Unzip the files to your computer.
3. In Visual Studio Code: Click on File | Open Folder…. Choose the hello-dart folder that you have just unzipped.
4. Right-click the file pubspec.yaml and choose Get Packages.
   

This will download the packages that this program depends on.

Start Web Server

Now enter webdev serve in the terminal.

Note: If you get an error message, your Dart installation is not set up correctly (see Dart installation).

This will start the web server locally. You will see a local web address (starting with http://127….). Ctrl+click this URL to open it in a browser (preferably Chrome).

In the browser you should see a list of scenarios. If you open the first scenario you should see something like this:

The MyPlayer Class

Open the file my_player.dart from the folder scenario1.01.

Let’s have a look at the MyPlayer class. Attributes and behavior of our player are defined between the curly braces { and }.

Currently, the only thing that is in this class is start() and three instructions to move the player. start() is a function (functions are sometimes also called methods). In this function we can change the behavior of the player.

TASK 1.01: First Steps

Change the start() function so that the player first makes a step, then places a star, and finally takes another step.

In the introduction you will find all commands a player can execute.

Click the run button to test your program.

index.html and the main() Function

As we let our programs run in a web browser, we always need an html file. In index.html you will find an declaration for the browser to load the my_player.dart script. For the browser to know where this Dart program starts, a main() function is needed.

At the bottom of the Dart file you will find the main() function. Each Dart program must have exactly one main() function as entry point.

In our main(), we call the createWorld(...) function. This function is part of Hello Dart and builds the whole world with the player and the fields. As soon as everything is ready, our start() function is automatically called and the player starts to move.

Design the World

The scenarios of Hello Dart include additional graphics that you can turn on if you want.

TASK 1.02: World Design

Change the main() function as follows:

main() {
  character = 'catgirl';
  field = 'stone';
  
  createWorld('scenario.txt', MyPlayer());
}

For character you can define values in quotes. Valid values are boy, catgirl, stargirl, or pinkgirl.

For field you can use the values grass, stone, wood, or dirt.

TASK 1.03: Around Tree

Open scenario1.03. If you start the scenario you should see a world with three trees and one star.

Write a program that makes your player move on the specified path to the star. He must move around the trees. Arriving on the star, he should remove it.

New Functions

TASK 1.04: Around Tree with Function

If you’ve solved task 1.03 correctly, your program will probably have three equal parts, namely for walking aroud every tree. We can improve this by introducing a new function so we don’t need to repeat the same sequence. Add the following function below the closing brace } from the start() function:

goAroundTree() {

}

Write between the curly braces the sequence of commands that are needed to go around one tree.

Now, use the new goAroundTree() function in your start() function for each of the three trees.

What’s next?

→ Continue with Part 2: Loops

Credits
Planet Cute images by Daniel Cook (Lostgarden.com), published under CC BY 3.0.
Oleg Yadrov improved the “Planet Cute” images and was so kind to let me use them. The images were optimized with the great TexturePacker.
Some exercises in Hello Dartwere inspired by Kara. Kara was developed by Jürg Nievergelt, Werner Hartmann, Raimond Reichert et. al.