Univerzitet u Novom SaduTehnički fakultet „Mihajlo Pupin“

Zrenjanin

Predmet: Računarska grafika 2

Seminarski rad

Aplikacija – Puzzle Game

Profesor: Student:Prof. dr Ivana Berković Siniša Mihajlović IT 51/13

Smer: Informacione tehnologije

Asistent:Dr. Zdravko Ivanković

Zrenjanin, 2016.

SADRŽAJ

Cilj seminarskog rada......................................................................................................................31. UVOD......................................................................................................................................42. Korišćene tehnologije..................................................................................................................4

2.1 C# programski jezik...............................................................................................................42.2. Microsoft Visual Studio 2015...............................................................................................42.3. .NET Framework.................................................................................................................5

3. Postupak kreiranja aplikacije.......................................................................................................54. Zaključak...................................................................................................................................15

Cilj seminarskog rada

Cilj seminarskog rada je kreiranje igrice Puzzle. U igri postoji mogućnost da koristimo naše slike. Prema veličini naše slike se određuje i broj delova na koje se slika deli. Ako je slika mala podeliće se na male delove, a ako je slika veća podeliće se na veći broj delova. Postoji tri moda igranja igrice Puzzle. Modovi su laki, srednji i teški. Modovi su napravljeni tako da najlakši deli sliku na najmanje delova, dok najteži deli sliku na najviše delova. Postoji i mogućnost da nam kompjuter prikaže konačno rešenje slike.

1. UVOD

Aplikacija se naziva Puzzle Game. Sastoji se od dve klase koje su Piece i Functions. Funkcije su učitavanje slika, postavljanje modova, i mogućnost prikaza rešenja. Modovi mogu biti laki, srednji i teški. Laki mod podrazumeva veličinu dela slike da bude 200, za srednji mod da bude veličina 100 i za teški mod da bude veličina 50. Kada se učita slika se deli na delove, i na početku su pravougaonici u kojima su delovi slike obojeni su crnom bojom, kada se pomeraju onda su plave boje, a kada se stavi na tačnu lokaciju odgovarajući deo slike onda bude bele boje.

2. Korišćene tehnologije

Korišćene tehnologije predstavljaju koje smo sve tehnologije koristili prilikom izrade ove Windows aplikacije. Postoji veliki broj tehnologija koji je potreban za izradu aplikacije.

2.1 C# programski jezik

C# (C Sharp) programski jezik je jedan od mlađih programskih jezika nastao 2002. godine kao sastavni deo MS .NET Framework-a 1.0. C# je objektno orijentisani programski jezik namenjen razvoju aplikacija na .NET Framework platformi. Pošto je objekno orijentisan programski jezik, prvenstveno je sagrađen od klasa koje čine skupove objekata koji imaju zajedničku strukturu i ponašanje. Takođe kao i mnogi objektno orijentisani programski jezici, sadrži sposobnost ekapsulacije, pisanje metoda, nasleđivanje između klasa i visoke performanse tokom kompajliranja. Iz razloga enkapsulacije postoji obrazac kojim atributima različitih klasa možemo spolјa pristupiti indirektno i to metodama get i set. C# je case sensitive programski jezik, što znači da je od velike važnosti da li kucamo malim ili velikim slovima.

2.2. Microsoft Visual Studio 2015

Microsoft Visual Studio je integrisano razvojno okruženje iz Microsofta. Koristi se za razvoj kompjuterskih programa za Microsoft Windows, kao i veb sajtove, veb aplikacije i veb servise. Visual Studio koristi Microsoft platforme za razvoj softvera kao što su Windows API, Windows Forms, Windows Presentation Foundation, Windows Store i Microsoft Silverlight. Može da se piše i upravlja kodom.

