Permalink
Browse files

Initial commit for Russian translation branch

  • Loading branch information...
1 parent 22fc44b commit fab86b4c1975c0f329080810442074ba079b9f2e @deadprogram deadprogram committed Oct 20, 2012
View
2 app/models/languages.rb
@@ -1,6 +1,6 @@
module KidsRuby
class Language
- LANGUAGES_SUPPORTED = %w{en es ja fr}
+ LANGUAGES_SUPPORTED = %w{en es ja fr ru}
class << self
def system
View
204 public/help/ru/hacketyhack/basic_programming.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Programming</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-1-1", "../../shared/hacketyhack/code1_1.rb");
+ loadCode("#code-1-2", "../../shared/hacketyhack/code1_2.rb");
+ loadCode("#code-1-3", "../../shared/hacketyhack/code1_3.rb");
+ loadCode("#code-1-4", "../../shared/hacketyhack/code1_4.rb");
+ loadCode("#code-1-5", "../../shared/hacketyhack/code1_5.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Basic Programming</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+
+
+ <article class="lesson"><h1>Hello there!</h1>
+ <section class="page"><h1>Round One</h1>
+ <p>So, you'd like to learn how to hack code with the best of 'em, eh? Well, you've come to the right place. This is the very first lesson I have to share with you. It all starts here.</p>
+ <p>I want to get you started off on the best possible foot with making programs, so we'll start off by talking a little bit about what programming is, and then we'll write some basic programs to draw fun things on the screen. Sound good? Off we go!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Let's talk about programming</h1>
+ <section class="page"><h1>It's all about instructions</h1>
+ <p>When you get down to it, programming is all about <strong>algorithms</strong>. That's a big fancy word for 'a list of instructions.' Every program is simply a big to-do list of instructions for the computer to follow.</p>
+ <p>You can turn almost anything into a list of instructions if you really think about it. Most of the time, you've got so much practice at doing things that you don't even think about these individual steps. You just do them. It's very natural.</p>
+ </section>
+
+ <section class="page"><h1>The computer is simple</h1>
+ <p>Unfortunately, computers are actually quite simple. This may be contrary to everything you've ever heard, but it's the truth. Even though we compare computers to things like our brains, it's a really poor analogy. What computers are actually really good at is performing simple, boring things over and over again very accurately. They can't think for themselves!</p>
+ <p>This is why computers appear to be complex. They blindly follow whatever orders they're given, without any thought about how those instructions are good or bad. It's hard to think in such simple terms!</p>
+ </section>
+
+ <section class="page"><h1>Explain yourself well</h1>
+ <p>It's important to remember that you have to fully explain yourself to the computer when you're programming. It can't figure out what you're trying to say, so you have to say what you mean!</p>
+ <p>This takes some practice, so we're going to start off with some exercises in explaining ourselves in very basic terms. It's almost like trying to explain math to a young child: you have to go slowly, triple check your work, and have some patience when it just doesn't quite get it.</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lists of Instructions</h1>
+ <section class="page"><h1>A to-do list, not a shopping list</h1>
+ <p>When I say that computers follow lists of instructions, I mean a to-do list, not a shopping list. What I'm trying to say is that these lists have an <strong>order</strong> to them that the computer follows. It does each step in turn as quickly as it possibly can.</p>
+ <p>A shopping list is a different kind of list entirely. You can go to whichever aisle you choose, and as long as you get everything before you leave, you're A-OK. This isn't what the computer does at all.</p>
+ </section>
+
+ <section class="page"><h1>How would you tell a person to do it?</h1>
+ <p>Let's try an example: if you had to tell someone in words how to draw a square on a piece of paper, how would you do it?</p>
+ <p>You're not allowed to say "like this" or "this way," that's cheating! You have to spell out every detail.</p>
+ </section>
+
+ <section class="page"><h1>Once again: computers are simple</h1>
+ <p>How'd you do? I can't see what you said, but here's an example of how simple computers are compared to people. Did you forget to mention how long each side of the square is? If you didn't good job!</p>
+ <p>Here's how I'd do it, by the way. This isn't the only right answer, it's just an example:</p>
+ <p>1. Put your pen down on the paper.</p>
+ <p>2. Draw right one inch.</p>
+ <p>3. Draw down one inch.</p>
+ <p>4. Draw left one inch.</p>
+ <p>5. Draw up one inch.</p>
+ <p>6. Take your pen off of the paper.</p>
+ <p>7. You're done!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Turtles, all the way down.</h1>
+ <section class="page"><h1>Drawing... with turtles?</h1>
+ <p>Okay! Enough of these thinking experiments. Let's actually make something. I bet you've been wondering when that was going to start, right? It's really important to get the basics down first.</p>
+ <p>We're going to tell the computer how to draw shapes... with turtles. Yes, you heard me right. You're going to have to give these instructions to a turtle.</p>
+ <p>This particular turtle is carrying a pen. You have a piece of paper. The turtle will follow your every word. But the turtle is a bit slow, and needs careful instruction. Are you up to it?</p>
+ </section>
+
+ <section class="page"><h1>The Turtle and its commands</h1>
+ <p>We have to tell Ruby that we want to tell the Turtle what to do. To do that, we have a <code>Turtle</code> command. We can tell the <code>Turtle</code> two things:</p>
+ <p><code>draw</code>: the turtle will follow our instructions at lightning speed, drawing our entire image in the blink of an eye.
+ <p><code>start</code>: an interactive window will appear, which lets you see the turtle move at each step in the program. You can move at your own pace. This is useful if the turtle isn't doing what you expect!
+ </section>
+
+ <section class="page"><h1>Type it in!</h1>
+ <p>Cool. Now type this:</p>
+ <p><code>Turtle.draw</code></p>
+ <p>The period in between the <code>Turtle</code> and the <code>draw</code> connects them together. Programming languages have rules, just like English has rules! You can think of <code>Turtle</code> like a subject, and <code>draw</code> as a verb. Together, they make a sentence: hey turtle, draw me something!</p>
+ <p>Once you've typed that in, go ahead and click the 'Run' button. The turtle moves so quickly in <code>draw</code> mode that you won't even see him, but I assure you, he's there!</p>
+ </section>
+
+ <section class="page"><h1>Do... what I tell you to</h1>
+ <p>Awesome! We've got the turtle going, at least. Now we need to tell it what we want to draw!</p>
+ <p>Remember when we said that all programs are lists of instructions? In this case, our program only has one instruction: <code>Turtle</code>draw something! But we need to be able to give the <code>Turtle</code> its own list of instructions.</p>
+ <p>To do this, we'll use two words: <code>do</code> and <code>end</code>. These two words together make up a <em>sublist</em> of things, just for the <code>Turtle</code>!</p>
+ </section>
+
+ <section class="page"><h1>Changing the background</h1>
+ <p>Let's try this: we can tell the <code>Turtle</code> that we want to use a different background color by using the <code>background</code> command. Check it out:</p>
+ <pre id="code-1-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Type this in and click 'Run'!</p>
+ </section>
+
+ <section class="page"><h1>The Turtle gets its orders</h1>
+ <p>Cool stuff! The background is now maroon. <a href="colors.html">Click here to see a full list of colors that are supported</a>.
+ <p>This is also how you make lists of instructions for the <code>Turtle</code> to follow. To make it a little easier to see, programmers will often put two spaces before sublists. Get in the habit now, you'll thank me later!</p>
+ </section>
+
+ <section class="page"><h1>The pen</h1>
+ <p>Now that we've got a snazzy background color, how do we draw some lines? Well, the first thing you need to know about is the pen. The <code>Turtle</code> carries a pen along, and drags it along the ground behind itself. You can change the color of line the pen draws with the <code>pencolor</code> command.</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Drawing lines</h1>
+ <section class="page"><h1>Sally forth!</h1>
+ <p>Okay, enough dilly-dallying. Let's tell the turtle to draw a line! Here's my line. Give this one a shot, then try your own colors and numbers!</p>
+ <pre id="code-1-2" class="sampleCode">Code automatically inserted here...</pre>
+ <p>50 is the number of pixels to move forward, by the way.</p>
+ </section>
+
+ <section class="page"><h1>You spin me right round, baby</h1>
+ <p>Great! So you've got a line. But what if you don't want the <code>Turtle</code> to move forward? Well, you can tell it to turn by using a <code>turnleft</code> or <code>turnright</code> command, like this:</p>
+ <pre id="code-1-3" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Give that a shot, then play with it a bit!</p>
+ <p>If you're wondering what 90 means, it's the number of degrees that it'll turn.</p>
+ </section>
+
+ <section class="page"><h1>I like to move it, move it</h1>
+ <p>Okay, now we're cooking! Let's break this down again:</p>
+ <p><code>Turtle.draw</code> tells the <code>Turtle</code> we want it to draw some things. The period connects the two.</p>
+ <p><code>do ... end</code> is a sublist of things. This is what we want the <code>Turtle</code> to be drawing. Not for the rest of our program.
+ <p><code>pencolor</code> sets the color of the pen the <code>Turtle</code> is dragging along behind him, and <code>background</code> sets the color of the background.</p>
+ <p><code>turnright</code> (or its buddy <code>turnleft</code>) tells the <code>Turtle</code> " to turn to the right or left.</p>
+ <p><code>forward</code> (or its friend <code>backward</code>) tells the <code>Turtle</code> to move.</p>
+ </section>
+
+ <section class="page"><h1>Let's try drawing that square</h1>
+ <p>Go ahead. Give it a shot. Try to get the <code>Turtle</code> to draw a square.</p>
+ <p>I'll wait. :)</p>
+ </section>
+
+ <section class="page"><h1>Here's my version</h1>
+ <p>Here's how I did it:</p>
+ <pre id="code-1-4" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Repeating ourselves</h1>
+ <section class="page"><h1>Pete and Repeat...</h1>
+ <p>Man, that was a ton of repetition! My fingers almost fell off typing <code>forward</code> and <code>turnright</code> there!</p>
+ <p>I have good news, though: I mentioned something earlier about computers. It turns out that doing boring, repetitive things is something they're really good at! They'll do the same thing over and over again, forever even as long as you ask nicely.</p>
+ </section>
+
+ <section class="page"><h1>Repeating repeating ourselves ourselves</h1>
+ <p>Check it out: our <code>Turtle</code> actually knows numbers. For example:</p>
+ <pre id="code-1-5" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Try running this example. It also draws a square! Wow!</p>
+ </section>
+
+ <section class="page"><h1>4.times</h1>
+ <p>It's pretty easy: <code>4</code> can take instructions too, just like our <code>Turtle</code>. This command repeats a list of instructions that many times. Fun! Four times. And the <code>do</code> and <code>end</code> show which list of instructions go with the <code>4</code> rather than with the <code>Turtle</code>.</p>
+ </section>
+
+ <section class="page"><h1>Try it out!</h1>
+ <p>Have a blast: make some fun shapes of your own!</p>
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Summary</h1>
+ <section class="page"><h1>Congratulations!</h1>
+ <p>Wow, you're awesome. Pat yourself on the back. High five someone. You've got these basics down!</p>
+ <p>Check out the <em>Basic Ruby</em> lesson to pick up some totally different and exciting things!</p>
+ </section>
+ </article>
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
View
210 public/help/ru/hacketyhack/basic_ruby.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Ruby</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-2-1", "../../shared/hacketyhack/code2_1.rb");
+ loadCode("#code-2-1-1", "../../shared/hacketyhack/code2_1.rb");
+ loadCode("#code-2-2", "../../shared/hacketyhack/code2_2.rb");
+ loadCode("#code-2-3", "../../shared/hacketyhack/code2_3.rb");
+ loadCode("#code-2-4", "../../shared/hacketyhack/code2_4.rb");
+ loadCode("#code-2-5", "../../shared/hacketyhack/code2_5.rb");
+ loadCode("#code-2-6", "../../shared/hacketyhack/code2_6.rb");
+ loadCode("#code-2-7", "../../shared/hacketyhack/code2_7.rb");
+ loadCode("#code-2-8", "../../shared/hacketyhack/code2_8.rb");
+ loadCode("#code-2-9", "../../shared/hacketyhack/code2_9.rb");
+ loadCode("#code-2-10", "../../shared/hacketyhack/code2_10.rb");
+ loadCode("#code-2-11", "../../shared/hacketyhack/code2_11.rb");
+ loadCode("#code-2-11-1", "../../shared/hacketyhack/code2_11.rb");
+ loadCode("#code-2-12", "../../shared/hacketyhack/code2_12.rb");
+ loadCode("#code-2-13", "../../shared/hacketyhack/code2_13.rb");
+ loadCode("#code-2-14", "../../shared/hacketyhack/code2_14.rb");
+ loadCode("#code-2-15", "../../shared/hacketyhack/code2_15.rb");
+ loadCode("#code-2-15-1", "../../shared/hacketyhack/code2_15.rb");
+ loadCode("#code-2-16", "../../shared/hacketyhack/code2_16.rb");
+ loadCode("#code-2-17", "../../shared/hacketyhack/code2_17.rb");
+ });
+ </script>
+</head>
+<body class="lesson-set">
+ <h1>Basic Ruby</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+
+ <article class="lesson"><h1>Hello there!</h1>
+ <section class="page"><h1>Let's get started</h1>
+ <p>Welcome to your first lesson in Ruby! You're going to have a blast.</p>
+ <p>Ruby is a great programming language that you can use to make all kinds of things with. Let's get going!</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>A bit more about Ruby</h1>
+ <section class="page"><h1>Konnichiwa, Ruby!</h1>
+ <p><em>Ruby</em> was created by</p>
+ <p>まつもと ゆきひろ</p>
+ <p>(you can just call him Matz) in 1995. If you couldn't guess, Matz is from Japan. Here he is:</p>
+ </section>
+ <section class="page"><h1>Ruby is enjoyable</h1>
+ <p>Matz has this to say about Ruby:</p>
+ <p><em>I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language.</em></p>
+ <p>One more thing about Ruby: Rubyists (that's what people who like Ruby call themselves) have a saying: <strong>MINSWAN</strong>. This stands for <strong>M</strong>atz <strong>I</strong>s <strong>N</strong>ice <strong>S</strong>o <strong>W</strong>e <strong>A</strong>re <strong>N</strong>ice. Which is a pretty nice saying, itself. Be nice to everyone, and give them a hand when they need it!"</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Displaying Things</h1>
+ <section class="page"><h1>Let's do this!</h1>
+ <p>Okay! The very first thing that you need to know is how to show something on the screen. Otherwise, you won't know what's going on!</p>
+ </section>
+ <section class="page"><h1>Hello, World!</h1>
+ <p>There are two ways of doing this. Here's the first: alert</p>
+ <pre id="code-2-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Type this in and press the 'Run' button.</p>
+ </section>
+ <section class="page"><h1>alert</h1>
+ <p>Okay, let's break this down: There's two main parts to this little program: you have an <code>alert</code> and a <code>"Hello, world!"</code>. These two parts work just like an English sentence: The <code>alert</code> is a verb and the stuff in the ""s is an object. In Ruby, we call verbs <strong>methods</strong>. The <code>alert</code> verb says 'Put an alert box on the screen, and the content of the box is whatever thing you give me.'</p>
+ <p>We'll talk about the <code>"Hello, world!"</code> in just a second. Here's the other way of making this happen:</p>
+ <pre id="code-2-2" class="sampleCode">Code automatically inserted here...</pre>
+ <p>If you try that here, it will work! The <code>puts</code> method doesn't display a dialog box, it puts text out to the output instead. We'll be using <code>alert</code>s throughout these tutorials, but if you look at other Ruby tutorials, you may see <code>puts</code>.</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Letters, words, and sentences</h1>
+ <section class="page"><h1> Strings </h1>
+ <p>Okay! Now that you've got that verb bit down, it's time to learn about <em>String</em>s. Strings are what we call a bunch of words between a pair of " characters. The "s are used to tell the computer what words you actually want to say. Let's think about our example:</p>
+ <pre id="code-2-1-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>If you didn't have the "s, the computer wouldn't know which words were methods and which ones were part of the string! And consider this:</p>
+ <pre id="code-2-3" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Without making all of those words a string, how would Ruby know that the second alert was some text you wanted to say, rather than another alert box?</p>
+ </section>
+ <section class="page"><h1>Adding Strings </h1>
+ <p>Now, if you want to put two bits of strings together, you can use the <code>+</code> character to do it. Try typing this:</p>
+ <pre id="code-2-4" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Same thing! The <code>+</code> sticks the two strings together. This will end up being super useful later!</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Numbers and Math</h1>
+ <section class="page"><h1> Numbers </h1>
+ <p>You can just use numbers, and Ruby understands them:</p>
+ <pre id="code-2-5" class="sampleCode">Code automatically inserted here...</pre>
+ <p>You can even use numbers that have a decimal point in them:</p>
+ <pre id="code-2-6" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ <section class="page"><h1> Basic Math </h1>
+ <p>You can also do math with numbers, and it'll work out pretty well:</p>
+ <pre id="code-2-7" class="sampleCode">Code automatically inserted here...</pre>
+ <p>But if you try this, nothing happens:</p>
+ <pre id="code-2-8" class="sampleCode">Code automatically inserted here...</pre>
+ <p>This is kind of fun and silly, though:</p>
+ <pre id="code-2-9" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ <section class="page"><h1>Errors </h1>
+ <p>You know how nothing happened when you hit the Run button earlier? That was because there was an error. You can see any errors in the 'Output' tab.</p>
+ <p>The error that results from <code>alert "hey" + 2</code> is:</p>
+ <code>can't convert Fixnum into String</code>
+ <p>What is that?</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>A few words about types</h1>
+ <section class="page"><h1> Why's it do that? </h1>
+ <p>Each part of a Ruby program is an <code>Object</code>. Right now, all you need to know about <code>Object</code>s is that it's sort of like saying a thing. Your program is made up of a bunch of <code>Object</code>s working together.</p>
+ <p>We'll learn more about <code>Object</code>s in a future lesson, but there is one thing I'll tell you: <code>Object</code>s have a 'type.' This lets Ruby know what kind of <code>Object</code> it is. </p>
+ </section>
+ <section class="page"><h1>Adding numbers to words</h1>
+ <p>That's why</p>
+ <pre id="code-2-10" class="sampleCode">Code automatically inserted here...</pre>
+ <p>doesn't really work: "hey" is a <code>String</code> object, and 2 is a <code>Fixnum</code> object. And adding <code>String</code>s and <code>Fixnum</code>s doesn't make any sense. We can make this code work, though!</p>
+ <p>All we need to do is turn the <code>Fixnum</code> into a <code>String</code>. We can do this by using the <code>to_s</code> method.</p>
+ <pre id="code-2-11" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ <section class="page"><h1>Let's look at that again</h1>
+ <pre id="code-2-11-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Okay, this isn't bad. We have our <code>alert</code> method. We're giving it <code>"hey" + 2.to_s</code>. The <code>2.to_s</code> turns a <code>Fixnum</code> 2, which is like the mathematical idea of a 2, into the <code>String</code> 2, which is like when you write a 2 down on a piece of paper.</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Variables</h1>
+ <section class="page"><h1> They're like boxes </h1>
+ <p>What happens if we want to keep something around? Most programs are not one line, I assure you. You can use a <em>variable</em> to hold a value and use it later. It's like a box that you put things in.</p>
+ <p>Let's try one out:</p>
+ <pre id="code-2-12" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Give that a run.</p>
+ </section>
+ <section class="page"><h1> Assignment </h1>
+ <p>Cool stuff! We used an <code>=</code> to <em>assign</em> the <code>String</code> "Hello, world!" into the variable <code>message</code>. We then passed that <code>message</code> to the <code>alert</code> method.</p>
+ <p>As you can see, we can use variables in place of another value. Try this:</p>
+ <pre id="code-2-13" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Make a guess before you run this program.</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>User Input</h1>
+ <section class="page"><h1>ask-ing for it.</h1>
+ <p>We can ask the user of our program for some input, and then put their answer into a variable. It's easy! Check this program out:</p>
+ <pre id="code-2-14" class="sampleCode">Code automatically inserted here...</pre>
+ <p>The <code>ask</code> method brings up a box and lets our users type something in. Fun! We put their answer into the <code>name</code> variable and then showed it with <code>alert</code> Sweet!</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Basic flow control</h1>
+ <section class="page"><h1> if... </h1>
+ <p>Remember back to that Beginning Programming lesson... we talked about how programs are one big list, that the computer follows in order.</p>
+ <p>Well, guess what? We can actually change this order by using certain bits of code. Compare these two programs:</p>
+ <pre id="code-2-15" class="sampleCode">Code automatically inserted here...</pre>
+ <pre id="code-2-16" class="sampleCode">Code automatically inserted here...</pre>
+ <p>There are a few new things here.</p>
+ </section>
+ <section class="page"><h1>"=="</h1>
+ <p>Here it is again:</p>
+ <pre id="code-2-15-1" class="sampleCode">Code automatically inserted here...</pre>
+ <p>The == command is just a bit different than the = command. == tests the <code>Object</code> on its right against the <code>Object</code> on its left. If the two are equal, then the code after the <code>if</code> will run. If they're not equal, you get the code after the <code>else</code>. The <code>("end")</code> lets us know we're done with our <code>if</code>.</p>
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Example: a guessing game</h1>
+ <section class="page"><h1> Guess! </h1>
+ <p>Let's put this all together:</p>
+ <pre id="code-2-17" class="sampleCode">Code automatically inserted here...</pre>
+ </section>
+ </article>
+
+ <article class="lesson"><h1>Example: a guessing game</h1>
+ <section class="page"><h1> Guess! </h1>
+ <p>Congrats! You've picked up all of the basics of Ruby. There's a lot more you still have to learn, though!</p>
+ <p>Here's what you've learned so far:</p>
+ <p>* <code>alert</code> and <code>ask</code></p>
+ <p>* <code>=</code> variables, and <code>==</code></p>
+ <p>* <code>if</code> and <code>else</code></p>
+ <p>Awesome! You'll want to go back to "Lessons" and then check out Ruby Warrior next!</p>
+ </section>
+ </article>
+
+ <a href="../index.html">Back to Lessons</a>
+</body>
+</html>
View
53 public/help/ru/hacketyhack/colors.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Color List</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+</head>
+<body class="lesson-set">
+ <h1>Color List</h1>
+ <nav id="top">
+ <a href="index.html">Back to Lessons</a>
+ </nav>
+ <p>The following list of colors can be used in the KidsRuby Turtle.
+ As background colors or border colors. As stroke and fill colors.
+ Most of these colors come from the X11 and HTML palettes.</p>
+ <p>All of these colors can be used by name. (So calling the <code>tomato</code> method from inside any slot will get you a nice reddish color.) Below each color, also find the exact numbers which can be used with the <code>rgb</code> method.</p>
+ <div style="background: rgb(240, 248, 255); color: black" class="color"><h3>aliceblue</h3><p>rgb(240, 248, 255)</p></div>
+ <div style="background: rgb(250, 235, 215); color: black" class="color"><h3>antiquewhite</h3><p>rgb(250, 235, 215)</p></div>
+ <div style="background: rgb(0, 255, 255); color: black" class="color"><h3>aqua</h3><p>rgb(0, 255, 255)</p></div>
+ <div style="background: rgb(127, 255, 212); color: black" class="color"><h3>aquamarine</h3><p>rgb(127, 255, 212)</p></div>
+ <div style="background: rgb(240, 255, 255); color: black" class="color"><h3>azure</h3><p>rgb(240, 255, 255)</p></div>
+ <div style="background: rgb(245, 245, 220); color: black" class="color"><h3>beige</h3><p>rgb(245, 245, 220)</p></div>
+ <div style="background: rgb(255, 228, 196); color: black" class="color"><h3>bisque</h3><p>rgb(255, 228, 196)</p></div>
+ <div style="background: rgb(0, 0, 0); color: white" class="color"><h3>black</h3><p>rgb(0, 0, 0)</p></div>
+ <div style="background: rgb(255, 235, 205); color: black" class="color"><h3>blanchedalmond</h3><p>rgb(255, 235, 205)</p></div>
+ <div style="background: rgb(0, 0, 255); color: black" class="color"><h3>blue</h3><p>rgb(0, 0, 255)</p></div>
+ <div style="background: rgb(138, 43, 226); color: black" class="color"><h3>blueviolet</h3><p>rgb(138, 43, 226)</p></div>
+ <div style="background: rgb(165, 42, 42); color: white" class="color"><h3>brown</h3><p>rgb(165, 42, 42)</p></div>
+ <div style="background: rgb(222, 184, 135); color: black" class="color"><h3>burlywood</h3><p>rgb(222, 184, 135)</p></div>
+ <div style="background: rgb(95, 158, 160); color: black" class="color"><h3>cadetblue</h3><p>rgb(95, 158, 160)</p></div>
+ <div style="background: rgb(127, 255, 0); color: black" class="color"><h3>chartreuse</h3><p>rgb(127, 255, 0)</p></div>
+ <div style="background: rgb(210, 105, 30); color: black" class="color"><h3>chocolate</h3><p>rgb(210, 105, 30)</p></div>
+ <div style="background: rgb(255, 127, 80); color: black" class="color"><h3>coral</h3><p>rgb(255, 127, 80)</p></div>
+ <div style="background: rgb(100, 149, 237); color: black" class="color"><h3>cornflowerblue</h3><p>rgb(100, 149, 237)</p></div>
+ <div style="background: rgb(255, 248, 220); color: black" class="color"><h3>cornsilk</h3><p>rgb(255, 248, 220)</p></div
+ ><div style="background: rgb(220, 20, 60); color: black" class="color"><h3>crimson</h3><p>rgb(220, 20, 60)</p></div
+ ><div style="background: rgb(0, 255, 255); color: black" class="color"><h3>cyan</h3><p>rgb(0, 255, 255)</p></div>
+ <div style="background: rgb(0, 0, 139); color: white" class="color"><h3>darkblue</h3><p>rgb(0, 0, 139)</p></div>
+ <div style="background: rgb(0, 139, 139); color: black" class="color"><h3>darkcyan</h3><p>rgb(0, 139, 139)</p></div><div style="background: rgb(184, 134, 11); color: black" class="color"><h3>darkgoldenrod</h3><p>rgb(184, 134, 11)</p></div><div style="background: rgb(169, 169, 169); color: black" class="color"><h3>darkgray</h3><p>rgb(169, 169, 169)</p></div><div style="background: rgb(0, 100, 0); color: white" class="color"><h3>darkgreen</h3><p>rgb(0, 100, 0)</p></div><div style="background: rgb(189, 183, 107); color: black" class="color"><h3>darkkhaki</h3><p>rgb(189, 183, 107)</p></div><div style="background: rgb(139, 0, 139); color: black" class="color"><h3>darkmagenta</h3><p>rgb(139, 0, 139)</p></div><div style="background: rgb(85, 107, 47); color: white" class="color"><h3>darkolivegreen</h3><p>rgb(85, 107, 47)</p></div><div style="background: rgb(255, 140, 0); color: black" class="color"><h3>darkorange</h3><p>rgb(255, 140, 0)</p></div><div style="background: rgb(153, 50, 204); color: black" class="color"><h3>darkorchid</h3><p>rgb(153, 50, 204)</p></div><div style="background: rgb(139, 0, 0); color: white" class="color"><h3>darkred</h3><p>rgb(139, 0, 0)</p></div><div style="background: rgb(233, 150, 122); color: black" class="color"><h3>darksalmon</h3><p>rgb(233, 150, 122)</p></div><div style="background: rgb(143, 188, 143); color: black" class="color"><h3>darkseagreen</h3><p>rgb(143, 188, 143)</p></div><div style="background: rgb(72, 61, 139); color: black" class="color"><h3>darkslateblue</h3><p>rgb(72, 61, 139)</p></div><div style="background: rgb(47, 79, 79); color: white" class="color"><h3>darkslategray</h3><p>rgb(47, 79, 79)</p></div><div style="background: rgb(0, 206, 209); color: black" class="color"><h3>darkturquoise</h3><p>rgb(0, 206, 209)</p></div><div style="background: rgb(148, 0, 211); color: black" class="color"><h3>darkviolet</h3><p>rgb(148, 0, 211)</p></div><div style="background: rgb(255, 20, 147); color: black" class="color"><h3>deeppink</h3><p>rgb(255, 20, 147)</p></div><div style="background: rgb(0, 191, 255); color: black" class="color"><h3>deepskyblue</h3><p>rgb(0, 191, 255)</p></div><div style="background: rgb(105, 105, 105); color: black" class="color"><h3>dimgray</h3><p>rgb(105, 105, 105)</p></div><div style="background: rgb(30, 144, 255); color: black" class="color"><h3>dodgerblue</h3><p>rgb(30, 144, 255)</p></div><div style="background: rgb(178, 34, 34); color: white" class="color"><h3>firebrick</h3><p>rgb(178, 34, 34)</p></div><div style="background: rgb(255, 250, 240); color: black" class="color"><h3>floralwhite</h3><p>rgb(255, 250, 240)</p></div><div style="background: rgb(34, 139, 34); color: white" class="color"><h3>forestgreen</h3><p>rgb(34, 139, 34)</p></div><div style="background: rgb(255, 0, 255); color: black" class="color"><h3>fuchsia</h3><p>rgb(255, 0, 255)</p></div><div style="background: rgb(220, 220, 220); color: black" class="color"><h3>gainsboro</h3><p>rgb(220, 220, 220)</p></div>
+ <div style="background: rgb(248, 248, 255); color: black" class="color"><h3>ghostwhite</h3><p>rgb(248, 248, 255)</p></div><div style="background: rgb(255, 215, 0); color: black" class="color"><h3>gold</h3><p>rgb(255, 215, 0)</p></div><div style="background: rgb(218, 165, 32); color: black" class="color"><h3>goldenrod</h3><p>rgb(218, 165, 32)</p></div><div style="background: rgb(128, 128, 128); color: black" class="color"><h3>gray</h3><p>rgb(128, 128, 128)</p></div><div style="background: rgb(0, 128, 0); color: white" class="color"><h3>green</h3><p>rgb(0, 128, 0)</p></div><div style="background: rgb(173, 255, 47); color: black" class="color"><h3>greenyellow</h3><p>rgb(173, 255, 47)</p></div><div style="background: rgb(240, 255, 240); color: black" class="color"><h3>honeydew</h3><p>rgb(240, 255, 240)</p></div><div style="background: rgb(255, 105, 180); color: black" class="color"><h3>hotpink</h3><p>rgb(255, 105, 180)</p></div><div style="background: rgb(205, 92, 92); color: black" class="color"><h3>indianred</h3><p>rgb(205, 92, 92)</p></div><div style="background: rgb(75, 0, 130); color: white" class="color"><h3>indigo</h3><p>rgb(75, 0, 130)</p></div><div style="background: rgb(255, 255, 240); color: black" class="color"><h3>ivory</h3><p>rgb(255, 255, 240)</p></div><div style="background: rgb(240, 230, 140); color: black" class="color"><h3>khaki</h3><p>rgb(240, 230, 140)</p></div><div style="background: rgb(230, 230, 250); color: black" class="color"><h3>lavender</h3><p>rgb(230, 230, 250)</p></div><div style="background: rgb(255, 240, 245); color: black" class="color"><h3>lavenderblush</h3><p>rgb(255, 240, 245)</p></div><div style="background: rgb(124, 252, 0); color: black" class="color"><h3>lawngreen</h3><p>rgb(124, 252, 0)</p></div><div style="background: rgb(255, 250, 205); color: black" class="color"><h3>lemonchiffon</h3><p>rgb(255, 250, 205)</p></div><div style="background: rgb(173, 216, 230); color: black" class="color"><h3>lightblue</h3><p>rgb(173, 216, 230)</p></div><div style="background: rgb(240, 128, 128); color: black" class="color"><h3>lightcoral</h3><p>rgb(240, 128, 128)</p></div><div style="background: rgb(224, 255, 255); color: black" class="color"><h3>lightcyan</h3><p>rgb(224, 255, 255)</p></div><div style="background: rgb(250, 250, 210); color: black" class="color"><h3>lightgoldenrodyellow</h3><p>rgb(250, 250, 210)</p></div><div style="background: rgb(144, 238, 144); color: black" class="color"><h3>lightgreen</h3><p>rgb(144, 238, 144)</p></div><div style="background: rgb(211, 211, 211); color: black" class="color"><h3>lightgrey</h3><p>rgb(211, 211, 211)</p></div><div style="background: rgb(255, 182, 193); color: black" class="color"><h3>lightpink</h3><p>rgb(255, 182, 193)</p></div><div style="background: rgb(255, 160, 122); color: black" class="color"><h3>lightsalmon</h3><p>rgb(255, 160, 122)</p></div><div style="background: rgb(32, 178, 170); color: black" class="color"><h3>lightseagreen</h3><p>rgb(32, 178, 170)</p></div>
+ <div style="background: rgb(135, 206, 250); color: black" class="color"><h3>lightskyblue</h3><p>rgb(135, 206, 250)</p></div><div style="background: rgb(119, 136, 153); color: black" class="color"><h3>lightslategray</h3><p>rgb(119, 136, 153)</p></div><div style="background: rgb(176, 196, 222); color: black" class="color"><h3>lightsteelblue</h3><p>rgb(176, 196, 222)</p></div><div style="background: rgb(255, 255, 224); color: black" class="color"><h3>lightyellow</h3><p>rgb(255, 255, 224)</p></div><div style="background: rgb(0, 255, 0); color: black" class="color"><h3>lime</h3><p>rgb(0, 255, 0)</p></div><div style="background: rgb(50, 205, 50); color: black" class="color"><h3>limegreen</h3><p>rgb(50, 205, 50)</p></div><div style="background: rgb(250, 240, 230); color: black" class="color"><h3>linen</h3><p>rgb(250, 240, 230)</p></div><div style="background: rgb(255, 0, 255); color: black" class="color"><h3>magenta</h3><p>rgb(255, 0, 255)</p></div><div style="background: rgb(128, 0, 0); color: white" class="color"><h3>maroon</h3><p>rgb(128, 0, 0)</p></div><div style="background: rgb(102, 205, 170); color: black" class="color"><h3>mediumaquamarine</h3><p>rgb(102, 205, 170)</p></div><div style="background: rgb(0, 0, 205); color: white" class="color"><h3>mediumblue</h3><p>rgb(0, 0, 205)</p></div><div style="background: rgb(186, 85, 211); color: black" class="color"><h3>mediumorchid</h3><p>rgb(186, 85, 211)</p></div><div style="background: rgb(147, 112, 219); color: black" class="color"><h3>mediumpurple</h3><p>rgb(147, 112, 219)</p></div><div style="background: rgb(60, 179, 113); color: black" class="color"><h3>mediumseagreen</h3><p>rgb(60, 179, 113)</p></div><div style="background: rgb(123, 104, 238); color: black" class="color"><h3>mediumslateblue</h3><p>rgb(123, 104, 238)</p></div><div style="background: rgb(0, 250, 154); color: black" class="color"><h3>mediumspringgreen</h3><p>rgb(0, 250, 154)</p></div><div style="background: rgb(72, 209, 204); color: black" class="color"><h3>mediumturquoise</h3><p>rgb(72, 209, 204)</p></div><div style="background: rgb(199, 21, 133); color: black" class="color"><h3>mediumvioletred</h3><p>rgb(199, 21, 133)</p></div><div style="background: rgb(25, 25, 112); color: white" class="color"><h3>midnightblue</h3><p>rgb(25, 25, 112)</p></div><div style="background: rgb(245, 255, 250); color: black" class="color"><h3>mintcream</h3><p>rgb(245, 255, 250)</p></div><div style="background: rgb(255, 228, 225); color: black" class="color"><h3>mistyrose</h3><p>rgb(255, 228, 225)</p></div><div style="background: rgb(255, 228, 181); color: black" class="color"><h3>moccasin</h3><p>rgb(255, 228, 181)</p></div><div style="background: rgb(255, 222, 173); color: black" class="color"><h3>navajowhite</h3><p>rgb(255, 222, 173)</p></div><div style="background: rgb(0, 0, 128); color: white" class="color"><h3>navy</h3><p>rgb(0, 0, 128)</p></div>
+ <div style="background: rgb(253, 245, 230); color: black" class="color"><h3>oldlace</h3><p>rgb(253, 245, 230)</p></div><div style="background: rgb(128, 128, 0); color: black" class="color"><h3>olive</h3><p>rgb(128, 128, 0)</p></div><div style="background: rgb(107, 142, 35); color: black" class="color"><h3>olivedrab</h3><p>rgb(107, 142, 35)</p></div><div style="background: rgb(255, 165, 0); color: black" class="color"><h3>orange</h3><p>rgb(255, 165, 0)</p></div><div style="background: rgb(255, 69, 0); color: black" class="color"><h3>orangered</h3><p>rgb(255, 69, 0)</p></div><div style="background: rgb(218, 112, 214); color: black" class="color"><h3>orchid</h3><p>rgb(218, 112, 214)</p></div><div style="background: rgb(238, 232, 170); color: black" class="color"><h3>palegoldenrod</h3><p>rgb(238, 232, 170)</p></div><div style="background: rgb(152, 251, 152); color: black" class="color"><h3>palegreen</h3><p>rgb(152, 251, 152)</p></div><div style="background: rgb(175, 238, 238); color: black" class="color"><h3>paleturquoise</h3><p>rgb(175, 238, 238)</p></div><div style="background: rgb(219, 112, 147); color: black" class="color"><h3>palevioletred</h3><p>rgb(219, 112, 147)</p></div><div style="background: rgb(255, 239, 213); color: black" class="color"><h3>papayawhip</h3><p>rgb(255, 239, 213)</p></div><div style="background: rgb(255, 218, 185); color: black" class="color"><h3>peachpuff</h3><p>rgb(255, 218, 185)</p></div><div style="background: rgb(205, 133, 63); color: black" class="color"><h3>peru</h3><p>rgb(205, 133, 63)</p></div><div style="background: rgb(255, 192, 203); color: black" class="color"><h3>pink</h3><p>rgb(255, 192, 203)</p></div><div style="background: rgb(221, 160, 221); color: black" class="color"><h3>plum</h3><p>rgb(221, 160, 221)</p></div><div style="background: rgb(176, 224, 230); color: black" class="color"><h3>powderblue</h3><p>rgb(176, 224, 230)</p></div><div style="background: rgb(128, 0, 128); color: black" class="color"><h3>purple</h3><p>rgb(128, 0, 128)</p></div><div style="background: rgb(255, 0, 0); color: black" class="color"><h3>red</h3><p>rgb(255, 0, 0)</p></div><div style="background: rgb(188, 143, 143); color: black" class="color"><h3>rosybrown</h3><p>rgb(188, 143, 143)</p></div><div style="background: rgb(65, 105, 225); color: black" class="color"><h3>royalblue</h3><p>rgb(65, 105, 225)</p></div><div style="background: rgb(139, 69, 19); color: white" class="color"><h3>saddlebrown</h3><p>rgb(139, 69, 19)</p></div><div style="background: rgb(250, 128, 114); color: black" class="color"><h3>salmon</h3><p>rgb(250, 128, 114)</p></div><div style="background: rgb(244, 164, 96); color: black" class="color"><h3>sandybrown</h3><p>rgb(244, 164, 96)</p></div><div style="background: rgb(46, 139, 87); color: black" class="color"><h3>seagreen</h3><p>rgb(46, 139, 87)</p></div><div style="background: rgb(255, 245, 238); color: black" class="color"><h3>seashell</h3><p>rgb(255, 245, 238)</p></div>
+ <div style="background: rgb(160, 82, 45); color: black" class="color"><h3>sienna</h3><p>rgb(160, 82, 45)</p></div><div style="background: rgb(192, 192, 192); color: black" class="color"><h3>silver</h3><p>rgb(192, 192, 192)</p></div><div style="background: rgb(135, 206, 235); color: black" class="color"><h3>skyblue</h3><p>rgb(135, 206, 235)</p></div><div style="background: rgb(106, 90, 205); color: black" class="color"><h3>slateblue</h3><p>rgb(106, 90, 205)</p></div><div style="background: rgb(112, 128, 144); color: black" class="color"><h3>slategray</h3><p>rgb(112, 128, 144)</p></div><div style="background: rgb(255, 250, 250); color: black" class="color"><h3>snow</h3><p>rgb(255, 250, 250)</p></div><div style="background: rgb(0, 255, 127); color: black" class="color"><h3>springgreen</h3><p>rgb(0, 255, 127)</p></div><div style="background: rgb(70, 130, 180); color: black" class="color"><h3>steelblue</h3><p>rgb(70, 130, 180)</p></div><div style="background: rgb(210, 180, 140); color: black" class="color"><h3>tan</h3><p>rgb(210, 180, 140)</p></div><div style="background: rgb(0, 128, 128); color: black" class="color"><h3>teal</h3><p>rgb(0, 128, 128)</p></div><div style="background: rgb(216, 191, 216); color: black" class="color"><h3>thistle</h3><p>rgb(216, 191, 216)</p></div><div style="background: rgb(255, 99, 71); color: black" class="color"><h3>tomato</h3><p>rgb(255, 99, 71)</p></div><div style="background: rgb(64, 224, 208); color: black" class="color"><h3>turquoise</h3><p>rgb(64, 224, 208)</p></div><div style="background: rgb(238, 130, 238); color: black" class="color"><h3>violet</h3><p>rgb(238, 130, 238)</p></div><div style="background: rgb(245, 222, 179); color: black" class="color"><h3>wheat</h3><p>rgb(245, 222, 179)</p></div><div style="background: rgb(255, 255, 255); color: black" class="color"><h3>white</h3><p>rgb(255, 255, 255)</p></div><div style="background: rgb(245, 245, 245); color: black" class="color"><h3>whitesmoke</h3><p>rgb(245, 245, 245)</p></div><div style="background: rgb(255, 255, 0); color: black" class="color"><h3>yellow</h3><p>rgb(255, 255, 0)</p></div><div style="background: rgb(154, 205, 50); color: black" class="color"><h3>yellowgreen</h3><p>rgb(154, 205, 50)</p></div>
+ <a href="../index.html">Back to Lessons</a>
+</body>
+</html>
View
29 public/help/ru/hacketyhack/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Hackety-Hack</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+</head>
+<body class="lesson-set">
+<h1>Hackety-Hack</h1>
+<nav id="top">
+ <a href="../index.html">Back to Main</a>
+</nav>
+<article class="resource">
+ <p>The inspiration for us to create KidsRuby was Hackety Hack. This is an edited version of the lessons from Hackety Hack by _why the lucky stiff, updated to match KidsRuby.</p>
+ <ol>
+ <li><a href="basic_programming.html">Basic Programming</a></li>
+ <li><a href="basic_ruby.html">Basic Ruby</a></li>
+ <li><a href="colors.html">Turtle Colors</a></li>
+ </ol>
+</article>
+</body>
+</html>
+
View
27 public/help/ru/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Help</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+
+ <script type="text/javascript" src="../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+</head>
+<body class="lesson-set intro">
+ <article class="resource">
+ <ol>
+ <li><a href="kidsruby/how_to_use.html">Start Here</a></li>
+ <li><a href="keyboard-shortcuts.html">Keyboard Shortcuts</a></li>
+ <li><a href="hacketyhack/index.html">Hackety-Hack</a></li>
+ <li><a href="rubywarrior/index.html">Ruby Warrior</a></li>
+ <li><a href="ruby4kids/index.html">Make Games With Gosu</a></li>
+ <li><a href="kidsruby/glossary.html">Glossary</a></li>
+ </ol>
+ </article>
+</body>
+</html>
View
317 public/help/ru/keyboard-shortcuts.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Help</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+
+ <script type="text/javascript" src="../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+</head>
+<body class="lesson-set intro">
+ <article class="resource">
+
+ <h1>Default Keyboard Shortcuts</h1>
+
+ <table>
+ <thead><tr>
+ <th align="left">PC (Windows/Linux)</th>
+ <th align="left">Mac</th>
+ <th align="left">action</th>
+ </tr></thead>
+ <tbody>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Ctrl-L</td>
+ <td align="left">center selection</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-U</td>
+ <td align="left">Ctrl-U</td>
+ <td align="left">change to upper case</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-U</td>
+ <td align="left">Ctrl-Shift-U</td>
+ <td align="left">change to lower case</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Alt-Down</td>
+ <td align="left">Command-Option-Down</td>
+ <td align="left">copy lines down</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Alt-Up</td>
+ <td align="left">Command-Option-Up</td>
+ <td align="left">copy lines up</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-F</td>
+ <td align="left">Command-F</td>
+ <td align="left">find</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-K</td>
+ <td align="left">Command-G</td>
+ <td align="left">find next</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-K</td>
+ <td align="left">Command-Shift-G</td>
+ <td align="left">find previous</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-0</td>
+ <td align="left">Option-0</td>
+ <td align="left">fold all</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Shift-0</td>
+ <td align="left">Option-Shift-0</td>
+ <td align="left">unfold all</td>
+ </tr>
+ <tr>
+ <td align="left">Down</td>
+ <td align="left">Down,Ctrl-N</td>
+ <td align="left">go line down</td>
+ </tr>
+ <tr>
+ <td align="left">Up</td>
+ <td align="left">Up,Ctrl-P</td>
+ <td align="left">go line up</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-End,Ctrl-Down</td>
+ <td align="left">Command-End,Command-Down</td>
+ <td align="left">go to end</td>
+ </tr>
+ <tr>
+ <td align="left">Left</td>
+ <td align="left">Left,Ctrl-B</td>
+ <td align="left">go to left</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-L</td>
+ <td align="left">Command-L</td>
+ <td align="left">go to line</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Right,End</td>
+ <td align="left">Command-Right,End,Ctrl-E</td>
+ <td align="left">go to line end</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Left,Home</td>
+ <td align="left">Command-Left,Home,Ctrl-A</td>
+ <td align="left">go to line start</td>
+ </tr>
+ <tr>
+ <td align="left">PageDown</td>
+ <td align="left">Option-PageDown,Ctrl-V</td>
+ <td align="left">go to page down</td>
+ </tr>
+ <tr>
+ <td align="left">PageUp</td>
+ <td align="left">Option-PageUp</td>
+ <td align="left">go to page up</td>
+ </tr>
+ <tr>
+ <td align="left">Right</td>
+ <td align="left">Right,Ctrl-F</td>
+ <td align="left">go to right</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Home,Ctrl-Up</td>
+ <td align="left">Command-Home,Command-Up</td>
+ <td align="left">go to start</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Left</td>
+ <td align="left">Option-Left</td>
+ <td align="left">go to word left</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Right</td>
+ <td align="left">Option-Right</td>
+ <td align="left">go to word right</td>
+ </tr>
+ <tr>
+ <td align="left">Tab</td>
+ <td align="left">Tab</td>
+ <td align="left">indent</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Down</td>
+ <td align="left">Option-Down</td>
+ <td align="left">move lines down</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Up</td>
+ <td align="left">Option-Up</td>
+ <td align="left">move lines up</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Tab</td>
+ <td align="left">Shift-Tab</td>
+ <td align="left">outdent</td>
+ </tr>
+ <tr>
+ <td align="left">Insert</td>
+ <td align="left">Insert</td>
+ <td align="left">overwrite</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">PageDown</td>
+ <td align="left">pagedown</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">PageUp</td>
+ <td align="left">pageup</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-Z,Ctrl-Y</td>
+ <td align="left">Command-Shift-Z,Command-Y</td>
+ <td align="left">redo</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-D</td>
+ <td align="left">Command-D</td>
+ <td align="left">remove line</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Ctrl-K</td>
+ <td align="left">remove to line end</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Option-Backspace</td>
+ <td align="left">remove to linestart</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Alt-Backspace,Ctrl-Alt-Backspace</td>
+ <td align="left">remove word left</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Alt-Delete</td>
+ <td align="left">remove word right</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-R</td>
+ <td align="left">Command-Option-F</td>
+ <td align="left">replace</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-R</td>
+ <td align="left">Command-Shift-Option-F</td>
+ <td align="left">replace all</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-A</td>
+ <td align="left">Command-A</td>
+ <td align="left">select all</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Down</td>
+ <td align="left">Shift-Down</td>
+ <td align="left">select down</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Left</td>
+ <td align="left">Shift-Left</td>
+ <td align="left">select left</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-End</td>
+ <td align="left">Shift-End</td>
+ <td align="left">select line end</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Home</td>
+ <td align="left">Shift-Home</td>
+ <td align="left">select line start</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-PageDown</td>
+ <td align="left">Shift-PageDown</td>
+ <td align="left">select page down</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-PageUp</td>
+ <td align="left">Shift-PageUp</td>
+ <td align="left">select page up</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Right</td>
+ <td align="left">Shift-Right</td>
+ <td align="left">select right</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-End,Alt-Shift-Down</td>
+ <td align="left">Command-Shift-Down</td>
+ <td align="left">select to end</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Shift-Right</td>
+ <td align="left">Command-Shift-Right</td>
+ <td align="left">select to line end</td>
+ </tr>
+ <tr>
+ <td align="left">Alt-Shift-Left</td>
+ <td align="left">Command-Shift-Left</td>
+ <td align="left">select to line start</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-Home,Alt-Shift-Up</td>
+ <td align="left">Command-Shift-Up</td>
+ <td align="left">select to start</td>
+ </tr>
+ <tr>
+ <td align="left">Shift-Up</td>
+ <td align="left">Shift-Up</td>
+ <td align="left">select up</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-Left</td>
+ <td align="left">Option-Shift-Left</td>
+ <td align="left">select word left</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Shift-Right</td>
+ <td align="left">Option-Shift-Right</td>
+ <td align="left">select word right</td>
+ </tr>
+ <tr>
+ <td align="left"></td>
+ <td align="left">Ctrl-O</td>
+ <td align="left">split line</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-7</td>
+ <td align="left">Command-7</td>
+ <td align="left">toggle comment</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-T</td>
+ <td align="left">Ctrl-T</td>
+ <td align="left">transpose letters</td>
+ </tr>
+ <tr>
+ <td align="left">Ctrl-Z</td>
+ <td align="left">Command-Z</td>
+ <td align="left">undo</td>
+ </tr>
+ </tbody>
+ </table>
+
+ </article>
+</body>
+</html>
View
46 public/help/ru/kidsruby/glossary.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>How To Use KidsRuby</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+</head>
+<body class="lesson-set">
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="../index.html">Back to Main</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+ <h1>Glossary</h1>
+
+ <article class="lesson"><h1>Welcome!</h1>
+ <section class="page"><h1>What is a glossary?</h1>
+ <p>A glossary is a collection of definitions to words that are specific to a particular subject. It's like a themed dictionary.</p>
+ </section>
+ <section class="page"><h1>Glossary</h1>
+ <p><strong>character</strong>: A single, letter, number or symbol</p>
+ <p><strong>class</strong>: A class is a blueprint to create objects. An object of a given class is called an 'instance' of that class. A class can contain attributes, methods and even other classes!</p>
+ <p><strong>method</strong>: Methods allow classes to do things. They are a set of instructions and can return a value</p>
+ <p><strong>parameter</strong>: A type of variable within parentheses, which puts a limit or limits on the method it is acting on.</p>
+ <p><strong>string</strong>: A string is any amount of characters (letters, digits, punctuation) surrounded by quotes. Both single and double quotes are used to create strings (Source: Why's Poignant Guide)</p>
+ <p><strong>icon</strong>: A picture on a screen that represents a specific file, directory, window, option, or program. (Source: The Free Dictionary)</p>
+ <p><strong>pixel</strong>:any of a number of very small picture elements that make up a picture, as on a visual display unit (Source: The Free Dictionary) </p>
+ <p><strong>attribute</strong>: A property or characteristic of an Entity. For example, the attributes of a person would be the name, age, height etc... (Source: Computing Students)</p>
+ <p><strong>variable</strong>: A symbol used to stand for the data assigned to the variable. For example, in x =50, "x" is the variable and "50" is the data.</p>
+ <p><strong>object</strong>: An item that can be selected and maneuvered, such as an onscreen graphic. These objects can include data and the procedures necessary to operate on that data.(Source: The Free Dictionary)</p>
+ <p><strong>.png</strong>: Stands for "Portable Network Graphics and is a file format for image compression, which is just a fancy term for making the size of the picture file smaller wihout decreasing the quality of the image too much.</p>
+ <p><strong>instantiate</strong>:Creating an instance of a class. For example, instantiating an instance of the class "Cat" could be "My Cat".</p>
+ </section>
+ </article>
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
View
65 public/help/ru/kidsruby/how_to_use.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>How To Use KidsRuby</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+</head>
+<body class="lesson-set">
+ <h1>How To Use KidsRuby</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="../index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Welcome!</h1>
+ <section class="page"><h1>This is KidsRuby</h1>
+ <p>Hi, and welcome to KidsRuby. We hope you are ready to have fun learning how to make computers do whatever you want them to.</p>
+ <p>To use this 'Help' system, you can click on any lesson title, just like you clicked on this one. You can use the links above here to go to the 'Previous' or to the 'Next' lesson. You can also click on the 'Back to Lessons' link to get back to the main list of lessons at any time.</p>
+ </section>
+ </article>
+ <article class="lesson"><h1>What is Ruby?</h1>
+ <section class="page"><h1>Ruby is a programming language</h1>
+ <p>The way you tell a computer what to do, is by learning a special language that the computer can understand. This kind of special language is called a 'programming language'. KidsRuby lets you program in the most awesome computer language ever, Ruby.</p>
+ <p>Ruby was invented in Japan by a very cool guy named Matz. His real name is Yukihiro Matsumoto, but everyone calls him Matz. He has given away his Ruby programming language to the world to use for free. That is pretty cool.</p>
+ </section>
+ </article>
+ <article class="lesson"><h1>How To Make It Work</h1>
+ <section class="page"><h1>Type in some Ruby to the left, then click 'Run'</h1>
+ <p>You make KidsRuby work by doing this:</p>
+ <p>1. Type in some Ruby 'code' to the left, just below where it says "Type in your code just below here:".</p>
+ <p>2. Click on the "Run" button. This will cause the computer to look at the Ruby you typed in, and do whatever it says to do.</p>
+ <p>3. Watch the computer do whatever you have told it to!</p>
+ <p>Don't worry if you do not know how to write Ruby yet. That is what this Help system is designed to do.</p>
+ </section>
+ </article>
+ <article class="lesson"><h1>Saving and Opening Your Code</h1>
+ <section class="page"><h1>You can save your code, and reopen it later</h1>
+ <p>You can save your program with KidsRuby by doing this:</p>
+ <p>1. Type in some Ruby 'code' to the left, just below where it says "Type in your code just below here:".</p>
+ <p>2. Click on the "Save" button down at the bottom of where you typed your code. This will pop up something that will ask you where you want to save the file.</p>
+ <p>3. Enter in the name for your new file. Make sure you name it somthing that ends with ".rb" like "mywork.rb"</p>
+ <p>4. Click on the "Save" button. Now you have saved your program, and can reopen it later, by clicking on the "Open" button!</p>
+ </section>
+ </article>
+
+ <article class="lesson"><h1>What To Do Next</h1>
+ <section class="page"><h1>Go 'Back to Lessons', and check out "Hackety Hack"</h1>
+ <p>Once upon a time there was an amazing guy named "_why the lucky stiff". He made a lot of programs using Ruby, and one of them was named Hackety Hack. It was designed to help kids learn how to program in Ruby.</p>
+ <p>One day, _why disappeared. He probably vanished and went back to whatever magic programming world he had originally came from. He left behind some great ideas, and we have tried to make KidsRuby with his spirit of fun and discovery. That is "_why" we have included some of his writings here for you to learn from. Have fun!</p>
+ </section>
+ </article>
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
View
36 public/help/ru/ruby4kids/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Make Games With Gosu</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+</head>
+<body class="lesson-set">
+<h1>Make Games With Gosu</h1>
+<nav id="top">
+ <a href="../index.html">Back to Main</a>
+</nav>
+<article class="resource">
+ <p>Writing games is really fun, and is the reason why a lot of people want to learn to program. Alberto Morales and Bill Davenport have been working on a series of tutorials on their website at Ruby4kids.com to show kids how to create games using Ruby and a game package called Gosu.</p>
+ <ol>
+ <li><a href="lesson_1.html">Lesson 1 - Create The Game Window</a></li>
+ <li><a href="lesson_2.html">Lesson 2 - Add A Player</a></li>
+ <li><a href="lesson_3.html">Lesson 3 - Move the Player Left</a></li>
+ <li><a href="lesson_4.html">Lesson 4 - Limiting Movement</a></li>
+ <li><a href="lesson_5.html">Lesson 5 - Moving Right, Up, and Down</li>
+ <li><a href="lesson_6.html">Lesson 6 - Adding a Dodgeball</a></li>
+ <li><a href="lesson_7.html">Lesson 7 - Getting Hit</a></li>
+ <li><a href="lesson_8.html">Lesson 8 - Escape Key Pauses the Game</a></li>
+ <li><a href="lesson_9.html">Lesson 9 - Creating Multiple Balls</a></li>
+ </ol>
+</article>
+</body>
+</html>
+
View
107 public/help/ru/ruby4kids/lesson_1.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-1-1", "../../shared/ruby4kids/code1_1.rb");
+ loadCode("#code-1-2", "../../shared/ruby4kids/code1_2.rb");
+ loadCode("#code-1-3", "../../shared/ruby4kids/code1_3.rb");
+ loadCode("#code-1-4", "../../shared/ruby4kids/code1_4.rb");
+ loadCode("#code-1-5", "../../shared/ruby4kids/code1_5.rb");
+ loadCode("#code-1-6", "../../shared/ruby4kids/code1_6.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+
+ <article class="lesson"><h1>Lesson 1 - Getting Started</h1>
+ <section class="page">
+ <p>Since you are using KidsRuby, you are ready to get started making your first game using Gosu.</p>
+ <p>This is the file that will contain our first program.</p>
+ <p>We will use the gosu library. We will do this by typing:</p>
+ <pre id="code-1-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>We will then start our game by inheriting from the <code>Gosu</code> class.</p>
+ <p>We will call our game <code>MyGame</code> like this:</p>
+ <pre id="code-1-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, inside of this class, <code>Gosu</code> needs us to define three methods:</p>
+ <p>We define our methods like so:</p>
+ <pre id="code-1-3" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>What happens here is that when the game starts, the <code>initialize</code> method is called. Then the game stays running and it goes in a loop, calling the methods: <code>update</code> and <code>draw</code>.</p>
+ <p>Update, then draw. Update, then draw. Update, then draw. This cycle repeats several times a second.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Lesson 1 - Create A Window</h1>
+ <section class="page"><h1>Create A Window</h1>
+ <p>OK, so we are almost ready to run this code. The next step that we need to do now is tell <code>Gosu</code> how big a window we want for the game.</p>
+ <p>We do this in the <code>initialize</code> method, by passing it three parameters like this:</p>
+ <pre id="code-1-4" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>What this does, is make the window 300 pixels wide by 400 pixels high. A pixel is a single dot in your screen. If you put your face right next to the display, you can almost see the dots. Those are called pixels.</p>
+ <p>The third parameter you pass to the initialize method is false. This tells gosu not to take over the whole sreen. So we will say false for this.</p>
+ <p>OK, we are almost ready to see if this works.</p>
+ <p>To show what we have so far, we have to use the class we just defined in our program.</p>
+ <p>We do this by adding the following after the class definition:</p>
+ <pre id="code-1-5" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>The first line creates an instance of the new game. Then, calling the <code>show</code> method, tells the game to show the game window.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+ <article class="lesson"><h1>Lesson 1 - Run It!</h1>
+ <section class="page"><h1>Run Your Program</h1>
+ <p>We are now ready to run the program.</p>
+ <p>Now, just click on the "Run" button</p>
+ <p>If everything worked correctly, you will have seen your screen show up. You have written your first game program!</p>
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-1-6" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Granted, this does not do anything exciting, but at least you now know how to open a window in a computer game.</p>
+ <p>Now you are ready to go on to <a href="lesson_2.html">Lesson 2</a>.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+ <a href="#top">Back to top</a>
+</body>
+</html>
+
View
88 public/help/ru/ruby4kids/lesson_2.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-2-1", "../../shared/ruby4kids/code2_1.rb");
+ loadCode("#code-2-2", "../../shared/ruby4kids/code2_2.rb");
+ loadCode("#code-2-3", "../../shared/ruby4kids/code2_3.rb");
+ loadCode("#code-2-4", "../../shared/ruby4kids/code2_4.rb");
+ loadCode("#code-2-5", "../../shared/ruby4kids/code2_5.rb");
+ loadCode("#code-2-6", "../../shared/ruby4kids/code2_6.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 2</h1>
+ <nav id="top">
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 2 - Add A Player</h1>
+ <section class="page"><h1>Create A Player</h1>
+ <p>It will be good to have a player in the game, so let's create one.</p>
+ <p>We do this by adding a new class. I will call it <code>Player</code>.
+ <p>Now, we will define what our player will do. Do this by typing:</p>
+ <pre id="code-2-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Next, we will add an icon to this player so that we can see it on the screen.</p>
+ <p>We do this by finding a .png picture. KidsRuby happens to have a picture already that you can use.</p>
+ <p>Go to your player class and add an icon to it, by typing the following:</p>
+ <pre id="code-2-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Then, we add a draw method to the player. We do this by typing:</p>
+ <pre id="code-2-3" class="sampleCode">Code automatically inserted here...</pre>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 2 - Add A Player</h1>
+ <section class="page"><h1>Add Player To Game</h1>
+ <p>Now, we're almost ready to try this again. I need to go back to the <code>MyGame</code> class first, and I need to instantiate this player.</p>
+ <p>Do this by adding this code to the initialize method of the MyGame class:</p>
+ <pre id="code-2-4" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>This tells the player which window to draw itself on.</p>
+ <p>Last, we need to add the following in the draw method of the game window:</p>
+ <pre id="code-2-5" class="sampleCode">Code automatically inserted here...</pre>
+ <p>This will draw the player when the game is running.</p>
+ <p> One last thing! We need to type <code>require 'player'</code> right under <code>require 'gosu'</code>, so that the program knows that we're using the <code>Player</code> class.
+ <p>Now, let's try it! Click on the "Run" button. Did it work?</p>
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-2-6" class="sampleCode">Code automatically inserted here...</pre>
+ <p>Now that you've learned how to add a player, why don't we move on to <a href="lesson_3.html">making the player move left in lesson 3</a>?!</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
View
100 public/help/ru/ruby4kids/lesson_3.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-3-1", "../../shared/ruby4kids/code3_1.rb");
+ loadCode("#code-3-2", "../../shared/ruby4kids/code3_2.rb");
+ loadCode("#code-3-3", "../../shared/ruby4kids/code3_3.rb");
+ loadCode("#code-3-4", "../../shared/ruby4kids/code3_4.rb");
+ loadCode("#code-3-5", "../../shared/ruby4kids/code3_5.rb");
+ loadCode("#code-3-6", "../../shared/ruby4kids/code3_6.rb");
+ loadCode("#code-3-7", "../../shared/ruby4kids/code3_7.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 3</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 3 - Move the Player Left</h1>
+ <section class="page"><h1>This is Ruby4Kids</h1>
+ <p> OK, now let's try to make the player move. In the last lesson, we had the image of the player, and now we're going to figure out how to make that player move. </p>
+ <p> In Gosu, we can use the arrow keys as a way to move our player up, down, left, and right. The game window has an update method, which is where we need to check to see if any key was pressed. In programming, we do this via conditional statements, such as <code>if</code> statements. </p>
+ <p>So, under <code>def update</code> we write:</p>
+ <pre id="code-3-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> So, what the segment above is saying, is that if the left key is pressed, the player will move to the left. However, before we can define what the left move is, we need to move the player away from a fixed variable of 50,50.</p>
+
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 3 - Move the Player Left</h1>
+ <section class="page"><h1>Adding Variables</h1>
+ <p> If we want the position to move, we have to give it some variables. the way to initialize these variables is in the initialize method. So, under the def initialize method, we already have:
+ <pre id="code-3-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> Now, we just need to add: </p>
+ <pre id="code-3-3" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> Next, we are going to replace the <code>50,50</code> in the code <code>@icon.draw(50,50,1)</code> with <code>@x, @y</code>. So, your end result is going to look like this:
+
+ <pre id="code-3-4" class="sampleCode">Code automatically inserted here...</pre>
+ <p> Now, what we did was make the icon moveable by shifting the icon from a fixed position to a variable position, using variables! These variables were initialized in the initialize method of the player. So, the starting positions for x and y were each at 50. </p>
+
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 3 - Move the Player Left</h1>
+ <section class="page"><h1>Define "Moving Left"</h1>
+ <p> Now we need to make the x position move left every time the player moves left. So, in order to do that, we have to first define "moving left" and then add a simple equation under that definition. So, we type: </p>
+
+ <pre id="code-3-5" class="sampleCode">Code automatically inserted here...</pre>
+ <p> The equation that we typed moves the icon left by 10 pixels every time we press the arrow key. Go ahead, try it! Cool, huh?</p>
+
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-3-7" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>OK, smartie pants, now that you know how to move left, let's try <a href="lesson_4.html">limiting the movement of our player in lesson 4</a>!</p>
+
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+<a href="#top">Back to top</a>
+
+</body>
+</html>
+
View
73 public/help/ru/ruby4kids/lesson_4.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-4-1", "../../shared/ruby4kids/code4_1.rb");
+ loadCode("#code-4-2", "../../shared/ruby4kids/code4_2.rb");
+ loadCode("#code-4-3", "../../shared/ruby4kids/code4_3.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 4</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 4 - Limiting Movement</h1>
+ <section class="page"><h1>The Disappearing Icon</h1>
+ <p> When running your program, did you notice that your icon disappears after a while? The guy keeps moving left until he left the screen, never to be seen again :(. </p>
+
+ <p> So, the first thing we're going to do is limit where the icon can go. One of the ways of limiting movement is by adding another conditional under <code>def move_left</code> </p>
+
+ <pre id="code-4-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> Now, what we did above was limit the movement of the icon to stay within a positive x area. That is, if x starts going less than 0, we reset the icon to be at zero. This reset acts as a limit for the icon on the screen.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+</article>
+
+
+ <article class="lesson"><h1>Lesson 4 - Limiting Movement</h1>
+ <section class="page"><h1>What "Else"?</h1>
+ <p>Now, we are going to add another conditional statement called <code>else</code>, which just means "otherwise". So, again, we type enter this code under the <code>def move_left</code>:</p>
+
+ <pre id="code-4-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>The <code>else</code>, in this case, refers to regular movement. So, if x is 0 or greater, then the movement to the left is going to be using the code that we developed in the last lesson:<code>@x = @x - 10</code>.</p>
+
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-4-3" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>So, now that we know how to move left and limit that movement, let's <a href="lesson_5.html">add and limit some other movements in lesson 5</a>!</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+<a href="#top">Back to top</a>
+</body>
+</html>
View
129 public/help/ru/ruby4kids/lesson_5.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-5-1", "../../shared/ruby4kids/code5_1.rb");
+ loadCode("#code-5-2", "../../shared/ruby4kids/code5_2.rb");
+ loadCode("#code-5-3", "../../shared/ruby4kids/code5_3.rb");
+ loadCode("#code-5-4", "../../shared/ruby4kids/code5_4.rb");
+ loadCode("#code-5-5", "../../shared/ruby4kids/code5_5.rb");
+ loadCode("#code-5-6", "../../shared/ruby4kids/code5_6.rb");
+ loadCode("#code-5-7", "../../shared/ruby4kids/code5_7.rb");
+ loadCode("#code-5-8", "../../shared/ruby4kids/code5_8.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 5</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 5 - Moving Right, Up, and Down</h1>
+ <section class="page"><h1>This is Ruby4Kids</h1>
+
+ <p>Now, we're going to learn how to move right, up, and down. To move right, we need to add another <code>if</code> statement to the <code>def update</code> under the class <code>MyGame</code>. So, let's add an <code>if</code> statement for the right key:</p>
+ <pre id="code-5-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>The part above is the same as the code for turning left, except that now we type <code>KbRight</code> instead of <code>KbLeft</code>.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 5 - Moving Right, Up, and Down</h1>
+ <section class="page"><h1>Plus 10</h1>
+
+ <p> Now, we're going to be going to the <code>Player</code> class and adding: </p>
+
+ <pre id="code-5-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> So, this time the code is a bit less similar to what we did in the last lesson. You'll notice that we added <code>+ 10</code> instead of <code>- 10</code>, because we're going right instead of left. </p>
+
+ <p> Another difference is that we limit the icon by the game window's width and then subtract a certain amount of pixels from that width. Now, we subtract those pixels, because the position x is actually on the left side of the icon. That means that we have to make up for that amount by subtracting from the pixel count. You can try putting in different numbers within: </p>
+ <pre id="code-5-3" class="sampleCode">Code automatically inserted here...</pre>
+ <p> to see what I mean, as long as both the numbers match up. </p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 5 - Moving Right, Up, and Down</h1>
+ <section class="page"><h1>Moving Up</h1>
+
+ <p> OK, now that we've accomplished going left and right, we're going to try out how to go up. So, we'll first type the following code under the <code>def update</code> in the <code>MyGame</code> class
+ <pre id="code-5-4" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>So, that part was familiar. Now, we're going to go to the <code>Player</code> class and add: </p>
+ <pre id="code-5-5" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> Now, you'll notice that both the <code>if</code> and <code>else</code> statements are both different than what we did before. The first difference is that we're now using a y coordinate. The y coordinate is used, because we are going up and down (in this case, up), rather than left and right, just like on a grid!</p>
+
+ <p> So, you might also be wondering, why is the formula <code>y < 0</code>? Isn't <code>y < 0</code> supposed to be for going down? That would have been the case, had the pixel count increased as you went up. Instead, it's the other way around. </p>
+
+ <p> Basically, it means that the very top of the screen is at 0.00 and increases as you go down the y-axis. So, as the icon moves up, it's actually decreasing the pixel count. This decrease in count is also the reason why we have a <code>- 10</code> instead of a <code>+ 10</code>.</p>.
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 5 - Moving Right, Up, and Down</h1>
+ <section class="page"><h1>Moving Down</h1>
+ <p> Now, let's finish up by adding the <code>move_down</code> code. These steps should look really familiar to the steps where we learned how to move right. First, let's write the following under the class <code>MyGame</code>, right below <code>def update</code>:
+
+ <pre id="code-5-6" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Finally, we'll type the following under the <code>player</code> class </p>
+
+ <pre id="code-5-7" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p> So, the only difference that you'll see here is that the <code>- 10</code> is changed to <code>+ 10</code>, because the numbers increase as you go down :). That's it for moving around!</p>
+
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-5-8" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>You've accomplished so much already, so why stop?! How about we turn up the heat and add some <a href="lesson_6.html">dodgeballs in lesson 6</a>!</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+<a href="#top">Back to top</a>
+
+</body>
+</html>
View
148 public/help/ru/ruby4kids/lesson_6.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-6-1", "../../shared/ruby4kids/code6_1.rb");
+ loadCode("#code-6-2", "../../shared/ruby4kids/code6_2.rb");
+ loadCode("#code-6-3", "../../shared/ruby4kids/code6_3.rb");
+ loadCode("#code-6-4", "../../shared/ruby4kids/code6_4.rb");
+ loadCode("#code-6-5", "../../shared/ruby4kids/code6_5.rb");
+ loadCode("#code-6-6", "../../shared/ruby4kids/code6_6.rb");
+ loadCode("#code-6-7", "../../shared/ruby4kids/code6_7.rb");
+ loadCode("#code-6-8", "../../shared/ruby4kids/code6_8.rb");
+ loadCode("#code-6-9", "../../shared/ruby4kids/code6_9.rb");
+ loadCode("#code-6-10", "../../shared/ruby4kids/code6_10.rb");
+ loadCode("#code-6-11", "../../shared/ruby4kids/code6_11.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 6</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 6 - Adding a Dodgeball</h1>
+ <section class="page"><h1>Creating a New Class and Randomizing</h1>
+ <p>OK, in the first lesson, we learned how to open a window in Gosu.
+ Then, we learned to draw a player inside the game window.
+ Next, learned to move this player around the game window.
+ We also limited its movement to just the bounds of the game window.</p>
+ <p>Now, we are ready to add more excitement to the game.</p>
+ <p>How about if we play dodge ball with our player? We can have a ball that appears as if thrown into the game window, and our player dodges the ball by moving with the arrow keys.</p>
+ <p>So let's try that. We already have a picture that you can use included with KidsRuby.</p>
+ <p>Start by creating a new class for our dodge ball: </p>
+
+ <pre id="code-6-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, we will make this ball come from the top of the screen and drop down from random places.</p>
+ <p>We accomplish this by setting the initial position <code>@x</code> to a random number between 0 and the width of the game window, in pixels.The <code>@y</code> position for this ball will be 0, since it is at the top during initialize. So, your code should look like this:</p>
+
+ <pre id="code-6-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>This means that when the game starts, the random method will give us a position somewhere between 0 and the width of the game window.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 6 - Adding a Dodgeball</h1>
+ <section class="page"><h1>Changing Positions, Defining, and Updating</h1>
+ <p>Now, with each update, we need to make the ball move down. So, let's say the ball moves 1 pixel with every update. We will see how fast that is.</p>
+ <p>We do this in the update, where we change the <code>@y</code> position by 1 pixel like this:</p>
+ <pre id="code-6-3" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Next, we need to just define our ball within the <code>MyGame</code> class, under the <code>def initialize</code>. So, it should look like this:</p>
+
+ <pre id="code-6-4" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Then, we go to <code>def update</code> and tell the ball to update itself. So, we type:</p>
+
+ <pre id="code-6-5" class="sampleCode">Code automatically inserted here...</pre>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 6 - Adding a Dodgeball</h1>
+ <section class="page"><h1>Adding the Icon and Drawing</h1>
+ <p>Now, just like we did with the player, we're going to need an icon for the ball, as well. So we'll just copy the <code>@icon</code> code from the <code>Player</code>class and paste it right under <code>@game_window = game_window</code> in the <code>Ball</code> class. Then, we're going to change the <code>player1.png</code> to <code>asteroid.png</code>. So, your code should look like this:</p>
+
+ <pre id="code-6-6" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Next, when we want to draw the ball, we just add the following under the <code>Ball</code>class:</p>
+
+ <pre id="code-6-7" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, the last number within the parentheses in the code above, refers to whether the ball will be dropped behind the player or in front of the player. For right now, we're going to make ball goin front of the player, which is why the number is set to <code>2</code> instead of <code>1</code>.</p>
+
+ <p> OK, now we're just going to go to the <code>MyGame</code> class and add <code>@ball.draw</code> to the <code>def draw</code> method. So, it should look like this:</p>
+
+ <pre id="code-6-8" class="sampleCode">Code automatically inserted here...</pre>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+ <article class="lesson"><h1>Lesson 6 - Adding a Dodgeball</h1>
+ <section class="page"><h1>Things are Getting Pretty Random</h1>
+
+ <p>As we have learned, we need to trap for when the ball goes off of the screen. If the ball goes beyond the screen, we want to start again, find a random position from the top of the screen, and drop the ball again.</p>
+ <p>So we can do this by adding our familiar <code>if</code> statement like this:</p>
+
+ <pre id="code-6-9" class="sampleCode">Code automatically inserted here...</pre>
+
+
+ <p>Now, we will do something else. We want the ball to start dropping from another position, not the same x position as before. So, in the line where we reset @y to 0, we also change the @x position to be another random position. So, the code should look like this:</p>
+
+ <pre id="code-6-10" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, the ball should go down as expected.</p>
+ <p>Here is the entire program you should have written so far:</p>
+ <pre id="code-6-11" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>You've made it to the end of the 6th lesson! Now, let's see if you can handle being <a href="lesson_7.html">hit by dodgeballs in lesson 7</a>!</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
+
View
117 public/help/ru/ruby4kids/lesson_7.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-7-1", "../../shared/ruby4kids/code7_1.rb");
+ loadCode("#code-7-2", "../../shared/ruby4kids/code7_2.rb");
+ loadCode("#code-7-3", "../../shared/ruby4kids/code7_3.rb");
+ loadCode("#code-7-4", "../../shared/ruby4kids/code7_4.rb");
+ loadCode("#code-7-5", "../../shared/ruby4kids/code7_5.rb");
+ loadCode("#code-7-6", "../../shared/ruby4kids/code7_6.rb");
+ loadCode("#code-7-7", "../../shared/ruby4kids/code7_7.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 7</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 7 - Getting Hit</h1>
+ <section class="page"><h1>Defining a Hit</h1>
+ <p>OK, so now it's time to make sure that when the ball hits the player, the game stops. </p>
+ <p>So, the first thing we need to do is go to the <code>Game</code> class and under <code>@ball.update</code>, we will define a hit:</p>
+
+ <pre id="code-7-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, let's go over to our player and define this <code>hit_by?</code> method. So, we'll go to the <code>Player</code> class and define what it means to be hit by the ball: </p>
+ <pre id="code-7-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, what we did above is add a method that Gosu gives us, called <code>distance</code>, where we pass the x coordinate and y coordinate of one object and the x coordinate and y coordinate of another object.</p>
+
+ <p>We also wrote that if the distance between these two coordinates is less than 50, we're going to make that a hit. </p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+ <article class="lesson"><h1>Lesson 7 - Getting Hit</h1>
+ <section class="page"><h1>More Defining</h1>
+
+ <p>Let's go back to the <code>Game</code> class. We've said that if a player is hit by a ball, we should stop the game. So, we need to define what stopping the game means. </p>
+
+ <p>Now, we'll introduce a new variable here to make the definition work, called <code>running</code>. So, under the <code>Game</code>class, we'll type:
+
+ <pre id="code-7-3" class="sampleCode">Code automatically inserted here...</pre>
+ <p> So, if we stop the game, the running will be false. However, we need to first add this <code>running</code> variable and make it equal to true. So, when the game starts, the game is running. When the player hets hit by the ball, the method <code>stop_game!</code> is going to set the variable, <code>running</code>, to false, which stops the game.</p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 7 - Getting Hit</h1>
+ <section class="page"><h1>Stop! Hammer Time</h1>
+ <p>Now, we want the player and ball to stop moving when the game stops. So, if you look at the update method, you'll see that we have all this that makes either the player move or makes the ball move. Now, that will work as long as the game is running. But, once it stops, we don't want any of that to happen. So, directly under <code>def update</code>, we'll type:
+
+ <pre id="code-7-4" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, let's go back to the <code>Player</code> class. We are now going to define two methods on the ball: x and y. To do this, we type:
+
+ <pre id="code-7-5" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>So, if you recall, the ball has x and y coordinate variables, which we cannot get to from the player. However, we can call the methods on the player. So, what we did above was call the x method, which will return the x variable and called the y method, which will return the y variable to us.
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+
+
+ <article class="lesson"><h1>Lesson 7 - Getting Hit</h1>
+ <section class="page"><h1>Getting too Close</h1>
+
+ <p>Finally, we want the player to start on a different y position. The 50 is fine for the x position, but the y position is getting too close to the top of the window. So, under <code>def intitialize(game_window)</code>, we'll change te y to 150. It should end up looking like this:</p>
+
+ <pre id="code-7-6" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>I want to make the y at 150, so it's further at the bottom. This makes it easier for me to dodge the ball.</p>
+
+ <p>Once again, here is the entire program you should have written so far:</p>
+ <pre id="code-7-7" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Alright, hot shot, it looks like you do got what it takes. Let's take it to the <a href="lesson_8.html">next level in lesson 8</a>!</p>
+ </section>
+ </article>
+
+ <a href="#top">Back to top</a>
+
+</body>
+</html>
View
125 public/help/ru/ruby4kids/lesson_8.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Ruby4Kids - Programming For The Fun Of It</title>
+
+ <!-- Load styles -->
+ <link rel="stylesheet" href="../../../css/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/master.css" type="text/css" media="screen" title="style" charset="utf-8">
+ <link rel="stylesheet" href="../../../css/jquery.snippet.min.css" type="text/css" media="screen" title="style" charset="utf-8">
+
+ <!-- Load js -->
+ <script type="text/javascript" src="../../../js/jquery/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+ <script type="text/javascript" src="../../../js/jquery/jquery.snippet.min.js"></script>
+ <script type="text/javascript" src="../../../js/lessons.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ loadCode("#code-8-1", "../../shared/ruby4kids/code8_1.rb");
+ loadCode("#code-8-2", "../../shared/ruby4kids/code8_2.rb");
+ loadCode("#code-8-3", "../../shared/ruby4kids/code8_3.rb");
+ loadCode("#code-8-4", "../../shared/ruby4kids/code8_4.rb");
+ loadCode("#code-8-5", "../../shared/ruby4kids/code8_5.rb");
+ loadCode("#code-8-6", "../../shared/ruby4kids/code8_6.rb");
+ loadCode("#code-8-7", "../../shared/ruby4kids/code8_7.rb");
+ loadCode("#code-8-8", "../../shared/ruby4kids/code8_8.rb");
+ });
+ </script>
+</head>
+
+<body class="lesson-set">
+ <h1>Ruby4Kids - Game Programming - Lesson 8</h1>
+ <nav id="top">
+ <a href="#back" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+ </nav>
+
+ <article class="lesson"><h1>Lesson 8 - Escape Key Pauses the Game</h1>
+ <section class="page"><h1>Commenting and Else</h1>
+
+ <p>In this lesson, we want to make the game reset by pressing the escape key. So, let’s go to the MyGame class and find where we typed the following:</p>
+
+ <pre id="code-8-1" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>Now, right under the code above, we’re going to type:</p>
+
+ <pre id="code-8-2" class="sampleCode">Code automatically inserted here...</pre>
+
+ <p>What we did above was add an <code>else</code> statement, which occurs after the game is stopped. </p>
+
+ <p>So, we wrote a comment under the <code>else</code>statement, which tells us that the game is currently stopped. After that, we wrote a command that should look familiar. This code just says that if the escape key is pressed, the game restarts. </p>
+
+ <a href="#prev" class="prev-lesson">&laquo; Back</a>
+ <a href="index.html">Back to Lessons</a>
+ <a href="#next" class="next-lesson">Next &raquo;</a>
+
+ </section>
+ </article>
+
+