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.
About The Author
James Slocum is a Software Developer for TelVue, and an adjunct Computer Science professor at Mercer County Community College. He studied Computer Engineering and Computer Science at the New Jersey Institute of Technology, graduating in 2008. His first article about Dart was featured in the March 2013 (#227) issue of Linux Journal.
This video will offer the overview of the course.
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.
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.
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.
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.
We need some way to access the HTML objects laid out in the DOM so that we can manipulate them.
Now that we have accessed an element, what are the things we can do with it? How do we change its properties?
We need some way of adding new elements to the DOM, and taking some away. We will explore how we can do this.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
Our game is now complete, but is it really? What else can we do to make it better?
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.