python2017/vihollispeli.html at master · linkki/python2017 · GitHub

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
      <!-- HEAD SECTION-->
<head>
    <meta charset="utf-8">
    <title>Linkki</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!-- MAIN STYLE SECTION-->
    <link href="assets/plugins/isotope/isotope.css" rel="stylesheet" media="screen" />
    <link href="assets/plugins/fancybox/jquery.fancybox.css" rel="stylesheet" />
    <link href="assets/plugins/IconHoverEffects-master/css/component.css" rel="stylesheet" />
    <link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/about-achivements.css" rel="stylesheet" />
    <link id="mainStyle" href="assets/css/style.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <!-- END MAIN STYLE SECTION-->
</head>
<!-- END HEAD SECTION-->

     <!-- BODY SECTION-->
<body>

     <!-- HEADER SECTION-->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="fa fa-bars mobile-bars" style=""></span>
                </button>
                <a class="navbar-brand" href="index.html" >
                    Linkki<!-- logo here-->
                </a>
            </div>
            <div class="navbar-collapse collapse" data-scrollreveal="enter from the right 50px">
                <ul class="nav navbar-nav">
                    <li class=""><a href="index.html">Home</a></li><!-- menu links-->
                    <li><a href="perusasiat.html">Perusasiat</a></li>
                    <li><a href="rakenteita.html">Lisää rakenteita</a></li>
                    <li><a href="funktiot.html">Funktiot</a></li>
                    <li><a href="kohtipelia.html">Kohti peliä</a></li>
                    <li><a href="pygame.html">Peliohjelmoinnin alkeet</a></li>
                    <li><a href="vihollispeli.html">Vihollispeli</a></li>
                </ul>
            </div>

        </div>
    </div>
     <!-- END HEADER SECTION-->

    <!--PAGE CONTENT-->
    <!-- HOMEPAGE SECTION-->

    <section id="Homepage">
        <div class="container">
            <div class="row">
                <div data-scrollreveal="wait 0.5s and then ease-in-out 50px" class="col-md-6 col-md-offset-3">

                    <div class="align-center">
                        <h2 class="main-text">VIHOLLISPELI</h2>
                    </div>
                </div>
            </div>

    </section>

    <section style="margin-top:20px;">
        <div class="container">
            <div class="row">
              <div class="">

                Nyt meillä on liikkuva hahmo. Seuraavaksi tehdään vihollispeli.

                <h2> Tehtävä 1: Vihollinen </h2>
                Jos sinulla ei ole vielä piirrettynä viholliselle sopivaa kuvaa, tee se nyt. Luo koodiisi
                <code> viholliset </code> -lista heti <code> hahmot </code> -listan jälkeen. Viholliset -listasta tulee muuten samanlainen kuin <code> hahmot
                </code> -listasta, mutta se tulee sisältämään vihollisia. Jos et muista enää mitään <code> hahmot </code> -listasta,
                palaa katsomaan edellisen osan <a href="pygame.html#kontrolli"> kontrolli </a> -lukua.

              </br> </br>

              Alusta listaan yksi elementti viholliskuvallasi. Listan tulee näyttää nyt suunnilleen seuraavalta, "vihollinen.png" tilalla oma tiedostonimesi:

</br></br>
<pre>
viholliset = [["vihollinen.png", 200, 200]]
</pre>

<h2> Tehtävä 2: Tarvittavat muutokset koodiin </h2>
Koodissasi on ehto, jonka mukaan <code>hahmot</code> -listan hahmot ilmestyvät näytölle vasta kun painetaan välilyöntiä.
Vihollinen ei kuitenkaan nyt ilmesty samalla näytölle koska se ei kuulu <code>hahmot</code> -listaan. Tee nyt tarvittavat muutokset,
jotta <code>viholliset</code> -listan vihollinen ilmestyy näytölle välilyöntiä painettaessa.

</br> </br>
Sinun täytyy ensin muokata <code> kontrolli </code> -funktion määrityksessä sen parametreja. Lisää funktion parametriksi vihollislista seuraavasti:

</br></br>
<pre>
def kontrolli(hahmot, tapahtuma, viholliset):
</pre>
</br>
ja muokkaa myös funktion kutsumista seuraavaksi:
</br></br>
<pre>
kontrolli(hahmot, tapahtuma, viholliset)
</pre>
</br>

