Printris Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je založena ne principu Tetrisu. Úkolem hráče je umístit tři stejné tiskárny vodorovně nebo svisle do jedné řady. Ovládání je možné myší kliknutím na tlačítka pod hrací plochou nebo pohybem šipkových tlačítek a mezerníku nebo číslic 4,5,6. Rychlost hry lze snižovat nebo zvyšovat klikem myši na symboly "+" a "-" nebo samotnými tlačítky "+" a "-". Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot. Stažení hry Hru je možné zkopírovat a upravit dle vlastních znalostí: Pravým tlačítkem myši se zobrazí menu, ze kterého je nutné zvolit Zobrazit zdrojový kód (Text se může mírně lišit podle používaného prohlížeče. Předchozí text platí pro Internet Explorer. Pro Mozillu Firefox je to text Zobrazit zdrojový kód stránky. ) Pomocí standardních příkazů OS Windows se text označí (př. kombinace kláves CTRL+A) a zkopíruje do schránky. (př. kombinace kláves CTRL+C) V libovolném textovém editoru, který umí pracovat s prostým textem (např. Notepad, který je součástí OS Windows)se otevře nový soubor a text se do něj ze schránky vloží.(př. kombinace kláves CTRL+V) Název souboru je libovolný, ale musí se uložit s příponou html nebo htm (standardní přípona souboru pro web) Další nutnou součástí hry jsou obrázky.
Seznam je následující: tisk1.gif, tisk2.gif, tisk3.gif, tisk4.gif obrázky tiskáren pozadi.gif, background.jpg pozadí hry a pozadí herní plochy. Obrázky se dají stáhnout, tak, že v adresním řádku prohlížeče se smaže printris.htm a nahradí př. images/tisk1.gif ( př. www.ingot.org/javascript/printris/printris.htm na www.ingot.org/javascript/printris/images/printris.png ) Po odklepnutí klávesou Enter se zobrazí výzva k uložení souboru. Soubor je nutno uložit pod stejným názvem i příponou do stejné složky s předchozím souborem. Obrázek je také nutné uložit do podsložky images, kterou je nutné vytvořit. Správnou funkci všech stažených komponent hry lze ověřit přímým spuštěním souboru cannon.htm Výměna obrázků Obrázky ve hře lze nahradit vlastními. Lze nahradit i pozadí za těchto podmínek. - obrázky musí mít stejný název a typ (Zkušenější programátoři mohou použít jiný typ obrázku za předpokladu, že názvy obrázků upraví ve zdrojovém kódu, bude popsáno níže.) - pozadí hry je pouze vzorek, který skládá pozadí ze svých opakujících se částí - pozadí musí mít průhledné (transparentní) pozadí (popis této vlastnosti je mimo rozsah tohoto návodu a je možné jej najít na internetu) - obrázky musí mít stejnou délku a šířku v pixelech (popis této vlastnosti je opět mimo rozsah tohoto návodu a je možné jej najít na internetu) Změna názvu složky, použití jiných formátů obrázků Pokud je nutné použít jiné typy obrázků nebo podsložku, kde jsou uloženy je nutné je patřičně upravit v souboru printris.htm. Tato činnost je určena zkušenějším programátorům. - Pro obrázky tiskáren a pozadí hry: souboru printris.htm v kódu na řádku 79 Pic[0] = new Image(); Pic[0].src = "images//pozadi.gif"; Pic[1] = new Image(); Pic[1].src = "images//tisk1.gif"; Pic[2] = new Image(); Pic[2].src = "images//tisk2.gif";
Pic[3] = new Image(); Pic[3].src = "images//tisk3.gif"; Pic[4] = new Image(); Pic[4].src = "images//tisk4.gif"; zvolenou složkou a typ gif zvoleným typem obrázku ) je nutné nahradit složku images - Pro obrázek pozadí herní plochy: souboru printris.htm v kódu na řádku 11 body { background-image: url(images/background.png); je nutné nahradit složku images zvolenou složkou a typ png zvoleným typem obrázku Stručný popis funkcí hry v jazyce Javascript Hra je, jak bylo již uvedeno výše napsána pomocí Javascriptu a příkazů HTML. Přímo v kódu jsou uvedeny v komentářových řádcíchstručné nápovědy jednotlivých funkcí a prvků a popisy proměnných. K pochopení funkce je nutné zvládnout základy Javascriptu a HTML. Záhlaví souboru HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <META NAME="description" content="printris- JavaScript game"> <META NAME="author" content="jiri Mensik"> <META NAME="keywords" content="javascript, Game"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-image: url(images/background.png); </style> <title>printris</title></head> HTML kód s tabulkou skóre a ovládání <BODY> <form> <DIV ALIGN=center> <table noborder cellpadding=0 cellspacing=0> <tr> <td valign="top" bgcolor="#99cccc"><strong>speed:</strong> <input type=button value="-" width=16 style="width:16;background-color:#ffffff" onclick="keydown(45);hidefocus()"></td> <td><input size=1 name="level" onfocus="hidefocus()"></td> <td><input type=button value="+" width=16 style="width:16;background-color:#ffffff" onclick="keydown(43);hidefocus()"></td> <td valign="middle" bgcolor="#99cccc"><strong>score:</strong> <input size=4 name="score" onfocus="hidefocus()"></td>
<td><input type=button value="teacher's guide" name="help" width=120 style="width:120;background-color:#ffffff" onclick="javascript:teachers_guide()"></td> </tr></table> Kód Javascriptu Test kláves <script language="javascript1.2"> //browser test var IsNetscape; if(navigator.appname == "Netscape") IsNetscape = true; else IsNetscape = false; if (navigator.appname!= "Microsoft Internet Explorer") document.captureevents(event.keydown) document.onkeydown = NetscapeKeyDown; function NetscapeKeyDown(key) { KeyDown(key.which); </script> <script for=document event="onkeydown()" language="jscript"> if (window.event) KeyDown(window.event.keyCode); </script> <script language="javascript"> var i, j, c, nc, dt, IsOver, MaxW=3, MaxH=12, w, h, Level, Score, TimerInterval, IsHideFocus=true; document.open("text/plain"); //test keys if (navigator.appname == "Konqueror") { document.write("<input width=0 height=0 style=\"width:0; height:0\" name=\"keycatch\" onblur=\"keycatchfocus()\" onkeyup=\"keycatchchange()\">"); KeyCatchFocus(); IsHideFocus=false; function KeyCatchFocus() { settimeout("document.forms[0].keycatch.focus()",100); function KeyCatchChange() { var vv=""+document.forms[0].keycatch.value; if (vv=="") return; KeyDown(vv.charCodeAt(0)); document.forms[0].keycatch.value=""; Vykreslení pozadí //drawing background document.writeln("<table noborder cellpadding=0 cellspacing=0 bgcolor=#ffffff><tr><td>"); for (j=0; j < MaxH; j++) { for (i=0; i < MaxW; i++) document.write("<img src=\"images\pozadi.gif\" border=0>");
document.writeln("<br>"); document.writeln("</td></tr></table>"); document.close(); Počáteční inicializace proměnných // initialization of variables Level=4; Fld = new Array(MaxW); for (i=0; i < MaxW; i++) { Fld[i]=new Array(MaxH); BFld = new Array(MaxW); for (i=0; i < MaxW; i++) { BFld[i]=new Array(MaxH); Pic= new Array(5); Pic[0] = new Image(); Pic[0].src = "images//pozadi.gif"; Pic[1] = new Image(); Pic[1].src = "images//tisk1.gif"; Pic[2] = new Image(); Pic[2].src = "images//tisk2.gif"; Pic[3] = new Image(); Pic[3].src = "images//tisk3.gif"; Pic[4] = new Image(); Pic[4].src = "images//tisk4.gif"; Test stisku kláves //test pressing keys function KeyDown(whichkey) { //alert(whichkey); if ((whichkey==43) (whichkey==107) (whichkey==65451)) { Level++; if (Level>8) Level=8; else Init(); if ((whichkey==45) (whichkey==109) (whichkey==65453)) { Level--; if (Level<1) Level=1; else Init(); if (whichkey == 37) AllLeft(); if (whichkey == 39) AllRight(); if (whichkey == 40) AllSpace(); if (whichkey == 32) AllSpace(); if (whichkey == 52) AllLeft(); if (whichkey == 53) AllSpace(); if (whichkey == 54) AllRight(); if (whichkey == 12) AllSpace(); if (whichkey == 65460) AllLeft(); if (whichkey == 65461) AllMiddle(); if (whichkey == 65462) AllRight();
Funkce časovače // timer function Timer() { if (! IsOver) { if (nc) { dt=0; ThreeTest(); if (dt>0) Erase(); if (dt==0) { NewChip(); nc=false; else ChipDown(); RefreshScreen(); // game initialization function Init() { for (i=0; i<maxw; i++) { for (j=0; j<maxh; j++) { Fld[i][j]=0; BFld[i][j]=false; nc=true; IsOver=false; Score=0; RefreshScreen(); window.clearinterval(timerinterval); TimerInterval=window.setInterval("Timer()",50*(8-Level)+Level); Test pozic (levá, pravá, střed, mezera, náhodná pozice) // test position left function AllLeft() { if ((IsOver) (nc)) return; if (w>0) { if (Fld[w-1][h]==0) { Fld[w-1][h]=c; Fld[w][h]=0; w--; RefreshScreen(); // test position right function AllRight() { if ((IsOver) (nc)) return; if (w<maxw-1)
{ if (Fld[w+1][h]==0) { Fld[w+1][h]=c; Fld[w][h]=0; w++; RefreshScreen(); // test position middle function AllMiddle() { if (w>1) AllLeft(); if (w<1) AllRight(); // test position space function AllSpace() { while ((!nc)&&(!isover)) ChipDown(); // random position new object function NewChip() { w=math.round(math.random()*100) % MaxW; c=math.round(math.random()*100) % (MaxW+1) + 1; h=0; Fld[w][h]=c; Test pozic (objekt je dole, tři objekty) //test - object is down function ChipDown() { if (h<maxh-1) { if (Fld[w][h+1]==0) { Fld[w][h+1]=c; Fld[w][h]=0; h++; else { if (h==0) { IsOver=true; if (window.opener) { if (window.opener.sethighscores) window.opener.sethighscores("threefit","",score,1); if (confirm("game over! Score: " + Score + ". Play again?")) Init(); else nc=true; else nc=true; // test three objects function ThreeTest()
{ dt=0; for (j=maxh-1; j>=2; j--) { i=0; c=fld[i][j]; if (c!=0) { if ((Fld[i][j-1]==c)&&(Fld[i][j-2]==c)) BFld[i][j-1]=true; BFld[i][j-2]=true; if ((Fld[i+1][j-1]==c)&&(Fld[i+2][j-2]==c)) BFld[i+1][j-1]=true; BFld[i+2][j-2]=true; i=1; c=fld[i][j]; if (c!=0) { if ((Fld[i][j-1]==c)&&(Fld[i][j-2]==c)) BFld[i][j-1]=true; BFld[i][j-2]=true; if ((Fld[i-1][j]==c)&&(Fld[i+1][j]==c)) BFld[i-1][j]=true; BFld[i+1][j]=true; i=2; c=fld[i][j]; if (c!=0) { if ((Fld[i][j-1]==c)&&(Fld[i][j-2]==c)) BFld[i][j-1]=true; BFld[i][j-2]=true; if ((Fld[i-1][j-1]==c)&&(Fld[i-2][j-2]==c)) BFld[i-1][j-1]=true; BFld[i-2][j-2]=true;
Výmaz objektů z herní plochy //erase function Erase() { for (j=0; j<maxh; j++) { for (i=0; i<maxw; i++) { if (BFld[i][j]) { BFld[i][j]=false; Fld[i][j]=0; do { c=0; for (j=maxh-1; j>=1; j--) { for (i=0; i<maxw; i++) { if ((Fld[i][j]==0)&&(Fld[i][j-1]!=0)) { Fld[i][j]=Fld[i][j-1]; Fld[i][j-1]=0; c++; while (c>0); Score+=3*Level*dt; i=1; if ((Score>33)&&(Level<2)) i=2; if ((Score>99)&&(Level<3)) i=3; if ((Score>333)&&(Level<4)) i=4; if ((Score>666)&&(Level<5)) i=5; if ((Score>1111)&&(Level<6)) i=6; if ((Score>1919)&&(Level<7)) i=7; if ((Score>3333)&&(Level<8)) i=8; if (i>level) { Level=i; window.clearinterval(timerinterval); TimerInterval=window.setInterval("Timer()",50*(8-Level)+Level); Obnova hrací plochy //refresh screen function RefreshScreen() { for (i=0; i < MaxW; i++) { for (j=0; j < MaxH; j++) window.document.images[i+maxw*j].src = Pic[Fld[i][j]].src; window.document.forms[0].level.value = Level; window.document.forms[0].score.value = Score;
function HideFocus() { if (IsHideFocus) { window.document.forms[0].help.focus(); window.document.forms[0].help.blur(); Init(); HideFocus(); Odkaz na příručku učitele //teacher guide function teachers_guide() { window.open('teachers_guide.htm','','scrollbars=yes,menubar=no,height=500,width=350,resizable=y es,toolbar=no,location=no,status=no'); Test kláves if (navigator.appname!= "Microsoft Internet Explorer") document.captureevents(event.keydown); document.onkeydown = NetscapeKeyDown; function NetscapeKeyDown(key) { KeyDown(key.which); </script> <table noborder cellpadding=0 cellspacing=0> <tr> <td><input type=button value="<-" width=37 style="width:37;background-color:#ffffff" onclick="keydown(37);this.blur()"></td> <td><input type=button value="\/" width=37 style="width:37;background-color:#ffffff" onclick="keydown(40);this.blur()"></td> <td><input type=button value="->" width=37 style="width:37;background-color:#ffffff" onclick="keydown(39);this.blur()"></td> </tr> </table> </DIV> </form> </BODY>