Programarea Avansata a Aplicatiilor Internet - old.unibuc.roold.unibuc.ro/prof/vlada_m/docs/2011/mai/21_15_15_13Proiect-3... · Aplicatia MathGraph realizeaza grafice pentru functiile

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

1

Student: Loloiu Cristian DOCUMENTATIE & CODURI SURSASpecializare: Master TAPI, anul II

Programarea Avansata a Aplicatiilor Internet

In cadrul acestui proiect (index.html) s-au realizat 3 aplicatii ce implementeazafacilitati oferite de urmatoarele tehnologii: JavaScrip, SVG, JavaScrip + libraria“jsgraphics.js” by Wlater Zorn. Sunt elaborate si testate 3 aplicatii (se utilizeazawz_jsgraphics.js si SVG):

MathGraph (graph.html)Aplicatia MathGraph realizeaza grafice pentru functiile matematice sin, cos, tan,arcsin, etc. Interfata aplicatiei este simpla, iar durata de executie a scriptului estefoarte mica. Aplicatia se executa in intregime client-side. SVGPieChart (svgpiechart.html)

Aplicatia SVGPieChart realizeaza diagrame de tip pie, asemanatoare cu celerealizate in Excel, in format SVG. Aceasta aplicatie foloseste libraria SVG numitaRaphael. Aplicatia se executa in intregime client-side. Lupul, varza, oaia (lupul.html)

Aplicatia Lupul, varza, oaia reprezinta transpunerea in limbaj JavaScript aclasicului joc cu acelasi nume. Aplicatia a fost realizata cu scopul de a prezentafacilitatile oferite de limbajul de programare JavaScript.


2

1) MathGraph (graph.html)

Aplicatia este creata in JavaScript si se foloseste de functii din libraria graficawz_graphics.

Deoarece limbajul JavaScript nu are o librărie grafică proprie, s-a apelat la o librăriegrafică Open Source realizată de către Walter Zorn (www.WalterZorn.com) şi modificatăpentru a funcţiona cu MathGraph.

În HTML nu există elemente precum linii oblice, cercuri, elipse sau alte formegeometrice. Dar totusi aceste elemente pot fii generate in HTML cu ajutorul JavaScriptprin aprinderea unor pixeli incadraţi într-un div şi aranjând aceste DIV-uri după unanume model. Crearea unui DIV separate pentru fiecare pixel în parte înseamnă totuşi unmare consum de resurse ale sistemului şi ar fii ineficient din punctual de vedere altimpului petrecut pentru crearea obiectelor DIV.

Pentru a eficientiza la maxim scriptul, am folosit libraria grafică wz_jsgraphics.js,căreia i-am adus mici îmbunătăţiri. Această librărie, pe lângă faptul că foloseşte algoritmirapizi (Bresenham) pentru a calcula formele, pentru a minimiza numărul de DIV-urigenerate prin combinarea a cât mai mulţi pixeli într-un DIV.

2) SVGPieChart (svgpiechart.html)


3

Aplicatia este creata in JavaScript si se foloseste de functii din libraria SVG Raphael.Aplicaţia a fost creată pentru a genera mai uşor diagrame de tip pie dinamic. Dateledin diagramă sunt adăugate dinamic prin intermediul JavaScript. Este folosită librăriade funcţii SVG Raphael, pentru a genera un cod SVG curat şi cross-browser.

Funcţii SVGPieChart1. creare diagram Pie2. ştergere diagramă Pie3. adăugare valoare în tabela de valori4. ştergere valoare din tabela de valori

3) Lupul, varza, oaia (lupul.html)

INSTRUCTIUNI DE JOC:

Scopul jocului este de a traversa cu barca lupul, oaia si cutia cu varza respectandurmatoarele reguli:

- lupul nu trebuie sa ramana singur cu oaia pe acelasi mal;- oaia nu trebuie sa ramana singura cu cutia cu varza pe acelasi mal;- barca poate transporta cate un singur animal pe rand;- pentru a plasa un animal in barca, se face click pe acesta;- pentru a porni barca, se face click pe aceasta;- pentru a porni jocul, se face click pe butonul Start joc.


4