Visual Studio uključuje editor koda koji podržava IntelliSense. Dolazi sa ugrađenim C# i C++ , VB NET (Visual Basic .NET) i u Visual Studio 2015 verziji F# programskim jezicima. Takođe se možep rogramirati i u drugim programskim jezicima kao što su JavaScript, CSS, XML, HTML, itd.. instaliranjem jezičkih servisa za ovo razvojno okruženje. Microsoft Visual Studio je jedan od najpopularnijih razvojnih okruženja koji pruža velike mogućnosti u razvoju programa. Njegove mane su donekle ispravljene pomoću raznih ekstenzija razvijenih kako od „Microsofta“ tako i od strane drugih programera. Konkretno kod programiranja Windows form aplikacija, on sam generiše skelet aplikacije i sve podesi automatski kako bi korisnik mogao da se bavi problemom koji treba da reši, a ne pravljenjem prozora aplikacije. Pored desktop

aplikacija takođe nudi mogućnost kreiranja i web aplikacija. Microsoft je jako dobro razvio pronalaženje i uklanjanje grešaka pri programiranju zbog toga predstavlja jako popularnu i korisnu alatku programerima.

2.3. .NET Framework

Microsoft .NET Framework je softverska platforma koja je dostupna samo na Wndows računarima. On uključuje veliki broj gotovih biblioteka kodova za uobičajene probleme u programiranju i virtuelnu mašinu koja upravlja izvršavanjem programa pisanih specijalno za .NET Framework. Biblioteka klasa .NET Framework-a obezbeđuje korisnički interfejs, pristup podacima, kriptografiju, razvoj veb aplikacija, numeričke algoritme i mrežnu komunikaciju. Programeri kombinuju biblioteke klasa sa sopstvenim kodom za kreiranje svojih programa. .NET Framework podržava više programskih jezika na način koji omogućava interoperabilnost, pri čemu svaki jezik može biti napisan na drugom. .NET Framework uključuje i dve verzije za mobilne uređaje – NET Compact Framework, je dostupna za Windows CE platforme, i uključuje Windows Mobile uređaje.

3. Postupak kreiranja aplikacije

Za kreiranje nove aplikacije u Visual Studio-u potrebno je odabrati File → New Project. U prozoru koji se zatim otvori treba izabrati Windows Forms Application. U polje Name unosi se ime nove aplikacije: PuzzleGame.

Kada se prikaže forma na nju treba dodati MenuStrip kontrolu iz Toolbox-a.

U MenuStrip kontroli upisujemo stavke Add Image, Easy Mode, Medium Mode, Hard Mode i Solve It. Imena su addImageToolStripMenuItem, easyToolStripMenuItem, mediumToolStripMenuItem, hardToolStripMenuItem, solveItToolStripMenuItem.

Na formu dodajemo i jednu Panel komponentu čije ime postavljamo na puzzleImage. Opciju Dock postavljamo na Fill, što znači da će se Panel komponenta prilagoditi formi.

Nakon ovoga dodajemo dve nove klase u projekat. Da bi to uradili iz menija odaberemo Project → Add Class. U prozoru koji se zatim otvori unosimo imena Functions i Piece i potvrđujemo klikom na dugme Add. U klase se unosi sledeći kod:

Piece.rs

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Drawing;

