September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Jednoduchá hra PingPong v C#

Zde vám ukážu základy, jak si lze jednoduše vytvořit hru v jazyce C#. Nebudete ani potřebovat nějaké rozsáhlé znalosti, žádný speciální software (snad kromě Visual Studia) a dostanete se k dobrému výsledku.

Takže můžeme začít :)

Hra má velice jednoduchý vzhled, v podstatě nemusíme nic složitě malovat. Jednoduše si vystačíme s komponenty, které nám již Visual Studio nabízí.

Za prvé potřebujeme aby jsme měli hru na Celou obrazovku, neměli žádně okraje a nebyl vidět kurzor myši. Toho docílíme třemi řádky kódu.

cursor.Hide();                                  // Schová kurzor
this.FormBorderStyle = FormBorderStyle.None;    // Vymaže okraje Formu
this.Bounds = Screen.PrimaryScreen.Bounds;      // Celá obrazovka

Když to vyzkoušíme tak vidíme, že máme všechno, čeho jsme chtěli docílit. Můžeme tedy jít dál. Jako další potřebujeme samotnou hrací plochu. Do Formu vložíme Panel z Toolboxu, a po vložení vyplníme celý Form pomocí Docku v Properties Panelu. Nyní si vytvoříme pálku a míček pomocí dvou PictureBoxů. Velikosti si dejte, jaké vám vyhovují (já budu mít míček 40x40 a pálku 100x20) a nastavte jim nějakou barvu pozadí (já zvolím míček Červený a pálku černou).

Dále budeme potřebovat Timer, kterým budeme aktualizovat hrací pole a nastavíme Interval na 1 milisekundu. Pak ho po načtení Formu zapneme.

timer1.Enabled = true;  // Zapne Časovač
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Pak 2x klikneme na Timer a můžeme zapisovat kód.

První si nastavíme aby se pálka pohybovala pomocí kurzoru myši. Toho docílíme že nastavíme pozici pálky na pozici kurzoru, ale chceme pohybovat jen z leva do prava a naopak, takže pouze osu X. Dále jí přesuneme více ke spodnímu okraji.

palka.Left = Cursor.Position.X - (palka.Width / 2);     // Střed pálky se bude pohybovat po ose X.
palka.Top = playground.Bottom - (playground.Bottom / 10);       // pálka bude u spodního okraje

Nyní si vytvoříme 3 veřejné proměnné. speed_Top, speed_Left, score.

public int speed_top = 3;       // proměná vertikální rychlosti
public int speed_left = 3;      // proměná horizontální rychlosti
public int score = 0;           // proměná dosaženého scóre.

Tak už bychom si mohli míček rozpohybovat. Uděláme to tak že do našeho časovače (Timeru) vložíme následující kód.

micek.Left += speed_left;       // Rozpohybuje míček po ose X.
micek.Top += speed_top;         // Rozpohybuje míček po ose Y.

Když nyní spustíme program, uvidíme, že se míček pohybuje šikmo. To je tím, že "jede" zároveň do prava i dolů. Naší pálkou ovšem jen projede. Ale my potřebujeme, aby se to od pálky odrazilo.

Za prvé musíme míčku říct, kdy se vlastně s pálkou srazil.

if (micek.Bottom >= palka.Top && micek.Bottom <= palka.Bottom && micek.Right >= palka.Left && micek.Right <= palka.Right)       // Nastavíme kdy bude kolize míčku s pálkou
{}

Dále musíme určit, co má míček udělat. Chtěli bychom, aby se odrazil a odražení se je vlastně jen změna směru.

speed_top = -speed_top;         // obrátí směr míčku nahoru

Teď nám lítá míček a dokonce se odráží od pálky. Ale jelikož nemáme spoluhráče tak potřebujeme aby se nám míček odrážel zpět od stěn. Takže si nastavíme kolize se stěnami.

if( micek.Left <= playground.Left)      // Když míček narazí na levou stěnu změní horizontální směr
        speed_left = -speed_left;

if ( micek.Right >= playground.Right)   // Když míček narazí na pravou směru změní horizontální směr
        speed_left = -speed_left;

if ( micek.Top <= playground.Top)       // Když míček narazí na horní stěnu změní vertikální směr
        speed_top = -speed_top;

Už máme skoro funkční hru. Teď když vyzkoušíme, tak to funguje, ale my chceme, aby se hra zastavila, když míček spadne pod pálku - tedy když se dotkne spodní stěny hracího pole. Opět nastavíme kolizi na stěnu. A při kolizi zastavíme časovač, čímž také zastavíme hru.

if (micek.Bottom >= playground.Bottom)
 {
        timer1.Enabled = false;         // Zastavíme časovač
        this.Close();                   // Vypne hru
 }

Nyní když míček skončí pod pálkou, celá hra zastaví a vypne.