Codul Pagina principala (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>PAAI - aplicatii</title><meta name="keywords" content="mathgraph" /><meta name="description" content="grafice matematice" /><link href="default.css" rel="stylesheet" type="text/css" /></head><body><div id="wrapper">

<div id="logo"><img src="images/logo_pp.png"></div>

<div id="header">

<div id="menuat"><ul class="glossymenu">


5

<li class="current"><a href="index.html"><b>Index</b></a></li><li><a href="graph.html"><b>MathGraph</b></a></li><li><a href="svgpiechart.html"><b>SVGPieChart</b></a></li>

<li><a href="lupul.html"><b>Lupul, oaia, varza</b></a></li><li><a href="doc.html"><b>Documentatie</b></a></li><li><a href="autor.html"><b>Autor</b></a></li>

</ul>

</div></div></div><div id="page">

<div id="content">

<div class="post"><h1 class="title">Bine ati venit</h1><div class="entry">

<p>Bine ati venit pe site-ul meupersonal.<br> Aici veti gasi cele 3 aplicatii create pentru examenul dela cursul Programarea Avansata a Aplicatiilor Internet.

<center><iframe src="logo.svg" alt="logo"width="401" height="401" border="0"> </iframe>

<br><i><small>Animatie realizata inSVG.</small></i>

</center>

</p><br>

<h2>MathGraph</h2><br><p>Aplicatia <i><b>MathGraph</b></i> realizeaza grafice pentrufunctiile matematice sin, cos, tan, arcsin, etc. Interfata aplicatieieste simpla, iar durata de executie a scriptului este foarte mica.Aplicatia se executa in intregime client-side.</p><br><h2>SVGPieChart</h2><br><p>Aplicatia <i><b>SVGPieChart</b></i> realizeaza diagrame de tip pie,asemanatoare cu cele realizate in Excel, in format SVG. Aceastaaplicatiefoloseste libraria SVG numita Raphael. Aplicatia se executa inintregime client-side.</p><br><h2>Lupul, varza, oaia</h2><br><p>Aplicatia <i><b>Lupul, varza, oaia</b></i> reprezinta transpunereain limbaj JavaScript a clasicului joc cu acelasi nume. Aplicatia a fostrealizata cu scopul de a prezenta facilitatile oferite de limbajul deprogramare JavaScript.</p>

</div></div>

</div>


6

<div id="sidebar">

<ul><li>

<h2>Aplicatii</h2><ul>

<li><ahref="graph.html">MathGraph</a></li>

<li><ahref="svgpiechart.html">SVGPieChart</a></li>

<li><a href="lupul.html">Lupul,varza, oaia</a></li>

</ul></li>

</ul></div><div style="clear: both;"> </div>

</div><div id="footer">

<p id="legal">( c ) 2010 PAAI aplicatii - Creat de LoloiuCristian </p></div></body></html>

Codul MathGraph (graph.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>MathGraph - versiunea 1.0</title><script language="javascript" type="text/javascript"src="pluteste.js"></script> <script language="javascript" type="text/javascript"src="grafica.js"></script> <style type="text/css" media="screen">@import url(stil.css);</style><meta name="keywords" content="mathgraph" /><meta name="description" content="grafice matematice" /><link href="default.css" rel="stylesheet" type="text/css" /></head><body><script language="javascript" type="text/javascript"src="crisgraf.js"></script><div id="wrapper">


7



<div id="logo"><img src="images/logo_mathgraf.png"></div><div id="header">


<li><a href="index.html"><b>Index</b></a></li><li class="current"><a

href="graph.html"><b>MathGraph</b></a></li><li><a href="svgpiechart.html"><b>SVGPieChart</b></a></li>

<li><a href="lupul.html"><b>Lupul, oaia, varza</b></a></li><li><a href="doc.html"><b>Documentatie</b></a></li><li><a href="autor.html"><b>Autor</b></a></li>

</ul></div>

</div></div><div id="page">

<div id="content2">

<div class="post"><h1 class="title">Aplicatia MathGraph</h1><div class="entry">

<div id="grafic" style="left:200px; top:210px; width:600px;height:800px; z-index:0"></div>

<div id="comanda" style="position:absolute; overflow:hidden;left:810px; top:250px; width:246px; height:400px; z-index:10">

<table width="238" cellspacing="0" cellpadding="0" border=0class="comandaa" background="images/box.png"> <tr>

<td bgcolor="#ededed" background="images/control_bg.png"height="30" align="center"><font size="4"><strong> Grafice</strong></font></td> </tr> <tr> <td width=238 align="center" border=1>

 <table border="0" bordercolor="#c0c0c0" cellspacing="0"cellpadding="0" width="238"> <tr> <td align="center"><br></td> </tr> <tr>


8

<td align="center"> <font color="#000000"><strong>F(x)=</font></td> <td align="center"> <input type="text" class="textinput"id="functie" name="functie" value="sin(x)"></td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" class="buttonSubmit" value="Grafic"onclick="realizare_graf(); return 0"> <input type="submit" class="buttonSubmit" value="Sterge"onclick="graf_del(); return 0;">

<br> </td> </tr> <tr> <td align="center"><div id="loader"></div> </td> </tr> <tr> <td align="center"><font color="#000000"><strong> x=</td> <td align="center"><input type="text" class="textinput"id="tracex" name="tracex" value=""></td> </tr> <tr> <td align="center"><font color="#000000"><strong>F(x)=</td> <td align="center"> <input type="text" class="textinput"id="ftracex" name="ftracex" value=""> </td> </tr> <tr> <td align="center" colspan="2"><input type="submit"class="buttonSubmit" id="evaluare" value="Evaluare" disabled="true"onclick="evaluare(); return 0;"></td> </tr> </table><br><table width=100%> <tr> <td align="center"><font color="#000000"><strong> Pas: </td> <td align="center"> <select id="pas_d" class=none> <option value="0.01">0.01</option> <option value="0.02">0.02</option> <option value="0.03">0.03</option> <option value="0.04">0.04</option> <option value="0.05">0.05</option> <option value="0.06">0.06</option> <option value="0.07">0.07</option> <option value="0.08">0.08</option> <option value="0.09">0.09</option> <option value="0.10">0.10</option> </select> </td> <td align="center"> <input type="submit" class="buttonSubmit"id="pas_set" value="Seteaza" onclick="set_pas_d(); return 0;"> </td> </tr></table><br>


9

<table width="238" cellspacing="0" cellpadding="0" align="center">

<tr> <td align="center"><font color="#000000"><strong> X min </td> <tdalign="center"> <input type="text" class="textinput" id="xminus"name="xminus" value="-15"></td> </tr>

<tr> <td align="center"><font color="#000000"><strong> Y min </td> <tdalign="center"> <input type="text" class="textinput" id="yminus"name="yminus" value="-15"></td> </tr>

</table><br><input type="submit" class="buttonSubmit" id="set_coordonate"value="Seteaza" onclick="set_coordonate(); return 0;">

</td> </tr></table>

</div>

<div id="comanda2" style="position:absolute; overflow:hidden;left:810px; top:610px; width:246px; height:400px; z-index:11"><table width="244" cellspacing="0" cellpadding="0" border="0"class="comandaa" background="images/box.png"><tr> <td colspan=3 bgcolor="#ededed" background="images/control_bg.png"height="30" align="center"><font size="4"><strong> Zoom</strong></font></td> </tr><tr> <td align="center">

<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr>

<td align="center"> <a href="zoomin.html" onclick="muta(5); returnfalse"> <img src="images/plus.png" border="0"> </a>

<a href="zoomout.html" onclick="muta(6);return false"> <img src="images/minus.png" border="0"> </a></td> </td></tr></table>

</td></tr></table></div>

<script type="text/javascript">


10

</script><br><center> <h4>Functii acceptate</h4><br><table width="90%" align="center" cellspacing="1" cellpadding="1"border="1"> <tr> <td align="center" width="100"><strong>x*x*x+2*x*x-5*x*x+1</strong></td>

<td align="center"> Ecuatii de gradul1,2,3,4,5,....n<br>Exemplu: x*x*x*x*x*x*x*x-8*x*x+9 </td> </tr> <tr> <td align="center" width="100"><strong>abs(x)</strong></td>

<td align="center"> Exemplu: x*abs(-x) </td> </tr> <tr> <td align="center" width="100"><strong>sin(x)</strong></td>

<td align="center"> Exemplu: sin(x)+1, 1/sin(x) </td> </tr> <tr> <td align="center" width="100"><strong>cos(x)</strong></td>

<td align="center"> Exemplu: cos(x)+1, 1/cos(x) </td> </tr> <tr> <td align="center" width="100"><strong>arcsin(x)</strong></td>

<td align="center"> Exemplu: arcsin(x)+1, 1/arcsin(x) </td> </tr> <tr> <td align="center" width="100"><strong>arccos(x)</strong></td>

<td align="center"> Exemplu: arccos(x)+1, 1/arccos(x) </td> </tr>

<tr> <td align="center" width="100"><strong>arctan2(x)</strong></td>

<td align="center">Arctangenta(in radiani) a coeficientuluivalorii transferate </td> </tr>

<tr> <td align="center" width="100"><strong>ceil()</strong></td>

<td align="center"> Urmatorul numar intreg mai mare sau egal cuvaloarea transferata. </td> </tr>

<tr> <td align="center" width="100"><strong>exp()</strong></td>

<td align="center"> Constanta lui Euler la puterea valoriitransferate. </td> </tr>

<tr> <td align="center" width="100"><strong>floor()</strong></td>

<td align="center"> Urmatorul numar intreg mai mic sau egal cuvaloarea transferata. </td>


11

</tr>

<tr> <td align="center" width="100"><strong>ln()</strong></td>

<td align="center">Logaritmul natural, in baza e, al valoriitransferate. </td> </tr>

<tr> <td align="center" width="100"><strong>max(x,y)</strong></td>

<td align="center"> Numarul cel mai mare dintre doua valoritransferate. </td> </tr>

<tr> <td align="center" width="100"><strong>min(x,y)</strong></td>

<td align="center"> Numarul cel mai mic dintre doua valoritransferate. </td> </tr>

<tr> <td align="center" width="100"><strong>pow(x,y)</strong></td>

<td align="center"> Primul numar transferat, ridicat la o putereegala cu al doilea numar. x la puterea y</td> </tr>

<tr> <td align="center" width="100"><strong>random()</strong></td>

<td align="center"> Numar aleator intre 0 si 1. Aceasta metoda afost adaugata in JavaScript 1.1. </td> </tr>

<tr> <td align="center" width="100"><strong>round()</strong></td>

<td align="center"> Valoarea transferata, rotunjita la cel maiapropiat numar intreg. </td> </tr>

<tr> <td align="center" width="100"><strong>sqrt()</strong></td>

<td align="center"> Radacina patrata a valorii transferate.</td> </tr>

<tr> <td align="center" width="100"><strong>tg()</strong></td>

<td align="center"> Tangenta valorii transferate. </td> </tr>

<tr> <td align="center"width="100"><strong>gauss(x,mean,sigma)</strong></td>

<td align="center"> Distributia Gauss (Clopotul lui Gauss) -gauss(x,0,1) densitate de distributie normala cu valoarea medie(mean)=0, deviatia standart (sigma)=1. </td> </tr>


12

</table><br><br><CenteR><b><u>Constante:</u></b><br>E Constanta lui Euler (2,718281828459045).<br>LN2 Logaritm natural din 2 (0,6931471805599453).<br>LN10 Logaritm natural din 10 (2,302585092994046).<br>LOG2E Logaritm in baza 2 din E (1,4426950408889633).<br>LOG10E Logaritm in baza 10 din E (0,4342944819032518).<br>PI ? (3,14149263589793).<br>SORT1_2 Radical din 0.5 (0,7071067811865476).<br>SORT2 Radical din 2 (1.4142135623730951).<br>

</div></div>

</div>

<div style="clear: both;"> </div></div><div id="footer">

<p id="legal">( c ) 2010 MathGraph - Creat de Loloiu Cristian</p></div></body></html>

Codul SVGPieChart (svgpiechart.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>SVGPieChart - versiunea 1.0</title><style type="text/css" media="screen">@import url(stil.css);</style><meta name="keywords" content="mathgraph" /><meta name="description" content="grafice matematice" /><link href="default.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="demo.css" type="text/css" media="screen"charset="utf-8"><link rel="stylesheet" href="demo-print.css" type="text/css"media="print" charset="utf-8"> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script src="raphael.js" type="text/javascript" charset="utf-8"></script> <script src="g.raphael.js" type="text/javascript" charset="utf-8"></script>


13

<script src="g.pie.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">var r;var me=1;

function deseneaza(){ if(me==1) me++;

elseif(me>1) dodelete();

r = Raphael("holder");r.clear();

r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans,sans-serif";

r.g.text(320, 100, "SVGPieChart").attr({"font-size":20});

var values = [], labels = [];

$("tr").each(function () {

values.push(parseInt($("td", this).text(), 10)); labels.push($("th", this).text());

});

var pie = r.g.piechart(320, 240, 100, values, {legend:labels, legendpos: "west"}); pie.hover(function () { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy);

if (this.label) { this.label[0].stop(); this.label[0].scale(1.5); this.label[1].attr({"font-weight": 800}); } }, function () { this.sector.animate({scale: [1, 1, this.cx,this.cy]}, 500, "bounce"); if (this.label) { this.label[0].animate({scale: 1}, 500,"bounce"); this.label[1].attr({"font-weight": 400}); } });

};

function addRowToTable(){ var tbl = document.getElementById('table1'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row = tbl.insertRow(lastRow);


14

// left cell var cellLeft = row.insertCell(0); var textNode =document.createTextNode(document.getElementById('eticheta').value); cellLeft.appendChild(textNode);

// right cell var cellRight = row.insertCell(1); var textNode =document.createTextNode(document.getElementById('valoare').value); cellRight.appendChild(textNode);}

function addNewRow(){var myTable = document.getElementById('table1');var tBody = myTable.getElementsByTagName('tbody')[0];var newTR = document.createElement('tr');var newTD = document.createElement('td');var newTH = document.createElement('th');newTD.innerHTML = document.getElementById('valoare').value;newTH.innerHTML = document.getElementById('eticheta').value;newTR.appendChild (newTH);newTR.appendChild (newTD);tBody.appendChild(newTR);document.getElementById('valoare').value='';document.getElementById('eticheta').value='';}

function removeRowFromTable(){ var tbl = document.getElementById('table1'); var lastRow = tbl.rows.length; if (lastRow > 0) tbl.deleteRow(lastRow - 1);}

function dodelete(){ r.clear(); document.getElementById('holder').innerHTML='';}

function exporta(){ ce=document.getElementById('holder').innerHTML; myRef =window.open('','mywin','left=20,top=20,width=510,height=500,toolbar=0,resizable=0'); myRef.document.write('<strong>Exporta codul SVG</strong><br><textareacols="60" rows="30">'); myRef.document.write(ce); myRef.document.write('</textarea>');}

</script></head>


15

<body>

<div id="wrapper">



<div id="logo"><img src="images/logo_pc.png"></div><div id="header">


<li><a href="index.html"><b>Index</b></a></li><li><a href="graph.html"><b>MathGraph</b></a></li><li class="current"><a

href="svgpiechart.html"><b>SVGPieChart</b></a></li><li><a href="lupul.html"><b>Lupul, oaia, varza</b></a></li>

<li><a href="doc.html"><b>Documentatie</b></a></li><li><a href="autor.html"><b>Autor</b></a></li>

</ul></div>

</div></div><div id="page">

<div id="content2">

<div class="post"><h1 class="title">Aplicatia SVGPieChart</h1><div class="entry">

<div id="holder"></div><br> <center>

<input type="submit" name="dograf" id="dograf"value="Deseneaza chart" onclick="deseneaza();">

<input type="submit" name="delgraf" id="delgraf"value="Sterge chart" onclick="dodelete();">

<input type="submit" name="dooutgraf" id="dooutgraf"value="Exporta chart" onclick="exporta();">

<br><br><strong> Tabel valori pentru chart </strong><br>

<table border="1" id="table1"> <tr> <th>Rand 1</th> <td>21</td> </tr>

<tr> <th>Rand 2</th> <td>12</td>


16

</tr> </table>

<br>

<center>Eticheta: <input type="text" name="eticheta"

id="eticheta"><br>Valoare: <input type="text" name="valoare"

id="valoare"><br><input type="submit" name="buton" value="Adauga

rand" onclick="addNewRow();"><input type="submit" name="sterge" value="Sterge

rand" onclick="removeRowFromTable();"></center>

</div></div>

</div>

<div style="clear: both;"> </div></div><div id="footer">

<p id="legal">( c ) 2010 SVGPieChart - Creat de Loloiu Cristian</p></div></body></html>

Codul Lupul, varza, oaia (lupul.html)

<html> <head> <title>Lupu, oaia, varza</title>

<link href="default2.css" rel="stylesheet" type="text/css" /><script language="JavaScript" src="wz_jsgraphics.js"></script><script language="JavaScript">var barca='d';var status_barca='goala';var poz_lup='d';var poz_oaie='d';var inbarca='nimeni';var poz_varza='d';var game_started=false;

function desen_apa() { ob=new jsGraphics('apa'); ob.setColor("blue");


17

ob.fillRect(300,200,400,300);ob.setColor("maroon");ob.fillRect(10,170,290,330);ob.fillRect(610,170,290,330);

ob.paint(); }

function deseneaza_lup(cx,cy){ //document.getElementById('lup').innerHTML=''; //ob=new jsGraphics('lup'); //ob.setColor("#ec0b14"); //ob.fillEllipse(cx,cy,80,40); //ob.paint(); document.getElementById('lup').innerHTML='<img

src="img/lup.png" onclick="lupinbarca();">'; document.getElementById('lup').style.left=cx+'px'; document.getElementById('lup').style.top=cy+'px';}

function deseneaza_oaia(cx,cy){ //document.getElementById('oaie').innerHTML=''; //ob=new jsGraphics('oaie'); //ob.setColor("#c0c0c0"); //ob.fillEllipse(cx,cy,60,32); //ob.paint(); document.getElementById('oaie').innerHTML='<img

src="img/oaie.png" onclick="oaieinbarca();">'; document.getElementById('oaie').style.left=cx+'px'; document.getElementById('oaie').style.top=cy+'px';}

function deseneaza_varza(cx,cy){ //document.getElementById('varza').innerHTML=''; //ob=new jsGraphics('varza'); //ob.setColor("green"); //ob.fillEllipse(cx,cy,20,20); //ob.paint(); document.getElementById('varza').innerHTML='<img

src="img/varza.png" onclick="varzainbarca();">'; document.getElementById('varza').style.left=cx+'px'; document.getElementById('varza').style.top=cy+'px';}

function startjoc(){ game_started=true; deseneaza_lup(650,110); deseneaza_varza(750,130); deseneaza_oaia(810,120); barca='d'; status_barca='goala'; poz_lup='d'; poz_oaie='d';


18

inbarca='nimeni'; poz_varza='d'; //resetata poz barca document.getElementById('barca').style.left='460px'; document.getElementById('barca').innerHTML='<img

src="img/barca.png" onclick="actiune();">'; document.getElementById('butongo').disabled=false; document.getElementById('butonlup').disabled=false; document.getElementById('butonoaie').disabled=false; document.getElementById('butonvarza').disabled=false; document.getElementById('butonstart').disabled=true;}

function actiune(){ if(!game_started) return false; //if(inbarca=='nimeni' || inbarca=='goala') return false; if(barca=='d') {

for(i=1;i<160;i++) { document.getElementById('barca').style.left=(460-

i)+'px';

//alert(document.getElementById('barca').style.left); } barca='s'; document.getElementById('barca').innerHTML='<img

src="img/barca2.png" onclick="actiune();">'; if(status_barca=='plina') {

if(poz_lup=='inbarca' && inbarca=='lup') { deseneaza_lup(150,110);

poz_lup='s'; inbarca='goala'; status_barca='goala';}

if(poz_oaie=='inbarca' && inbarca=='oaia') { deseneaza_oaia(70,120);

poz_oaie='s'; inbarca='goala'; status_barca='goala';}

if(poz_varza=='inbarca' && inbarca=='varza') { deseneaza_varza(10,130);

poz_varza='s'; inbarca='goala'; status_barca='goala';}

}}

else


19

if(barca=='s') {

for(i=1;i<160;i++) {

document.getElementById('barca').style.left=(300+i)+'px';

//alert(document.getElementById('barca').style.left); } barca='d'; document.getElementById('barca').innerHTML='<img

src="img/barca.png" onclick="actiune();">'; if(status_barca=='plina') {

if(poz_lup=='inbarca' && inbarca=='lup') { deseneaza_lup(650,110);

poz_lup='d'; inbarca='goala'; status_barca='goala';}

if(poz_oaie=='inbarca' && inbarca=='oaia') { deseneaza_oaia(810,120);

poz_oaie='d'; inbarca='goala'; status_barca='goala';}

if(poz_varza=='inbarca' && inbarca=='varza') { deseneaza_varza(750,130);

poz_varza='d'; inbarca='goala'; status_barca='goala';}

}}

verifica_castig();}

function lupinbarca(){ if(!game_started) return false; if( poz_lup=='d' || (poz_lup=='inbarca'&& barca=='d')) { if(barca==poz_lup || (inbarca=='lup' && barca=='d')) {

if(status_barca=='goala') {

deseneaza_lup(450,120); status_barca='plina'; poz_lup='inbarca'; inbarca='lup';}else

if(inbarca=='lup'){


20

poz_lup='d'; inbarca='nimeni'; status_barca='goala'; deseneaza_lup(650,110);}

else alert('Barca nu e goala!');}

else alert('Barca nu e pe malul asta!!!'); } else { if(poz_lup=='s' || (poz_lup=='inbarca' && barca=='s')) if(barca==poz_lup || (inbarca=='lup' && barca=='s')) {


deseneaza_lup(350,110); status_barca='plina'; poz_lup='inbarca'; inbarca='lup';}elseif(inbarca=='lup'){ poz_lup='s'; inbarca='nimeni'; status_barca='goala'; deseneaza_lup(150,110);}


else alert('Barca nu e pe malul asta!'); }}

function oaieinbarca(){ if(!game_started) return false; if(poz_oaie=='d' || (poz_oaie=='inbarca'&& barca=='d')) { if(barca==poz_oaie || (inbarca=='oaia' && barca=='d')) {


deseneaza_oaia(450,130); status_barca='plina'; poz_oaie='inbarca'; inbarca='oaia';}

else if(inbarca=='oaia')

{ poz_oaie='d'; inbarca='nimeni'; status_barca='goala'; deseneaza_oaia(810,120);}


21


else alert('Barca nu e pe malul asta!'); }

else {

if(poz_oaie=='s' || (poz_oaie=='inbarca' && barca=='s')) if(barca==poz_oaie || (inbarca=='oaia' && barca=='s')) {


deseneaza_oaia(350,130); status_barca='plina'; poz_oaie='inbarca'; inbarca='oaia';}elseif(inbarca=='oaia'){ poz_oaie='s'; inbarca='nimeni'; status_barca='goala'; deseneaza_oaia(100,120);}


else alert('Barca nu e pe malul asta!');

}}function varzainbarca(){ if(!game_started) return false; if(poz_varza=='d' || (poz_varza=='inbarca' && barca=='d') ) { if(barca==poz_varza || (inbarca=='varza' && barca=='d')) {


deseneaza_varza(470,140); status_barca='plina'; poz_varza='inbarca'; inbarca='varza';}

else if(inbarca=='varza')

{ poz_varza='d'; inbarca='nimeni'; status_barca='goala'; deseneaza_varza(750,130);}


else alert('Barca nu e pe malul asta!'); }

else


22

{ if(poz_varza=='s' || (poz_varza=='inbarca' && barca=='s'))

if(barca==poz_varza || (inbarca=='lup' && barca=='s')) {


deseneaza_varza(300,160); status_barca='plina'; poz_varza='inbarca'; inbarca='varza';}elseif(inbarca=='varza'){ poz_varza='s'; inbarca='nimeni'; status_barca='goala'; deseneaza_varza(10,130);}


else alert('Barca nu e pe malul asta!');}}function pierdut(){ game_started=false; alert ('Ai pierdut!'); document.getElementById('butongo').disabled=true; document.getElementById('butonlup').disabled=true; document.getElementById('butonoaie').disabled=true; document.getElementById('butonvarza').disabled=true; document.getElementById('butonstart').disabled=false;}function castig(){ game_started=false; alert ('Ai castigat!'); document.getElementById('butongo').disabled=true; document.getElementById('butonlup').disabled=true; document.getElementById('butonoaie').disabled=true; document.getElementById('butonvarza').disabled=true; document.getElementById('butonstart').disabled=false;}

function verifica_castig(){ if(poz_varza=='s' && poz_oaie=='s' && poz_lup=='d' &&

barca=='d') pierdut(); if(poz_varza=='d' && poz_oaie=='d' && poz_lup=='s' &&

barca=='s') pierdut(); if(poz_varza=='d' && poz_oaie=='s' && poz_lup=='s' &&

barca=='d') pierdut(); if(poz_varza=='s' && poz_oaie=='d' && poz_lup=='d' &&

barca=='s') pierdut(); if(poz_varza=='s' && poz_oaie=='s' && poz_lup=='s') castig();


23

}

</script> </head><body onload="desen_apa();"><center><div id="wrapper" style="background: url(images/img01.jpg) leftbottom"><div style="float: left; padding-left: 200px"> <imgsrc="images/logojoc.png" height="30"> </div><div id="header">


<li><a href="index.html"><b>Index</b></a></li><li><a href="graph.html"><b>MathGraph</b></a></li><li><a href="svgpiechart.html"><b>SVGPieChart</b></a></li><li class="current"><a href="lupul.html"><b>Lupul, oaia,

varza</b></a></li><li><a href="doc.html"><b>Documentatie</b></a></li><li><a href="autor.html"><b>Autor</b></a></li>

</ul></div>

</div><div style="clear: both;"> </div></div></center><br><br><div id="apa" style="z-index: 1"></div><div id="barca" style="position: absolute; left: 460px; top: 170px; width: 150px; height: 50px;

z-index: 0"><img src="img/barca.png" style="z-index: -1" onclick="actiune();"></div>

<div id="lup" style="position: absolute; left: 550px; top: 170px; width: 100px; height: 64px;

z-index: 3"></div><div id="oaie" style="position: absolute; left: 550px; top: 170px;

width: 85px; height: 55px;

z-index: 3"></div><div id="varza" style="position: absolute; left: 550px; top: 170px; width: 60px; height: 41px;

z-index: 3"></div>


24

<div id="butoane joc" style="position: absolute; left: 10px; top: 510px; width: 880px; height: 25px;border: 3;z-index: 3; background: #ffffff;padding: 5px;border: 2px coral solid;-moz-border-radius: 5px;

-webkit-border-radius: 5px;"><center> <input id="butongo" disabled type="submit"

value="GO" onclick="actiune();"><input id="butonlup" disabled type="submit" value="LUPU"onclick="lupinbarca();"><input id="butonoaie" disabled type="submit" value="OAIA"onclick="oaieinbarca();"><input id="butonvarza" disabled type="submit" value="VARZA"onclick="varzainbarca();"><input id="butonstart" type="submit" value="START JOC!"onclick="startjoc();">

</div>

<div id="instructiuni" style="position: absolute; left: 10px; top: 560px; width: 880px; height: 150px;

border: 3; z-index: 3; background: #ffffff; padding: 5px; border: 2px coral solid;

-moz-border-radius: 5px;-webkit-border-radius: 5px;

"><strong>INSTRUCTIUNI DE JOC:</strong>

<br><br> Scopul jocului este de atraversa cu barca lupul, oaia si cutia cu varza respectand urmatoarelereguli:<br> - lupul nu trebuie sa ramana singur cu oaia pe acelasi mal;

<br> - oaia nu trebuie sa ramana singura cu cutia cu varza pe acelasimal;

<br> - barca poate transporta cate un singur animal pe rand;

<br> - pentru a plasa un animal in barca, se face click pe acesta;

<br> - pentru a porni barca, se face click pe aceasta;

<br> - pentru a porni jocul, se face click pe butonul <b>Startjoc</b>. </div></body></html>

Documents

Programarea Avansata a Aplicatiilor Internet - old.unibuc.roold.unibuc.ro/prof/vlada_m/docs/2011/mai/21_15_15_13Proiect-3... · Aplicatia MathGraph realizeaza grafice pentru functiile