source: 2015/30/EmilL/Pong-Vaihe1 – Nuorten peliohjelmointikurssi.htm @ 10337

Revision 6875, 22.2 KB checked in by jupipana, 7 years ago (diff)
Line 
1<!DOCTYPE HTML>
2<!-- saved from url=(0052)https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1 -->
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML 
4xmlns="http://www.w3.org/1999/xhtml"><HEAD><META content="IE=11.0000" 
5http-equiv="X-UA-Compatible">
6     <TITLE>      Pong/Vaihe1 – Nuorten peliohjelmointikurssi     </TITLE>     
7<META http-equiv="Content-Type" content="text/html; charset=UTF-8">     <!--[if IE]><script type="text/javascript">
8      if (/^#__msie303:/.test(window.location.hash))
9        window.location.replace(window.location.hash.replace(/^#__msie303:/, '#'));
10    </script><![endif]--> 
11        <LINK href="/projects/npo/search" rel="search">         <LINK href="/projects/npo/wiki/TracGuide" 
12rel="help">         <LINK title="Plain Text" href="/projects/npo/wiki/Pong/Vaihe1?format=txt" 
13rel="alternate" type="text/x-trac-wiki"><LINK title="PDF" href="/projects/npo/wiki/Pong/Vaihe1?format=pdf" 
14rel="alternate" type="text/x-trac-wiki">         <LINK title="View parent page" 
15href="/projects/npo/wiki/Pong" rel="up">         <LINK href="/projects/npo/wiki" 
16rel="start">         <LINK href="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/trac.css" 
17rel="stylesheet" type="text/css"><LINK href="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/wiki.css" 
18rel="stylesheet" type="text/css">         <LINK href="/projects/npo/chrome/common/trac.ico" 
19rel="shortcut icon" type="image/x-icon">         <LINK href="/projects/npo/chrome/common/trac.ico" 
20rel="icon" type="image/x-icon">       <LINK title="Search Nuorten peliohjelmointikurssi" 
21href="/projects/npo/search/opensearch" rel="search" type="application/opensearchdescription+xml"> 
22   
23<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/jquery.js" type="text/javascript"></SCRIPT>
24
25<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/babel.js" type="text/javascript"></SCRIPT>
26
27<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/en_US.js" type="text/javascript"></SCRIPT>
28
29<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/trac.js" type="text/javascript"></SCRIPT>
30
31<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/search.js" type="text/javascript"></SCRIPT>
32
33<SCRIPT src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/folding.js" type="text/javascript"></SCRIPT>
34     <!--[if lt IE 7]>
35    <script type="text/javascript" src="/projects/npo/chrome/common/js/ie_pre7_hacks.js"></script>
36    <![endif]--> 
37   
38<SCRIPT type="text/javascript">
39      jQuery(document).ready(function($) {
40        $("#content").find("h1,h2,h3,h4,h5,h6").addAnchor(_("Link to this section"));
41        $("#content").find(".wikianchor").each(function() {
42          $(this).addAnchor(babel.format(_("Link to #%(id)s"), {id: $(this).attr('id')}));
43        });
44        $(".foldable").enableFolding(true, true);
45      });
46    </SCRIPT>
47     <LINK href="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/style.css" 
48rel="stylesheet" type="text/css"> <!--          href="${href.chrome('site/style.css')}" /> --> 
49 
50<META name="GENERATOR" content="MSHTML 11.00.9600.17924"></HEAD>   
51<BODY>
52<DIV class="ylalinkkipalkki" id="siteheader"></DIV>
53<DIV id="banner">
54<DIV id="header"><A id="logo" href="https://trac.cc.jyu.fi/projects/npo"><IMG 
55width="326" height="73" alt="" src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/npo.png"></A> 
56      </DIV>
57<FORM id="search" action="/projects/npo/search" method="get">
58<DIV><LABEL for="proj-search">Search:</LABEL>           <INPUT name="q" id="proj-search" type="text" size="18"> 
59          <INPUT type="submit" value="Search">         </DIV></FORM>
60<DIV class="nav" id="metanav">
61<UL>
62  <LI class="first"><A 
63  href="https://trac.cc.jyu.fi/projects/npo/login">Login</A></LI>
64  <LI><A 
65  href="https://trac.cc.jyu.fi/projects/npo/wiki/TracGuide">Help/Guide</A></LI>
66  <LI><A href="https://trac.cc.jyu.fi/projects/npo/about">About Trac</A></LI>
67  <LI class="last"><A 
68  href="https://trac.cc.jyu.fi/projects/npo/prefs">Preferences</A></LI>     
69</UL></DIV></DIV>
70<DIV class="nav" id="mainnav">
71<UL>
72  <LI class="first active"><A 
73  href="https://trac.cc.jyu.fi/projects/npo/wiki">Wiki</A></LI>
74  <LI><A href="https://trac.cc.jyu.fi/projects/npo/browser">Browse
75  Source</A></LI>
76  <LI class="last"><A 
77  href="https://trac.cc.jyu.fi/projects/npo/search">Search</A></LI>     
78</UL></DIV>
79<DIV id="main">
80<DIV class="noprint" id="pagepath"><A title="View WikiStart" class="pathentry first" 
81href="https://trac.cc.jyu.fi/projects/npo/wiki">wiki:</A><A title="View Pong" 
82class="pathentry" 
83href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong">Pong</A><SPAN class="pathentry sep">/</SPAN><A 
84title="View Pong/Vaihe1" class="pathentry" href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1">Vaihe1</A> 
85</DIV>
86<DIV class="nav" id="ctxtnav">
87<H2>Context Navigation</H2>
88<UL>
89  <LI class="first"><A 
90  href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong">Up</A></LI>
91  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/WikiStart">Start
92  Page</A></LI>
93  <LI><A 
94  href="https://trac.cc.jyu.fi/projects/npo/wiki/TitleIndex">Index</A></LI>
95  <LI class="last"><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1?action=history">History</A></LI> 
96            </UL>
97<HR>
98       </DIV>
99<DIV class="wiki" id="content">
100<DIV class="wikipage searchable">
101<DIV class="trac-modifiedby"><SPAN><A title="Version 53 by teeevasa" href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1?action=diff&amp;version=53">Last
102modified</A> <A title="2014-10-14T09:31:42+03:00 in Timeline" class="timeline" 
103href="https://trac.cc.jyu.fi/projects/npo/timeline?from=2014-10-14T09%3A31%3A42%2B03%3A00&amp;precision=second">9
104months</A> ago</SPAN>             <SPAN class="trac-print">Last modified on
1052014-10-14 09:31:42</SPAN>           </DIV>
106<DIV id="wikipage">
107<P></P>
108<DIV class="wiki-toc trac-nav" style="clear: both;">
109<H4>Muilla kielillä:</H4>
110<UL>
111  <LI><A class="wiki" href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/En%3AVaihe1">English</A> 
112  </LI>
113  <LI><STRONG>Suomi</STRONG> </LI></UL></DIV>
114<P></P>
115<DIV style="text-align: left; max-width: 700px !important;"></DIV><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Johdanto"><IMG 
116align="left" src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/previous_arrow.png"></A> 
117<A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe2"><IMG align="right" 
118src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/next_arrow.png"></A> 
119<P><BR><BR><BR><BR><BR><BR></P>
120<HR>
121
122<P></P>
123<DIV class="wiki-toc">
124<OL>
125  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#Pong-pelivaihe1">Pong-peli,
126  vaihe 1</A>   </LI>
127  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#a1.Ohjelmoinninaloittaminen">1.
128  Ohjelmoinnin aloittaminen</A>   </LI>
129  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#a2.Ohjelmakoodi">2.
130  Ohjelmakoodi</A>   </LI>
131  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#a3.Olionluominen">3.
132  Olion luominen</A>   </LI>
133  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#a4.Oliopalloksi">4.
134  Olio palloksi</A>   </LI>
135  <LI><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1#a5.Lopputulos">5.
136  Lopputulos</A>   </LI></OL></DIV>
137<P></P>
138<H1 id="Pong-pelivaihe1">Pong-peli, vaihe 1</H1>
139<P>Tämä on Pong-tutoriaalin osa 1/7. Tämän vaiheen aikana </P>
140<UL>
141  <LI><STRONG>Luodaan ruudulla näkyvä pallo</STRONG> </LI></UL>
142<P>Aloitamme pelin luomisen tyhjästä projektista, joka luotiin <A class="wiki" 
143href="https://trac.cc.jyu.fi/projects/npo/wiki/PongProjektinLuominen">edellisen
144ohjeen</A> mukaan. </P>
145<P>Voit katsoa tämän ohjeen myös videona (avataksesi uuteen välilehteen paina
146Ctrl + hiiren vasen): <A class="ext-link" href="http://www.youtube.com/watch?v=51XbfQEjSEg"><SPAN 
147class="icon">​</SPAN>osa 1</A> (kesto 08:57), <A class="ext-link" href="http://www.youtube.com/watch?v=zDEJ3VZNE18"><SPAN 
148class="icon">​</SPAN>osa 2</A> (06:08). Muista katsoa videot HD-laadulla. </P><A 
149href="http://www.youtube.com/watch?v=51XbfQEjSEg"><IMG src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/youtube-pong.png"></A> 
150<P>Kun projekti on luotu, voit kokeilla ajaa ohjelmaa vaikka samantien
151painamalla näppäimistöstä <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">F5</SPAN>-näppäintä,
152valikosta Debug -&gt; Start Debugging tai klikkaamalla työkaluriviltä
153Play-symbolia. </P>
154<BLOCKQUOTE>
155  <P><IMG title="source:/trunk/help_symbols/try_to_run.png" alt="source:/trunk/help_symbols/try_to_run.png" 
156  src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/try_to_run.png"> 
157  </P></BLOCKQUOTE>Aluksi pelissä näkyy vain tyhjä ruutu.
158<P>Pelistä pääsee pois painamalla näppäimistöltä <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">Esc</SPAN> 
159(tai <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">Alt</SPAN> 
160+ <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">F4</SPAN>).
161</P>
162<P><IMG src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/vs_start_debugging.png"> 
163<IMG src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/vs_start_debugging2.png"> 
164</P>
165<HR>
166
167<P>Tämän vaiheen <EM>lopuksi</EM> peli näyttää suunnilleen tältä: </P>
168<P><IMG width="500" src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/pong1.png"> 
169</P>
170<H1 id="a1.Ohjelmoinninaloittaminen">1. Ohjelmoinnin aloittaminen</H1>
171<P>Uudessa projektissa on paljon tiedostoja. Projektin tiedostot näkyvät Visual
172Studion oikeassa reunassa. Tässä vaiheessa meitä kiinnostaa ainoastaan tiedosto
173nimeltä <STRONG>Pong.cs</STRONG>, johon tulee C#-ohjelmointikielellä
174kirjoitettavaa koodia. Tuplaklikkaa tuota tiedostoa, jolloin se aukeaa editoriin
175muokattavaksi. </P>
176<BLOCKQUOTE>
177  <P><IMG src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/SolutionExplorerPong.jpg"> 
178  </P></BLOCKQUOTE>
179<H1 id="a2.Ohjelmakoodi">2. Ohjelmakoodi</H1>
180<P>Kooditiedosto sisältää pelin koodin eli kuvauksen siitä, mitä peli tekee.
181Tätä koodia lähdemme nyt muokkaamaan. </P>
182<P>Koodia on useita rivejä, mutta nyt keskitymme vain aliohjelmaan nimeltä
183<TT>Begin</TT> (suom. aloita), joka näyttää tältä: </P>
184<DIV class="code">
185<PRE><SPAN class="k">public</SPAN> override <SPAN class="kt">void</SPAN> Begin<SPAN class="p">()</SPAN>
186<SPAN class="p">{</SPAN>
187    <SPAN class="c1">// TODO: Kirjoita ohjelmakoodisi tähän
188</SPAN>
189    PhoneBackButton<SPAN class="p">.</SPAN>Listen<SPAN class="p">(</SPAN>ConfirmExit<SPAN class="p">,</SPAN> <SPAN class="s">"Lopeta peli"</SPAN><SPAN class="p">);</SPAN>
190    Keyboard<SPAN class="p">.</SPAN>Listen<SPAN class="p">(</SPAN>Key<SPAN class="p">.</SPAN>Escape<SPAN class="p">,</SPAN> ButtonState<SPAN class="p">.</SPAN>Pressed<SPAN class="p">,</SPAN> ConfirmExit<SPAN class="p">,</SPAN> <SPAN class="s">"Lopeta peli"</SPAN><SPAN class="p">);</SPAN>
191<SPAN class="p">}</SPAN>
192</PRE></DIV>
193<P><STRONG>Begin-aliohjelma suoritetaan ensimmäisenä kun peli
194käynnistetään</STRONG>. Se on siten sopiva paikka tehdä pelin alustukset, kuten
195pelihahmojen luominen ja sijoittaminen oikeille paikoilleen. </P>
196<P>Etsi <TT>Begin</TT> koodista. <STRONG>Aliohjelman nimi</STRONG> 
197<TT>Begin</TT> on kerrottu ensimmäisen rivin lopussa ja nimen jälkeen on
198<STRONG>kaarisulut</STRONG> ´(´ ja ´)´. </P>
199<P>Nimen ja kaarisulkujen jälkeen tulee <STRONG>aaltosulut</STRONG> ´{´ ja ´}´. 
200</P>
201<P><STRONG>Aaltosulkujen väliin kirjoitetaan aliohjelmalle kuuluvat
202koodirivit.</STRONG> </P>
203<P><STRONG>//</STRONG> -alkuinen vihreällä näkyvä rivi on kommentti. Se ei tee
204pelin kannalta mitään, vaan on ainoastaan muistuttamassa pelin ohjelmoijaa eli
205sinua, että pelin alustus tehdään tässä. Voit halutessasi poistaa tuon rivin.
206</P>
207<P>Kommenttirivin jälkeen on kaksi riviä, jotka tekevät peliin
208lopetuspainikkeen. Koska emme nyt tee peliä puhelimelle, <STRONG>voit pyyhkiä
209rivin</STRONG>, joka alkaa sanalla <EM>PhoneBackButton</EM>. </P>
210<H1 id="a3.Olionluominen">3. Olion luominen</H1>
211<P>Ensimmäisenä haluamme lisätä peliimme pallon. Palloa varten luodaan olio,
212joka on tyyppiä <TT>PhysicsObject</TT> eli fysiikkaolio. Koska teemme
213fysiikkapeliä, käytämme fysiikkaolioita, jotka käyttäytyvät fysiikan lakien
214mukaan eli pomppivat, törmäävät, jne. Fysiikkaolio pitää sisällään kappaleille
215kuuluvia ominaisuuksia, kuten esimerkiksi kuvio tai massa. </P>
216<P><STRONG>Kirjoita</STRONG> <TT>Begin</TT>-aliohjelmaan, aaltosulkujen väliin
217uuden fysiikkaolion luominen: </P>
218<DIV class="code">
219<PRE>PhysicsObject pallo <SPAN class="o">=</SPAN> <SPAN class="k">new</SPAN> PhysicsObject<SPAN class="p">(</SPAN><SPAN class="mf">40.0</SPAN><SPAN class="p">,</SPAN> <SPAN class="mf">40.0</SPAN><SPAN class="p">);</SPAN>
220</PRE></DIV>
221<P>Uusi <TT>PhysicsObject</TT>-tyyppinen olio luodaan ja sijoitetaan
222<TT>PhysicsObject</TT>-tyyppiseen muuttujaan nimeltä <TT>pallo</TT>. </P>
223<UL>
224  <LI>Ensin kerrotaan, että käytössämme on <TT>PhysicsObject</TT>-tyyppinen
225  muuttuja jonka nimi on <TT>pallo</TT>. </LI></UL>
226<UL>
227  <LI>Muuttujan <TT>pallo</TT> arvoksi asetetaan uusi
228  <TT>PhysicsObject</TT>-olio, jonka tekee meille samanniminen aliohjelma.
229</LI></UL>
230<UL>
231  <LI>Aliohjelman nimen jälkeen annetaan suluissa <STRONG>parametreja</STRONG>,
232  jotka kertovat minkä kokoisen fysiikkaolion haluamme. Parametrien
233  järjestyksellä <STRONG>on</STRONG> väliä. </LI></UL>
234<P>Fysiikkaolion parametrit ovat desimaalilukuja ja ne annetaan järjestyksessä
235ensin leveys, sitten korkeus. Tässä pallon leveydeksi ja korkeudeksi asetettiin
236<TT>40.0</TT> (huomaa, että desimaaleja erottamaan käytetään
237<STRONG>pistettä</STRONG>). Mittayksikkö voi olla mitä tahansa, voit vaikka
238kuvitella sen olevan senttimetrejä. </P>
239<P>Jotta pallo tulisi osaksi peliä, täytyy se lisätä pelikentän olioiden
240joukkoon. </P>
241<P><STRONG>Kirjoita</STRONG> tämä rivi pallon luomisen jälkeen: </P>
242<DIV class="code">
243<PRE>Add<SPAN class="p">(</SPAN>pallo<SPAN class="p">);</SPAN>
244</PRE></DIV>
245<P>Komento <TT>Add</TT> lisää sille annetun olion pelikentälle. </P>
246<P>Nyt <TT>Begin</TT>-aliohjelmasi pitäisi näyttää tältä: </P>
247<DIV class="code">
248<PRE><SPAN class="k">public</SPAN> override <SPAN class="kt">void</SPAN> Begin<SPAN class="p">()</SPAN>
249<SPAN class="p">{</SPAN>
250    PhysicsObject pallo <SPAN class="o">=</SPAN> <SPAN class="k">new</SPAN> PhysicsObject<SPAN class="p">(</SPAN><SPAN class="mf">40.0</SPAN><SPAN class="p">,</SPAN> <SPAN class="mf">40.0</SPAN><SPAN class="p">);</SPAN>
251    Add<SPAN class="p">(</SPAN>pallo<SPAN class="p">);</SPAN>
252
253    Keyboard<SPAN class="p">.</SPAN>Listen<SPAN class="p">(</SPAN>Key<SPAN class="p">.</SPAN>Escape<SPAN class="p">,</SPAN> ButtonState<SPAN class="p">.</SPAN>Pressed<SPAN class="p">,</SPAN> ConfirmExit<SPAN class="p">,</SPAN> <SPAN class="s">"Lopeta peli"</SPAN><SPAN class="p">);</SPAN>
254<SPAN class="p">}</SPAN>
255</PRE></DIV>
256<P><BR></P>
257<P>Muista tallentaa tiedostosi muutaman minuutin välein. Tallentaminen tapahtuu
258joko valitsemalla ''File''-valikosta kohta ''Save Pong.cs'' tai
259näppäinkomennolla <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">Ctrl</SPAN> 
260+ <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">S</SPAN>.
261</P>
262<P>Visual Studio tosin tallentaa työsi myös silloin kun ajat pelin <SPAN style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">F5</SPAN>-näppäimellä.
263</P>
264<P>Kokeile toimiiko peli! </P>
265<BLOCKQUOTE>
266  <P><IMG title="source:/trunk/help_symbols/try_to_run.png" alt="source:/trunk/help_symbols/try_to_run.png" 
267  src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/try_to_run.png"> 
268  </P></BLOCKQUOTE>
269<H1 id="a4.Oliopalloksi">4. Olio palloksi</H1>
270<P>Pallomme ei vielä näytä pallolta. Fysiikkaoliolla on kuitenkin olemassa
271sellainen ominaisuus kuin <TT>Shape</TT> eli muoto. Haluamme muuttaa
272pallo-nimisen fysiikkaoliomme muoto-ominaisuuden ympyräksi. Olion luonnin
273jälkeen sen muotoa voidaan muuttaa seuraavalla tavalla: </P>
274<DIV class="code">
275<PRE>pallo<SPAN class="p">.</SPAN>Shape <SPAN class="o">=</SPAN> Shape<SPAN class="p">.</SPAN>Circle<SPAN class="p">;</SPAN>
276</PRE></DIV>
277<P>Pallon edessä ei enää tarvitse kirjoittaa <TT>PhysicsObject</TT>, kun se on
278kerran esitelty sen tyyppisenä muuttujana. Muodon muuttaminen täytyy tehdä vasta
279<EM>olion luonnin jälkeen</EM>. Jos se tehtäisiin sitä ennen, eihän edes olisi
280vielä olemassa mitään fysiikkaobjektia nimeltä pallo. </P>
281<P>Pallon halkaisijaksi tulee nyt 40.0, eli sen koko määräytyy olion luonnissa
282annetuista leveydestä ja korkeudesta. </P>
283<P>Lisää tämä rivi pallon luonnin ja kenttään lisäämisen väliin. Nyt
284<TT>Begin</TT>-aliohjelman pitäisi näyttää suunnilleen tältä: </P>
285<DIV class="code">
286<PRE><SPAN class="k">public</SPAN> override <SPAN class="kt">void</SPAN> Begin<SPAN class="p">()</SPAN>
287<SPAN class="p">{</SPAN>
288    PhysicsObject pallo <SPAN class="o">=</SPAN> <SPAN class="k">new</SPAN> PhysicsObject<SPAN class="p">(</SPAN><SPAN class="mf">40.0</SPAN><SPAN class="p">,</SPAN> <SPAN class="mf">40.0</SPAN><SPAN class="p">);</SPAN>
289    pallo<SPAN class="p">.</SPAN>Shape <SPAN class="o">=</SPAN> Shape<SPAN class="p">.</SPAN>Circle<SPAN class="p">;</SPAN>
290    Add<SPAN class="p">(</SPAN>pallo<SPAN class="p">);</SPAN>
291
292    Keyboard<SPAN class="p">.</SPAN>Listen<SPAN class="p">(</SPAN>Key<SPAN class="p">.</SPAN>Escape<SPAN class="p">,</SPAN> ButtonState<SPAN class="p">.</SPAN>Pressed<SPAN class="p">,</SPAN> ConfirmExit<SPAN class="p">,</SPAN> <SPAN class="s">"Lopeta peli"</SPAN><SPAN class="p">);</SPAN>
293<SPAN class="p">}</SPAN>
294</PRE></DIV>
295<P>Huomaa, että vaikka meillä oli muuttuja nimeltä pallo, se olikin aluksi
296pelissä neliön muotoinen. <EM>Tietokone ei siis ymmärrä mitä muuttujien nimet
297tarkoittavat.</EM> Se ei yleensä välitä niistä niin kauan kuin nimiä vain
298käyttää sen mielestä oikein. Nimet ovat kuitenkin tärkeitä ihmisille, jotka
299yrittävät ymmärtää ohjelmakoodia. Hyvin ja kuvaavasti nimetyt muuttujat ja
300aliohjelmat helpottavat huomattavasti koodin lukemista niin koodin kirjoittajan
301kuin lukijankin kannalta! Eihän olisi ymmärrettävää antaa pallolle nimeksi
302esimerkiksi "kolmio", "olio1" tai "sdaydfs". </P>Nyt kun ajat ohjelman (<SPAN 
303style="background: rgb(240, 236, 232); padding: 0.1em 0.4em; border: 0.2em outset rgb(206, 203, 199); border-image: none; font-size: 0.9em; white-space: nowrap;">F5</SPAN>-näppäin),
304pitäisi keskellä ruutua näkyä pallo, kuten tämän sivun alussa olevassa kuvassa.
305<BLOCKQUOTE>
306  <P><IMG title="source:/trunk/help_symbols/try_to_run.png" alt="source:/trunk/help_symbols/try_to_run.png" 
307  src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/try_to_run.png"> 
308  </P></BLOCKQUOTE>
309<H1 id="a5.Lopputulos">5. Lopputulos</H1>
310<P>Valmiin ensimmäisen vaiheen koodin näet seuraavasta linkistä: </P>
311<BLOCKQUOTE>
312  <P><A class="ext-link" href="https://trac.cc.jyu.fi/projects/npo/browser/trunk/esimerkit/Pong/Vaihe1/Pong.cs"><SPAN 
313  class="icon">​</SPAN>https://trac.cc.jyu.fi/projects/npo/browser/trunk/esimerkit/Pong/Vaihe1/Pong.cs</A> 
314  </P></BLOCKQUOTE><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Johdanto"><IMG 
315align="left" src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/previous_arrow.png"></A> 
316<A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe2"><IMG align="right" 
317src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/next_arrow.png"></A> 
318<P><BR><BR><BR><BR><BR><BR></P></DIV></DIV>
319<DIV id="attachments">
320<H3 class="foldable">Attachments</H3>
321<UL>
322  <LI><A title="View attachment" href="https://trac.cc.jyu.fi/projects/npo/attachment/wiki/Pong/Vaihe1/youtube-pong.png">youtube-pong.png</A><A 
323  title="Download" class="trac-rawlink" href="https://trac.cc.jyu.fi/projects/npo/raw-attachment/wiki/Pong/Vaihe1/youtube-pong.png">​</A> 
324        (<SPAN title="11788 bytes">11.5 KB</SPAN>) -      added by
325  <EM>anlakane</EM> <A title="2010-07-15T12:47:46+03:00 in Timeline" class="timeline" 
326  href="https://trac.cc.jyu.fi/projects/npo/timeline?from=2010-07-15T12%3A47%3A46%2B03%3A00&amp;precision=second">5
327  years</A> ago.             </LI></UL></DIV></DIV>
328<SCRIPT type="text/javascript">
329        jQuery.loadStyleSheet("/projects/npo/pygments/trac.css", "text/css");
330    </SCRIPT>
331     
332<DIV id="altlinks">
333<H3>Download in other formats:</H3>
334<UL>
335  <LI class="first"><A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1?format=txt" 
336  rel="nofollow">Plain Text</A>         </LI>
337  <LI class="last">           <A href="https://trac.cc.jyu.fi/projects/npo/wiki/Pong/Vaihe1?format=pdf" 
338  rel="nofollow">PDF</A>         </LI>       </UL></DIV></DIV>
339<DIV id="footer" lang="en" lang="en" xml:lang="en">
340<HR>
341       <A id="tracpowered" href="http://trac.edgewall.org/"><IMG width="107" 
342height="30" alt="Trac Powered" src="Pong-Vaihe1%20–%20Nuorten%20peliohjelmointikurssi_files/trac_logo_mini.png"></A> 
343     
344<P class="left">Powered by <A 
345href="https://trac.cc.jyu.fi/projects/npo/about"><STRONG>Trac
3460.12.5</STRONG></A><BR>        By <A href="http://www.edgewall.org/">Edgewall
347Software</A>.</P>
348<P class="right">Visit the Trac open source project at<BR><A href="http://trac.edgewall.org/">http://trac.edgewall.org/</A></P></DIV>
349<DIV class="alalinkkipalkki" id="sitefooter"></DIV></BODY></HTML>
Note: See TracBrowser for help on using the repository browser.