Take this

Software Development / Web Development

Introducing Dart

An exciting and immersive introduction to learning client side Dart programming


As the internet becomes more of an application platform, the need to develop more feature-rich and immersive applications grows! Dart is a fantastic class-based, object-oriented language that pushes back on the idea that JavaScript should have a monopoly on web application development. It can be used both server side (dartVM) and client side (web browser) to build any application from a simple script to a full-blown 3D web game.

Introducing Dart is a joyride of game programming where the user harnesses the power of the Dart programming language. The techniques shown in these videos can easily be applied and expanded upon to create any kind of interactive web application.

We begin by learning how to install the Dart development environment, and how to get started using the Dart Editor. We then walk through building our game step-by-step until we are left with a fully functional game called "Dart Worm".

At the first step you will be introduced to the Dart SDK and the Dart editor software. This will provide the environment where we will design and develop our main project. Then you will learn how to use Dart to access the elements on a web page (called the DOM). Once these elements are accessed you will be shown how to manipulate them by calling methods, and how to add and remove elements from the DOM dynamically.

As we move on we will be covering specific Dart classes that will help us bring the different components of our game to life. We will learn how to animate our game, keep score, and present the user with controls. Eventually, we will be putting everything we learned together and building our final game.

When you have completed these videos, you will have all of the tools necessary to build and deploy a fully functional web application using the Dart programming language.