To jsou základy. Poté si do hry můžete přidat Skóre, Menu, Obtížnost, různé bloky na ničení atp. Pro ukázku, jak tato hra vůbec pracuje, to ale bohatě stačí :)

Přiložil sem soubor se svou verzí, jak by to mohlo vypadat. Tato hra je tak jednoduchá, že to ani nic víc nepotřebuje :)

Samozřejmě kdyby jste měli nějaké dotazy tak pište a rád poradím, když budu znát odpověď.


Galerie

Hra byla vytvořena v roce 2015.

 

Stáhnout

Staženo 482x (48.3 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Všechny články v sekci
Zdrojákoviště C# .NET - Objektově orientované programování
Článek pro vás napsal Verquido
Avatar
Jak se ti líbí článek?
8 hlasů
.
Aktivity (2)

 

 

Komentáře

Avatar
Milan Křepelka
Redaktor
Avatar
Milan Křepelka:21.10.2015 14:58

Jednoduché, ale na začítečníka dobré. Budou zdrojáky? Občas se mi stalo, že když kostka jela zprava doleva a já s plošinou taky, a kostka měla dokadnout na pravý kraj plošiny, tak propadla. Ale určitě se měla odrazit.

 
Odpovědět
21.10.2015 14:58
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Milan Křepelka
Verquido:21.10.2015 15:56

Díky moc :) Zdroják sem můžu hodit, ale je to vlastně skoro to samé jako je tu popsáno. To s tím propadem si myslím že je špatně definovaná kolize s pálkou, ale nemohu přijít jak by se to dalo vylepšit :(

 
Odpovědět
21.10.2015 15:56
Avatar
Bohouš Hubert:21.10.2015 16:01

dobrý

 
Odpovědět
21.10.2015 16:01
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Bohouš Hubert
Verquido:21.10.2015 16:03

Děkuji ti :D

 
Odpovědět
21.10.2015 16:03
Avatar
Petr Čech
Redaktor
Avatar
Petr Čech:21.10.2015 16:07

Hodilo by se zmínit, že je to ve Winforms. Sice to z toho vyplývá, ale začátečníka to zmate. A to je docela problém, když je to pro začátečníky ;)

Odpovědět
21.10.2015 16:07
the cake is a lie
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Petr Čech
Verquido:21.10.2015 16:12

Dobrá, musím si všechny problémy zapsat a potom to řešit najednou, protože na každou aktualizaci článku musím čekat kvůli schválení :) Ale určitě to tam nějak zmíním. Díky za upozornění.

 
Odpovědět
21.10.2015 16:12
Avatar
nalimleinad
Člen
Avatar
nalimleinad:23.10.2015 21:34

Hru spustím, avšak kostka nejde chytit. Vždy normálně projede čárkou a jakmile propadne, hra mi spadne. :P

 
Odpovědět
23.10.2015 21:34
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:23.10.2015 22:39

Dělal si podle tutoriálu nebo je to z toho hotového?

 
Odpovědět
23.10.2015 22:39
Avatar
nalimleinad
Člen
Avatar
Odpovídá na Verquido
nalimleinad:23.10.2015 22:43

Zkoušel jsem z hotového, C# se nevěnuju, takže u sebe nemám nainstalované studio. Jinak spouštěl jsem jak debug verzi, tak normální a bohužel ani jedna mi nefungovala.

 
Odpovědět
23.10.2015 22:43
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:23.10.2015 22:46

Ted sem na mobilu, ale zítra až bude čas se na to mrknu a skusim zjistit kde je chyba.

 
Odpovědět
23.10.2015 22:46
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:24.10.2015 17:24

Tak tam byla jen chyba v kolizi s míčkem.

 
Odpovědět
24.10.2015 17:24
Avatar
nalimleinad
Člen
Avatar
nalimleinad:24.10.2015 18:42

A stále je ?

 
Odpovědět
24.10.2015 18:42
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:24.10.2015 19:46

Ano, čekám na publikaci nové verze článku takže to ještě opravené není :)

 
Odpovědět
24.10.2015 19:46
Avatar
nalimleinad
Člen
Avatar
nalimleinad:24.10.2015 21:13

Dobrá, určitě vyzkouším, až bude opraveno. ;)

 
Odpovědět
24.10.2015 21:13
Avatar
nalimleinad
Člen
Avatar
nalimleinad:28.10.2015 9:38

Tak nyní funguje v pořádku. :) Jen malé detaily, o které ti nejspíš ani nešlo, když jsi tohle psal a tvým záměrem bylo udělat jen funkční pohyb kostky, jezdec a odrážení od něho a stran. Každopádně jezdec by se mohl zastavit stranou o konec obrazovky, né středem. Kulička by mohla měnit rychlost podle toho, jak dlouho je hra zapnutá, aby z toho bylo alespoň trošku něco záživného a né jen nudné odrážení. A v jako poslední řadě mi přijde, že ta kostka letí takovým sekaným pohybem. Nevím jestli to není jen visuální klam vzhledem k tomu, že je objekt hranatý, každopádně nějak mi to tam nesedí. :-) Neber to jako rýpání, jen mé poznatky a můj názor ze zkoušení tvého výtvoru. ;-)

 
Odpovědět
28.10.2015 9:38
Avatar
Tomáš Brůna
Redaktor
Avatar
Tomáš Brůna:29.10.2015 15:05

