code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
Hello Dart: Introduction to Programming

Part 1: First Steps

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

Hello Dart

Prerequisites

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

The MyPlayer Class

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

My Player

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.

Note: After every command you must place a semicolon ;.

Click the run button Run 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.

Catgirl

TASK 1.02: World Design

Change the main() function as follows:

main() {
  character = 'catgirl';
  field = 'stone';
  
  createWorld('scenario.txt', new 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.

Hint: To test a change it's fastest if you click Ctrl+S (or ⌘+S) to save the file in the Dar Editor and then click F5 (or ⌘+R) to refresh the browser.

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.

Around Tree

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.

Comments