namespace WindowsFormsApplication1{ class Piece { // Kreira se promenljiva tipa Bitmap sa nazivom _picture public Bitmap _picture;

// Kreira se promenljiva tipa Rectangle sa nazivom _homelocation, _currentLocation.

public Rectangle _homelocation, _currentLocation;

// Konstruktor Piece, kreira se nova promenljiva _newPicture tipa Bitmap i _newHomeLocation tipa Rectangle public Piece(Bitmap _newPicture, Rectangle _newHomeLocation) { // Slika se menja sa novom slikom _picture = _newPicture; // Početna lokacija se menja sa novom početnom lokacijom _homelocation = _newHomeLocation; } // Konstruktor Contains tipa bool, kreira se nova promenljiva _point tipa Point

public bool Contains(Point _point) { // Vraća vrednost trenutne lokacije koja sadrži tačke tipa Point

return _currentLocation.Contains(_point);

}

// Konstruktor isThePieceCloseToHome bez parametara tipa bool public bool isThePieceCloseToHome() {// Ako je trenutna lokacija po X – početna lokacija X manja ili veće od 20 ili trenutna lokacija po Y – početna lokacija po Y manja ili veća od 20 vrati vrednost false. Ako je trenutna vrednost jednaka sa početnom vrednosti vrati vrednost true

if ((Math.Abs(_currentLocation.X - _homelocation.X) >= 20) || (Math.Abs(_currentLocation.Y - _homelocation.Y) >= 20)) return false; _currentLocation = _homelocation; return true; }// Konstruktor isThePieceHome bez parametara tipa bool public bool isThePieceHome() {// Vraća početnu lokaciju koja je jednaka sa trenutnom lokacijom return _homelocation.Equals(_currentLocation); } }}

Functions.cs

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Drawing;using System.Windows.Forms;

namespace WindowsFormsApplication1{ class Functions {// Statičke promenljive public static Bitmap _wholePicture, _background, _board; public static List<Piece> _pieces; public static int _targetSize = 200; public static int _numRow, _numCol, _rowHeight, _colWidth; public static Piece _movingPiece; public static Point _movingPoint; public static bool _gameOver = true;

// Funkcija LoadPicture, koristi se za učitavanje slike, slika se učitava cela u PictureBox-u u celoj širini i visini, veličina puzzle zavisi od veličine slike public static void LoadPicture(string filename, PictureBox puzzleImage, Form form) { try { using (var bm = new Bitmap(filename)) { _wholePicture = new Bitmap(bm.Width, bm.Height); using (var gr = Graphics.FromImage(_wholePicture)) { gr.DrawImage(bm, 0, 0, bm.Width, bm.Height); } } _background = new Bitmap(_wholePicture.Width, _wholePicture.Height); _board = new Bitmap(_wholePicture.Width, _wholePicture.Height);

puzzleImage.Size = _wholePicture.Size; puzzleImage.Image = _board; form.ClientSize = new Size(puzzleImage.Right + puzzleImage.Left, puzzleImage.Bottom + puzzleImage.Left); StartGame(puzzleImage); } catch (Exception ex) { MessageBox.Show(ex.Message); } }

// Funkcija StartGame, ako nije cela slika nije kraj igre public static void StartGame(PictureBox puzzleImage) { if (_wholePicture == null) return; _gameOver = false; _numRow = _wholePicture.Height / _targetSize; _rowHeight = _wholePicture.Height / _numRow; _numCol = _wholePicture.Width / _targetSize; _colWidth = _wholePicture.Width / _numCol

// Kreira se varijabla rand, i kreira se lista Piece

var rand = new Random(); _pieces = new List<Piece>(); for (int row = 0; row < _numRow; row++) { int hgt = _rowHeight; if (row == _numRow - 1) hgt = _wholePicture.Height - row * _rowHeight; for (int col = 0; col < _numCol; col++) { int wid = _colWidth; if (col == _numCol - 1) wid = _wholePicture.Width - col * _colWidth;

// Kreira se varijabla rect koji se izračunava pomoću zadate formule, slika se deli na male delove

var rect = new Rectangle(col * _colWidth, row * _rowHeight, wid, hgt);

var new_piece = new Piece(_wholePicture, rect) { _currentLocation = new Rectangle( rand.Next(0, _wholePicture.Width - wid), rand.Next(0, _wholePicture.Height - hgt), wid, hgt) };// Listi Piece se dodaju novo kreirani komadići _pieces.Add(new_piece); } }// Poziva se funkcije za pozadinu i tablu

MakeBackground(puzzleImage); DrawBoard(puzzleImage); }

// Kreira se funkcija MakeBackground, pri dodavanju nove slike čisti se prethodna slika sa površine, kreira se nova olovka tamno sive boje, debljine 4, kojom se kreira tabela, podeljena na pravougaonike okružena zadatom bojom na koja treba da dođu odgovarajući delovi slike

public static void MakeBackground(PictureBox puzzleImage) { using (var gr = Graphics.FromImage(_background)) { gr.Clear(puzzleImage.BackColor); using (var thick_pen = new Pen(Color.DarkGray, 4)) { for (int y = 0; y <= _wholePicture.Height; y += _rowHeight) { gr.DrawLine(thick_pen, 0, y, _wholePicture.Width, y); } gr.DrawLine(thick_pen, 0, _wholePicture.Height, _wholePicture.Width, _wholePicture.Height); for (int x = 0; x <= _wholePicture.Width; x += _colWidth) { gr.DrawLine(thick_pen, x, 0, x, _wholePicture.Height); } gr.DrawLine(thick_pen, _wholePicture.Width, 0, _wholePicture.Width, _wholePicture.Height); }// Kreira se nova olovka bele boje debljine 3, i kada je deo slike na odgovarajućoj poziciji oko nje se stvara okvir boje olovke using (var white_pen = new Pen(Color.White, 3)) { using (var black_pen = new Pen(Color.Black, 3)) { foreach (var piece in _pieces) { if (piece == _movingPiece) continue; gr.DrawImage(_wholePicture, piece._currentLocation, piece._homelocation, GraphicsUnit.Pixel); if (_gameOver) continue; gr.DrawRectangle(piece.isThePieceHome() ? white_pen : black_pen, piece._currentLocation); } } } } puzzleImage.Visible = true; puzzleImage.Refresh(); } // Kreira se funkcija DrawBoard, kreira se olovka plave boje debljine 4, i kada pomeramo delove slike onda su okvireni plavom bojom public static void DrawBoard(PictureBox puzzleImage) { using (var gr = Graphics.FromImage(_board)) { gr.DrawImage(_background, 0, 0, _background.Width, _background.Height); if(_movingPiece != null)

{ gr.DrawImage(_wholePicture, _movingPiece._currentLocation, _movingPiece._homelocation, GraphicsUnit.Pixel); using (var blue_pen = new Pen(Color.Blue, 4)) { gr.DrawRectangle(blue_pen, _movingPiece._currentLocation); } } } puzzleImage.Visible = true; puzzleImage.Refresh(); }// Kreira se funkcija SolveIt koja nam prikazuje rešenje cele slike public static void SolveIt(PictureBox puzzleImage) { if (_wholePicture == null) return; _gameOver = false; _numRow = _wholePicture.Height / _targetSize; _rowHeight = _wholePicture.Height / _numRow; _numCol = _wholePicture.Width / _targetSize; _colWidth = _wholePicture.Width / _numCol; _pieces = new List<Piece>(); for (int row = 0; row < _numRow; row++) { int hgt = _rowHeight; if (row == _numRow - 1) hgt = _wholePicture.Height - row * _rowHeight; for(int col = 0; col < _numCol; col++) { int wid = _colWidth; if (col == _numCol - 1) wid = _wholePicture.Width - col * _colWidth; var rect = new Rectangle(col * _colWidth, row * _rowHeight, wid, hgt); var new_piece = new Piece(_wholePicture, rect) { _currentLocation = rect }; _pieces.Add(new_piece); } } MakeBackground(puzzleImage); DrawBoard(puzzleImage); }

}}