Tämän jälkeen katso koodisi ehtolauseen
</br></br>
<pre>
if tapahtuma.key == pygame.K_SPACE:
</pre>
</br> sisältöä. Lisää sinne <code> viholliset </code> listan läpikäynti niin että vihollisen näyttämisen <code> False </code> -arvo muutetaan <code>True</code>ksi.

</br></br>
Myös piirtaminen -funktiota täytyy muokata jotta viholliset piirretään. Muokkaa sitä samaan tapaan kuin kontrolli-funktiota, eli
aseta funktio ottamaan parametrina myös viholliset -lista. Viholliset-listan sisältö piirretään samankaltaisella for-silmukalla kuin
hahmot-listan sisältö.

<h2> Tehtävä 3: Pelihahmo kuolee osuessaan viholliseen </h2>

Nyt pelissämme on hahmo, joka liikkuu nuolinäppäimillä, sekä vihollinen joka on paikoillaan. Seuraavaksi koodaa seuraavilla ohjeilla toiminnallisuus, jonka
mukaan hahmo kuolee osuessaan mihin tahansa viholliset-listan sisältämään viholliseen.

</br> </br> 1. Haluamme, että hahmot-listan ensimmäinen hahmo eli päähahmomme kuolee osuessaan mihin tahansa viholliset-listan viholliseen. Koodaa siis esimerkiksi seuraavanlainen for-silmukka kontrolli-funktion alkuun:</br>
</br>
<pre>
for vihollinen in viholliset:
</pre>

</br>
Silmukan sisään tee ehto, joka tarkistaa ovatko vihollisen ja hahmot-listan ensimmäisen hahmon koordinaatit samat. Mikäli ovat,
poista päähahmo listasta seuraavalla komennolla:
</br></br>
<pre>
del hahmot[0]
</pre>

<h2> Tehtävä 4: Vihollinen liikkumaan </h2>

Jotta pelistä tulisi kiinnostavampi, vihollinen pitää saada liikkumaan. Koodaa seuraavanlainen liikkumiskäyttäytyminen viholliselle
kontrolli-funktioon:
</br></br>
<pre>
if vihollinen[1] > 640:
    vihollinen[1] = 0
else:
    vihollinen[1] += 10
</pre>
Koodissa siis liikutetaan vihollista oikealle, ja kun vihollinen menee näytön yli oikealta, se siirretään näytön vasempaan reunaan.

<h2> Tehtävä 5: Monta vihollista </h2>
Lisää viholliset-listaan sen alustuksessa useampi vihollinen eri kohdille näyttöä ja kokeile peliä.

<h2> Tehtävä 6: Vihollinen satunnaiseen pystysijaintiin näytöllä </h2>
Muuta kontrolli-funktion vihollisten sijainnin muuttamista siten, että kun vihollinen siirretään takaisin näytön vasempaan reunaan, sen
pystykoordinaatti arvotaan nollan ja näytön korkeuden (400) väliltä.
              </div>
            </div>
        </div>
    </section>


     <!--END HOMEPAGE SECTION-->

     <!-- END FOOTER SECTION-->
     <!-- SCROLLUP LINK SECTION-->
    <a href="#Homepage" class="scrollup"><i class="fa fa-chevron-up"></i></a>
     <!--END SCROLLUP LINK SECTION-->
    <!-- STYLE SWITCHER SECTION-->
    <div  class="panel" style="color:white">
        <div id="styledemo"  style="left: 0px;">
		<span id="theme_blue" style="background-color:#37AFFF" ></span>
		<span id="theme_green" style="background-color:#469E66" ></span>
		<span id="theme_brown" style="background-color:#E69351" ></span>
		<span id="theme_red" style="background-color:#E7484E" ></span>
            </div>
</div>
<a class="trigger" href="#"></a>
    <!-- END STYLE SWITCHER SECTION-->
    <!-- MAIN SCRIPTS SECTION-->
    <script src="assets/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/scrollReveal.js"></script>
    <script>
        window.scrollReveal = new scrollReveal(); //please put this script here to show animation at the time of scroll
    </script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
    <script src="assets/plugins/isotope/jquery.isotope.min.js"></script>
    <script src="assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
    <script src="assets/js/jquery.localscroll-1.2.7-min.js"></script>
    <script src="assets/js/jquery.appear.js"></script>
    <script src="assets/scripts/main.js"></script>

     <!--END MAIN SCRIPTS SECTION-->
</body>

    <!--END  BODY SECTION-->
</html>