Full details


  • Getting Started with the Dart Editor
    The Course Overview
    This video will offer the overview of the course. • Introduction of the author and the topic • Take a section-wise tour of the course
    Installing the Dart SDK and Editor
    We want to start programming in Dart. We first need to install the Dart SDK and editor software so that we can begin programming. We can find this software at www.dartlang.org. • We go to www.dartlang.org and download the appropriate software for our system • We unzip this software to our home directory, and create a shortcut so that we can access the editor • Open the editor and verify that it has been installed correctly
    Jumping in with Our First Dart Program
    Now that we have the editor installed, you need to learn how to start a new project. We will choose file|new project. Then we add a new file to our project, and finally we run our project. • In the Dart editor, create a new file called hello world • This new file is now open and ready for editing, so type the program on the screen • Run the project by selecting the green play button in the top-left corner
    Setting Up Our Worm Project
    Now that we know how to make a new project, we want to start our Worm project, where we will be doing our work for the rest of the videos. • Create a project and name it WormGame • Add various files to the project, each with a detailed description of what it does • Now that we have the layout for our WormGame, going forward, we will build upon this one project in each video
    Getting the HTML and CSS for the Game in Place
    Before we can start creating a web application, we need to lay out the template HTML and CSS. We will add HTML and CSS to our project so that we can begin adding worms and food on the screen. • Open index.html and begin writing HTML for the game board and general layout • We open the worm.css file and start styling our elements so that we can use them • Test the styles by running the project with the Dart editor
  • Interacting with the DOM Using Dart
    Using the querySelector() Method to Find DOM Elements
    We need some way to access the HTML objects laid out in the DOM so that we can manipulate them. • Import the 'dart:html' library • Use the querySelector() method to find an element by its CSS accessor tag • Use the getComputedStyle() method and the print() method to output information about our selected element
    Calling Methods on DOM Elements
    Now that we have accessed an element, what are the things we can do with it? How do we change its properties? • Using our querySelector() method, we will get access to a DOM element • We will change the style attribute to make the width smaller • Using the inspect element pane in Dartium, we will see that the change has been made, and also see how it was made
    Dynamically Adding and Removing Elements from the DOM
    We need some way of adding new elements to the DOM, and taking some away. We will explore how we can do this. • Dart provides the append() method to add new elements to the end of the DOM, and the children accessor to get the full tree • We will add elements using both append() and the children accessor, and discuss the difference between them • Now we can start adding snake elements to the screen dynamically
  • Putting Some Boogie in the Worm
    Caring and Feeding for Your Worm
    In our game, the worm needs some food objects on the screen to eat and grow longer. We will be implementing the basic style for our worm's food and testing it with static HTML. • Create the worm food style using basic HTML and CSS, and we will be using a special CSS selector called nth-of-type to dynamically style the food objects based on the order in which they were added • We will create a basic food class using Dart and make it part of the worm game library • We will create instances of our food class and see how we can use Dart’s OOP to help us better encapsulate parts of our game
    The Dart Random Number Generator
    It is not very interesting for the player if the food objects always appear in the same place. So, we will use the dart:math:Random class to generate random positions for our food objects. • We review the Random class API on api.dartlang.org to get familiar with its features before we begin using it • Use the Random class to generate random positions for our food by passing random locations with the food class constructor • We will run our project and verify that each time we refresh the screen, the food objects appear in new random positions
    Using Timers to Create Simple Animations
    As of now, we don’t really have a game because nothing is moving. To get things moving, we will be using the Timer class in the dart:async library to trigger periodic events. • We need to create a function that will be called every time the timer triggers an "alarm," which is our callback function • We will register this callback function with a periodic timer and also set duration on the timer so that it triggers every second. In the callback, we will randomly move the food objects to new places on the screen • We will run our project and verify that the food is moving every second. Going forward, this will be the basis for our animations
    Creating and Implementing a Proper Worm Class
    Our project is starting to grow, in both size and complexity, and we don’t want it to get out of hand. We need to start breaking our parts into classes and utilizing the OOP facilities that are provided by Dart. • Create a wormbody.dart file that will hold our worm class and be part of the worm game library • Implement the worm class using the techniques and topics covered up to this point • Go back to worm.dart, create an instance of the worm, run the project, and verify that it still functions as expected
  • Reacting to Key Press Events
    Handle Key Press Events
    Right now, we have no way for the user to control the game. We will use the onKeyPress() method provided by the dart:html:Document object to handle key press events and make the DOM react. • Just like as the timer, we need to create a callback function. It will be called every time the user presses a key. It will add a paragraph element to the game board • We will register this callback function with the DOM using the document.onKeyPress() method • We will run our project and verify that each time a key is pressed, a paragraph element is added to our board element
    Figuring Which Key Was Pressed by the User
    Now that we can react to any key being pressed, we need a way to figure out which key was pressed and react differently, depending on the result. To do this, we will expand our callback and use the KeyboardEvent.charcode property to figure out which key was pressed. • We will use the KeyboardEvent object that is passed to our callback to figure out which key was pressed • We will convert this key press into a string object so that we can use it in a series of if-else statements to control our game logic • We will verify our game logic by running our project and testing whether our key presses do what is expected
    Implementing the Game Logic for Pause, Resume, and Reset
    Now that we are getting the game controls in place and functional, It is a good time to implement the pause, resume, and reset functionality. We are presenting this here because we will be using these functions when wrapping up the development process in the next section. • Working in the same callback (the onKeyPress() function), we will add our new code • To pause and resume the game, we simply need to call cancel() on the timer object, and reinstantiate it. To reset the game, we will create a reset function that will clear the board and score, reinstantiate all the objects, and restart the timer • We will run the project and test that our new code functions as expected
  • Putting the Game Together
    Implementing Collision Detection
    So far, we have created the individual parts of the game and gotten them animated and under the control of the user. Now we must program the interactions between all the elements. • In the Worm class, we are going to create some "intersection" methods that will check whether the worm intersects with any objects (or itself) • Implement the intersectsWith(Element e) and intersectsWithItself() methods to find collisions • Test these changes by making the worm grow if it intersects with food objects
    Implementing the Win and Game Over Scenarios
    Now that we know whether the worm intersects with food objects, we need to know whether it goes out of bounds, or runs into itself. We can also set a score that means that the user has won if they achieve it. • We need to create a method to check whether the head of the worm has gone outside the game board • We will leverage the intersectsWith(Element e) method and check whether the head intersects with the edge of the game board • We test the code and make sure that we can detect intersections on all four edges
    Testing Our Gameplay and Cross-compiling to JavaScript
    Now that our base game is complete and playable, how do we release it to players all over the world? We can compile our game to JavaScript and it can be played on other browsers. • We want to release our game so we can show it off, but currently Dart is not supported by browsers other than Dartium • We compile the game to JavaScript using the Dart editor • After we have compiled the game, we can test with various browsers to ensure its functionality
  • Adding Some Flair
    Using CSS to Add Some Flair to Our Game
    We now have our complete basic game, but we want to add some more flair to the game. We can expand our CSS to make our game more presentable. • Open the CSS file and begin adjusting some styles • Restyle the worm and food objects to make them more interesting • Test our changes with the Dartium browser
    Dart and CSS Animations
    We have our game over and game winning scenarios, but they are boring. We can use CSS animations to help make these announcements more presentable. • Using the worm CSS file, we will implement new CSS animation key frames for the announcement • Using Dart, we will create an announcement class that will use create overlays on the game board by using the animations • We will apply these animations to the elements by instantiating the announcement class
    Conclusion and Further Expansions of the Game
    Our game is now complete, but is it really? What else can we do to make it better? • First, we will discuss web-sockets for the idea of multiplayer worm games • We will look at simple web-socket examples with Dart to give you an idea of how they work • You will be left to implement this as an exercise, as well as come up with more ideas for bettering the game and deepening your knowledge of Dart


  • Computer Games
  • Computer Programming

Similar Courses

More Courses by this Instructor