Pored ovoga, potrebno je dodati kod i u pozadini osnovne forme:

Form1.cs

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;

using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows.Forms;

namespace WindowsFormsApplication1{ public partial class Form1 : Form { public Form1() { InitializeComponent(); }

// Kreira se dogadjaj addImageToolStripMenuItem_Click i kada kliknemo na Add Image otvori se dijalog preko kojeg možemo da tražimo slike odgovarajućih formata, poziva se funkcija LoadPicture private void addImageToolStripMenuItem_Click(object sender, EventArgs e) { var ofd = new OpenFileDialog { Filter = "Graphics Files |*.jpg;*.gif;*.png|All Files|*.*" }; if (ofd.ShowDialog() == DialogResult.OK) { Functions.LoadPicture(ofd.FileName, puzzleImage, this); } }// Kreira se događaj SelectMode za biranje moda, može biti easy, medium i hard, ako je easy veličina delića slike je 200, medium 100 i ako je hard onda je 50 private void SelectMode(object sender, EventArgs e) { var mode = (ToolStripMenuItem)sender; if (mode != easyToolStripMenuItem) { if (mode == mediumToolStripMenuItem) { Functions._targetSize = 100; } else if (mode == hardToolStripMenuItem) { Functions._targetSize = 50; } } else { Functions._targetSize = 200; } Functions.StartGame(puzzleImage); }// Kreira se događaj puzzleImage_MouseDown koja se koristi na Panelu puzzleImage

private void puzzleImage_MouseDown(object sender, MouseEventArgs e) { Functions._movingPiece = null;

foreach (var piece in Functions._pieces) { if (!piece.isThePieceHome() && piece.Contains(e.Location)) Functions._movingPiece = piece; } if (Functions._movingPiece == null) return; Functions._movingPoint = e.Location; Functions._pieces.Remove(Functions._movingPiece); Functions._pieces.Add(Functions._movingPiece); Functions.MakeBackground(puzzleImage); Functions.DrawBoard(puzzleImage); }// Kreira se događaj puzzleImage_MouseMove koja se koristi na Panelu puzzleImage

private void puzzleImage_MouseMove(object sender, MouseEventArgs e) { if (Functions._movingPiece == null) return; int dx = e.X - Functions._movingPoint.X; int dy = e.Y - Functions._movingPoint.Y; Functions._movingPiece._currentLocation.X += dx; Functions._movingPiece._currentLocation.Y += dy; Functions._movingPoint = e.Location; Functions.DrawBoard(puzzleImage); }// Kreira se događaj puzzleImage_MouseUp koja se koristi na Panelu puzzleImage

private void puzzleImage_MouseUp(object sender, MouseEventArgs e) { if (Functions._movingPiece == null) return; if (Functions._movingPiece.isThePieceCloseToHome()) { Functions._pieces.Remove(Functions._movingPiece); Functions._pieces.Reverse(); Functions._pieces.Add(Functions._movingPiece); Functions._pieces.Reverse(); Functions._gameOver = true; foreach (var piece in Functions._pieces) { if (piece.isThePieceHome()) continue; Functions._gameOver = false; break; } } Functions._movingPiece = null; Functions.MakeBackground(puzzleImage); Functions.DrawBoard(puzzleImage); }

// Kreira se događaj solveItToolStripMenuItem_Click i poziva se funkcija SolveIt koja rešava puzzle

private void solveItToolStripMenuItem_Click(object sender, EventArgs e) { Functions.SolveIt(puzzleImage); } } }

