[ Pobierz całość w formacie PDF ]
.Na szczęście istniejÄ… także inne (taÅ„sze) pakiety graficzne, zktórym możesz skorzystać.Sposoby tworzenia i optymalizacji obrazków sÄ… takie same wewszystkich dostÄ™pnych programach.Aby gra byÅ‚a atrakcyjna graficznie, wykorzystaÅ‚am fakt, iż jej angielska nazwa ( tic-tac-toe ) skÅ‚ada siÄ™ z dziewiÄ™ciu liter.PozwoliÅ‚o mi to stworzyć obrazki.gif o wymia-rach 77×77 pikseli i umieÅ›cić na nich poszczególne litery nazwy.ZmieniÅ‚am także kolorliter dla każdego ze słów tworzÄ…cych nazwÄ™; i tak litery tworzÄ…ce sÅ‚owo  Tic sÄ… czer-wone,  Tac  czarne a  Toe  niebieskie.NastÄ™pnie, modyfikujÄ…c widzialność obiektów graficznych, sprawiÅ‚am, że litery staÅ‚y siÄ™nieco  wyblakÅ‚e , przez co lepiej nadajÄ… siÄ™ do wyÅ›wietlenia w tle strony.Nie chciaÅ‚am,aby ich kolory byÅ‚y zbyt mocne, gdyż mogÅ‚yby wtedy utrudniać rozpoznawanie pion-ków wyÅ›wietlanych na planszy.Gdy wszystko już wymyÅ›liÅ‚am i narysowaÅ‚am, stworzyÅ‚am dziewięć plików.GIF(przedstawionych na rysunku 21.10) o identycznych wymiarach i nadaÅ‚am im nazwyodpowiadajÄ…ce poÅ‚ożeniu, w jakim bÄ™dÄ… wyÅ›wietlane na planszy (na przykÅ‚ad, topleft.gif,centercenter.gif, itd.). 624 Część 7.JavaScript i Dynamiczny HTMLRysunek 21.10.Wszystkie obrazkiwyÅ›wietlane jako tÅ‚oplanszy sÄ…  wyblakÅ‚e ,aby nie stanowiÅ‚ydominujÄ…cego elementustronyJeÅ›li chodzi o pionki, to musiaÅ‚am stworzyć tylko dwa obrazki, jeden dla  kółka (0)oraz drugi dla  krzyżyka (X).Należy podkreÅ›lić, iż także te grafiki majÄ… wymiary77x77 pikseli, a ich tÅ‚o nie jest przezroczyste.Nie chciaÅ‚am, aby litery wyÅ›wietlanew tle byÅ‚y widoczne po umieszczeniu pionka na wybranym polu planszy.Na rysunku 21.11przedstawiÅ‚am obrazki  kółka i  krzyżyka wyÅ›wietlone w programie Photoshop.Rysunek 21.11.Obrazki przedstawiajÄ…cepionki   kółko i krzyżykOstatnim elementem graficznym, który musiaÅ‚am stworzyć, byÅ‚ tytuÅ‚ strony pokazanyna rysunku 21.12.TytuÅ‚ jest animowany, pojawia siÄ™ w lewym, górnym wierzchoÅ‚kustrony i przesuwa ku jej Å›rodkowi.Nie chciaÅ‚am powtarzać angielskiej nazwy gryi uznaÅ‚am, że ciekawym tytuÅ‚em bÄ™dzie  Let s Play 2.2Zagrajmy. RozdziaÅ‚ 21.Użycie Dynamicznego HTML a 625Rysunek 21.12.Animowanynagłówek stronyPrzy tworzeniu tych wszystkich obrazków posÅ‚użyÅ‚am siÄ™ stylowÄ… i zabawnÄ… czcionkÄ…Beesknees ITC.ZdecydowaÅ‚am, że inne teksty na stronie bÄ™dÄ… wyÅ›wietlane bardziejczytelnÄ… czcionkÄ…, jednak do stworzenia tÅ‚a, tytuÅ‚u i pionków czcionka Beesknees ITCwydaÅ‚a mi siÄ™ doskonaÅ‚a.Teraz, kiedy już stworzyliÅ›my wszystkie elementy graficzne, można zabrać siÄ™ za pisa-nie kodu strony.Tworzenie kodu HTML z odrobinÄ… styluZacznijmy od okreÅ›lenia używanej wersji jÄ™zyka HTML oraz stworzenia znacznikówhead i body tworzÄ…cych szablon strony.Kółko i krzyżykNa razie zajmiemy siÄ™ kodem HTML umieszczonym wewnÄ…trz znacznika body.W pierwszej kolejnoÅ›ci stwórz graficzny tytuÅ‚ strony, który nastÄ™pnie bÄ™dzie animowa-ny.W tym celu wykreuj znacznik div i zdefiniuj w nim atrybut ID, dziÄ™ki czemu bÄ™-dziesz mógÅ‚ manipulować tym elementem w skryptach.OkreÅ›l bezwzglÄ™dne poÅ‚ożenietego elementu na stronie.PoczÄ…tkowo element ten ma być wyÅ›wietlony poza stronÄ…WWW, a zatem atrybuty left oraz top powinny mieć ujemne wartoÅ›ci.Przypisanie 626 Część 7.JavaScript i Dynamiczny HTMLatrybutowi z-index wartoÅ›ci 5 zapewni, że tytuÅ‚ zostanie wyÅ›wietlony ponad wszyst-kimi innymi warstwami CSS.Po otwierajÄ…cym znaczniku div umieść znacznik img de-finiujÄ…cy obrazek, po czym dodaj zamykajÄ…cy znacznik div.To nie byÅ‚o zbyt trudne.A jeÅ›li rozumiesz znaczenie tego fragmentu kodu, to bez trudustworzysz nastÄ™pne elementy naszej gry: planszÄ™ oraz pionki.Plansza gry skÅ‚ada siÄ™ z dziewiÄ™ciu znaczników div, w każdym z nich zostaÅ‚ umiesz-czony odpowiedni obrazek [ Pobierz caÅ‚ość w formacie PDF ]
  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • agnieszka90.opx.pl