/
lesson_6.html
148 lines (103 loc) · 7.86 KB
/
lesson_6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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">« Back</a>
<a href="index.html">Back to Lessons</a>
<a href="#next" class="next-lesson">Next »</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">« Back</a>
<a href="index.html">Back to Lessons</a>
<a href="#next" class="next-lesson">Next »</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">« Back</a>
<a href="index.html">Back to Lessons</a>
<a href="#next" class="next-lesson">Next »</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">« Back</a>
<a href="index.html">Back to Lessons</a>
<a href="#next" class="next-lesson">Next »</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">« Back</a>
<a href="index.html">Back to Lessons</a>
<a href="#next" class="next-lesson">Next »</a>
</section>
</article>
<a href="#top">Back to top</a>
</body>
</html>