Poslednji korak je povezivanje događaja:addImageToolStripMenuItem_Click sa Add Image,SelectMode sa Easy Mode, Medium Mode, Hard Mode,solveItToolStripMenuItem_Click sa Solve It.Potrebno je povezati Panel puzzleImage sa događajima MouseMove, MouseUp i MouseDown.

Konačni izgled aplikacije sa otvorenom slikom za rešavanje u Easy Mode

Konačni izgled aplikacije sa otvorenom slikom na kojoj je primenjen događaj Solve It

4. Zaključak

Mogućnosti za dalji razvoj aplikacije je da se na primer može privremeno prikazati rešenje Puzzle i onda da se nastavi igra. Mogućnost prikaza osvojenih poena, i kreiranja tabele sa najboljim rezultatima, ali za svaki mod posebno. Kao što bi moglo i da se kreira mogućnost pomoć kompjutera za naredni potez. Igra bi možda mogla da se proširi do velikih granica, kao na primer da postoji 50 nivoa na svakom modu, i prelazi se nivo po nivo. I na svakom sledećom nivou da se dobije nagrada pomoć od kompjutera. Mogućnost može biti da se Puzzle reši u zadatom vremenu, itd. To su neke mogućnosti s kojim bi se ova igra mogla unaprediti.

LITERATURA

1. https://www.youtube.com/watch?v=4LaO7h_VGrM 2. https://sh.wikipedia.org/wiki/Microsoft_SQL_Server 3. http://en.wikipedia.org/wiki/Microsoft_Visual_Studio 4. https://en.wikipedia.org/wiki/.NET_Framework 5. https://en.wikipedia.org/wiki/C_Sharp_%28programming_language%29