Ahoj, zkoušel jsem to podle tutoriálu a kostka letí hrozně sekavě, nevíš čím to je?
Zkoušel jsem i jiný sprite ale problém nezmizel :)

Odpovědět
29.10.2015 15:05
Vi veri universum vivus vici
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:29.10.2015 20:35

Ahoj, já tenhle návod bral spíš pro začátečníky aby si uměli představit jak to vůbec funguje :) Samozřejmě že by šlo udělat spoustu dalších vylepšení jako bodový systém, zarážky na stěny, různé překážky atd, ale jak říkám tohle je jen na to aby se rozpohybovala kostka a odrážela se :) A ten sekaný pohyb tam je, ale to se mi zdá že je jen kvůli rychlosti vykreslování nové pozice kostky (1 milisekunda). Nejsem si jist jak to vyřešit, ale určitě to nějak jde. Pokud by někdo věděl tak to sem můžete napsat rád se poučím :)

 
Odpovědět
29.10.2015 20:35
Avatar
Tomáš Brůna
Redaktor
Avatar
Odpovídá na Verquido
Tomáš Brůna:29.10.2015 20:40

už jsem na to přišel, u timeru se musí zmenšit interval

Odpovědět
29.10.2015 20:40
Vi veri universum vivus vici
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Tomáš Brůna
Verquido:29.10.2015 20:41

Počkat, ale myslím že je tam na Timeru 1 milisekunda, ono jde i míň? :D

 
Odpovědět
29.10.2015 20:41
Avatar
nalimleinad
Člen
Avatar
nalimleinad:29.10.2015 20:44

Jen tak hádám, ale vydělíš jí 1000 ? :D

 
Odpovědět
29.10.2015 20:44
Avatar
Tomáš Brůna
Redaktor
Avatar
Odpovídá na Verquido
Tomáš Brůna:29.10.2015 20:51

Já tam měl defaultně 100ms

Odpovědět
29.10.2015 20:51
Vi veri universum vivus vici
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:29.10.2015 20:56

Teď nějak nechápu, tu milisekundu ještě tisícem? :D to nevím, ale je to možný :D

 
Odpovědět
29.10.2015 20:56
Avatar
nalimleinad
Člen
Avatar
Odpovídá na Verquido
nalimleinad:29.10.2015 20:58

Přesně tak jsem to myslel, aby jsi z toho měl mikrosekundu :D Ale říkám, jen hádám :P

 
Odpovědět
29.10.2015 20:58
Avatar
Verquido
Redaktor
Avatar
Odpovídá na nalimleinad
Verquido:29.10.2015 21:01

Někdy to vyzkouším :D

 
Odpovědět
29.10.2015 21:01
Avatar
Neaktivní uživatel:12.12.2016 18:30

Všetko som urobil správne a stále to nefunguje :(

Odpovědět
12.12.2016 18:30
Neaktivní uživatelský účet
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Verquido:13.12.2016 7:48

Tak tam máš někde možná nějakou chybičku. Co ti přesně nejde?

 
Odpovědět
13.12.2016 7:48
Avatar
Odpovídá na Verquido
Neaktivní uživatel:13.12.2016 8:15

Ked spustím (f5) tak sa mi tam zobrazí len palka a lopta a nedá sa s nou hýbať

Odpovědět
13.12.2016 8:15
Neaktivní uživatelský účet
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Verquido:15.12.2016 7:49

A máš přidaný a zapnutý časovač? Pošli kód :)

 
Odpovědět
15.12.2016 7:49
Avatar
Neaktivní uživatel:15.12.2016 8:37

Mám ho pridaný aj interval nastavnený . A zapnutý to myslíš ...?

Odpovědět
15.12.2016 8:37
Neaktivní uživatelský účet
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Verquido:16.12.2016 16:20

jo, jak říkám pošli kód a třeba z toho něco vyčtu :)

 
Odpovědět
16.12.2016 16:20
Avatar
Anastázia Pook:2.12.2018 16:26

Chcela som sa spýtať, že ako zobrazim ten naprogramovany kod? Keď som si to stiahla tak ide to, len potrebovala by som ten kód.

 
Odpovědět
2.12.2018 16:26
Avatar
Verquido
Redaktor
Avatar
Odpovídá na Anastázia Pook
Verquido:3.1.2019 19:48

Ve staženém archivu je celý kód. Je tam celé řešení.

 
Odpovědět
3.1.2019 19:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 32 zpráv z 32.