Lesson 1 - Hello World (HTML)

Introduction

Welcome to DragonScript Arena -- the game where you write code to command your Dragons to vanquish enemy Dragons. Don't worry if you don't know how to code yet. That is what this game is for! Follow along these lessons, and your coding skills will improve with each game you play. And your Dragons will grow stronger with you.

Make new Dragon A.I.

Before you can play your first game, you must make a new Dragon A.I. Visit the Code page and click "Make new Dragon A.I." Then click the edit button to the right of your new Dragon A.I.

In the code editor, you'll see the starting code template that we provide for all new Dragons. It should look like this. Please take a moment to click the 'Save' button to save your code before we continue.

Starting code template

Now let's go over this code you're seeing in the code editor. It might look like gibberish if you've never seen code before, but don't be afraid! I'll break it down and explain what's going on. It will start making sense soon. Don't worry if you don't get everything right now. The goal of this first lesson is to give you a "big picture" view. So feel free to skim now, and then come back at a later time if you need to. Some details might still be fuzzy and that's okay. Relax and trust that things will get clearer in time. And as always, if you have any questions, come over to our Discord chat server.

HTML

In this game, your Dragon A.I. will be made up of HTML and Javascript code. These are the two most popular languages on the web. Every modern website is made with them. But, your code won't be drawing a webpage. It will command Dragons :)

You can spot HTML by the characteristic <tag> commands all over the place. Notice how tags usually come in pairs: <tag> to open and </tag> to close. The open and close tags "wrap" a section of stuff. E.g., <html> and </html> wrap everything. And <script></script> wrap Javascript code. Javascript will make up the "brains" of your Dragon later. Don't worry about this now. We'll cover Javascript in Lesson 2.

HTML comments

Text wrapped between  are comments. Comments are notes you can add to your code for yourself or anyone else who reads your code. Good code has comments to help the reader understand what's going on.

Write to #display

To complete this first quest, write hello inside the following div tags:
<div id="display"></div>
I.e., make it look like this:
<div id="display">hello</div>
Your full Dragon A.I. code should look something like the code below...

Cheatcode

Spoiler alert! Click to reveal full solution.


<!DOCTYPE html>
<html>
 <body>
  <div id="display">hello</div>
  
  <script> 
    function run(state) 
    {
      // TODO: your Dragon A.I. code goes here (in the next quest)
    }
   
    Game.register(run);
  </script>
 </body>
</html>

FYI - I removed the starting comments so the code is clear. When you play the Quest with this new code, you'll see "hello" at the bottom-left of the Game UI. Give the game a few seconds to detect your "hello" message. If you did it right, a box will pop up and say "Victory!"