SVG – Learning by Coding

[ tic-tac-toe.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  5: ]>
  6: 
  7: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    AuthorDrThomas Meinike 03/05 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <!-- Deckblatt und Spielfiguren als Symbole Beginn -->
 19: 
 20:     <symbol id="zu"><!-- Deckblatt -->
 21:       <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/>
 22:       <line x1="0" y1="0" x2="100" y2="100" style="stroke: #999"/>
 23:       <line x1="100" y1="0" x2="0" y2="100" style="stroke: #999"/>
 24:     </symbol>
 25: 
 26:     <symbol id="s1"><!-- Spielfigur 1 -->
 27:       <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/>
 28:       <path fill="#F00" stroke="#000" stroke-width="0.3px"
 29:         transform="translate(-60,-10) scale(6)"
 30:         d="M14.2,3.8C15.6,5.6 17.1,7.4 18.8,9.0C20.2,7.3 21.5,5.4 22.7,3.4
 31:         C23.5,3.3 24.4,3.1 25.2,3.5C25.6,4.2 25.0,5.0 24.8,5.6C23.8,7.6 22.6,9.5
 32:         21.1,11.2C22.5,12.7 24.2,13.7 25.8,15.0C26.4,15.5 25.8,17.0 25.1,16.8
 33:         C24.5,16.4 24.1,17.5 23.6,16.8C21.8,15.8 20.1,14.8 18.5,13.5C17.1,15.0
 34:         15.4,16.2 13.7,17.2C13.0,17.6 12.1,17.3 11.4,17.1C11.6,16.7 11.6,16.4
 35:         11.2,16.2C10.4,15.4 11.6,14.9 12.2,14.5C13.5,13.6 14.8,12.6 16.0,11.5
 36:         C14.5,10.3 13.5,8.7 12.5,7.2C12.1,6.6 11.7,5.9 11.3,5.2C11.7,4.6 12.1,3.6
 37:         13.1,4.0C13.3,3.5 13.7,3.5 14.2,3.8Z"/>
 38:     </symbol>
 39: 
 40:     <symbol id="s2"><!-- Spielfigur 2 -->
 41:       <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/>
 42:       <path fill="#00C" stroke="#000" stroke-width="0.3px"
 43:         transform="translate(-60,-10) scale(6)"
 44:         d="M14.2,3.8C15.6,5.6 17.1,7.4 18.8,9.0C20.2,7.3 21.5,5.4 22.7,3.4
 45:         C23.5,3.3 24.4,3.1 25.2,3.5C25.6,4.2 25.0,5.0 24.8,5.6C23.8,7.6 22.6,9.5
 46:         21.1,11.2C22.5,12.7 24.2,13.7 25.8,15.0C26.4,15.5 25.8,17.0 25.1,16.8
 47:         C24.5,16.4 24.1,17.5 23.6,16.8C21.8,15.8 20.1,14.8 18.5,13.5C17.1,15.0
 48:         15.4,16.2 13.7,17.2C13.0,17.6 12.1,17.3 11.4,17.1C11.6,16.7 11.6,16.4
 49:         11.2,16.2C10.4,15.4 11.6,14.9 12.2,14.5C13.5,13.6 14.8,12.6 16.0,11.5
 50:         C14.5,10.3 13.5,8.7 12.5,7.2C12.1,6.6 11.7,5.9 11.3,5.2C11.7,4.6 12.1,3.6
 51:         13.1,4.0C13.3,3.5 13.7,3.5 14.2,3.8Z"/>
 52:     </symbol>
 53: 
 54:     <!-- Deckblatt und Spielfiguren als Symbole Ende -->
 55: 
 56: 
 57:     <script type="text/javascript">
 58:       <![CDATA[
 59: 
 60:       var svgdoc,spielfeld,infoobj,sp1obj,sp2obj,use_elements;
 61:       var spieler1,spieler2,sp1=0,sp2=0,t=0,count=0,beg=1;
 62:       var ns="http://www.w3.org/1999/xlink",attr="href";
 63:       var ttt=[[0,0,0],[0,0,0],[0,0,0]];
 64: 
 65: 
 66:       function getSVGDoc(load_evt)
 67:       {
 68:         svgdoc=load_evt.target.ownerDocument;
 69:         spielfeld=svgdoc.getElementById("spielfeld");
 70:         infoobj=svgdoc.getElementById("info");
 71:         sp1obj=svgdoc.getElementById("sp1");
 72:         sp2obj=svgdoc.getElementById("sp2");
 73:         use_elements=spielfeld.getElementsByTagName("use");
 74:         NeuesSpiel();
 75:       }
 76: 
 77: 
 78:       function Zug(click_evt)
 79:       {
 80:         var obj,feldid,i,j;
 81: 
 82:         obj=click_evt.currentTarget;
 83:         feldid=obj.getAttribute("id");
 84:         i=feldid.charAt(1)-1;
 85:         j=feldid.charAt(2)-1;
 86:         count++;
 87: 
 88:         if(spieler1 && obj.getAttributeNS(ns,attr)=="#zu" && t==0)
 89:         {
 90:           ttt[i][j]+=1;
 91:           obj.setAttributeNS(ns,attr,"#s1");
 92:           if(Check()==1)
 93:           {
 94:             infoobj.firstChild.nodeValue="Spieler 1 hat gewonnen!";
 95:             sp1++;
 96:             sp1obj.firstChild.nodeValue=sp1;
 97:             LauscherAus();
 98:           }
 99:           else
100:           {
101:             spieler1=false;
102:             spieler2=true;
103:             infoobj.style.setProperty("fill","#00C","");
104:             infoobj.firstChild.nodeValue="Spieler 2 ist am Zug ...";
105:           }
106:         }
107:         else if(spieler2 && obj.getAttributeNS(ns,attr)=="#zu" && t==0)
108:         {
109:           ttt[i][j]+=10;
110:           obj.setAttributeNS(ns,attr,"#s2");
111:           if(Check()==2)
112:           {
113:             infoobj.firstChild.nodeValue="Spieler 2 hat gewonnen!";
114:             sp2++;
115:             sp2obj.firstChild.nodeValue=sp2;
116:             LauscherAus();
117:           }
118:           else
119:           {
120:             spieler1=true;
121:             spieler2=false;
122:             infoobj.style.setProperty("fill","#F00","");
123:             infoobj.firstChild.nodeValue="Spieler 1 ist am Zug ...";
124:           }
125:         }
126: 
127:         if(t==&& count==9)
128:         {
129:           infoobj.style.setProperty("fill","#000","");
130:           infoobj.firstChild.nodeValue="Unentschieden!";
131:           LauscherAus();
132:         }
133:       }
134: 
135: 
136:       function Check()
137:       {
138:         var rsd=new Array(8),i;
139: 
140:         // Reihen
141:         rsd[0]=ttt[0][0]+ttt[0][1]+ttt[0][2];
142:         rsd[1]=ttt[1][0]+ttt[1][1]+ttt[1][2];
143:         rsd[2]=ttt[2][0]+ttt[2][1]+ttt[2][2];
144: 
145:         // Spalten
146:         rsd[3]=ttt[0][0]+ttt[1][0]+ttt[2][0];
147:         rsd[4]=ttt[0][1]+ttt[1][1]+ttt[2][1];
148:         rsd[5]=ttt[0][2]+ttt[1][2]+ttt[2][2];
149: 
150:         // Diagonalen
151:         rsd[6]=ttt[0][0]+ttt[1][1]+ttt[2][2];
152:         rsd[7]=ttt[0][2]+ttt[1][1]+ttt[2][0];     
153: 
154:         for(i=0;i<8;i++)
155:         {
156:           // Test Spieler 1
157:           if(rsd[i]==3)
158:           {
159:             t=1;
160:             break;
161:           }
162:           // Test Spieler 2
163:           else if(rsd[i]==30)
164:           {
165:             t=2;
166:             break;
167:           }
168:         }
169:         return t;
170:       }
171: 
172: 
173:       function NeuesSpiel()
174:       {
175:         AllesVerstecken();
176:         infoobj.firstChild.nodeValue="Spieler "+beg+" ist am Zug ...";
177: 
178:         if(beg==1)
179:         {
180:           beg=2;
181:           spieler1=true;
182:           spieler2=false;
183:           infoobj.style.setProperty("fill","#F00","");
184:         }
185:         else if(beg==2)
186:         {
187:           beg=1;
188:           spieler1=false;
189:           spieler2=true;
190:           infoobj.style.setProperty("fill","#00C","");
191:         }
192: 
193:         t=0;
194:         count=0;
195:         ttt=[[0,0,0],[0,0,0],[0,0,0]];
196:         LauscherAn();
197:       }
198: 
199: 
200:       function AllesVerstecken()
201:       {
202:         for(i=0;i<use_elements.length;i++)
203:           use_elements.item(i).setAttributeNS(ns,attr,"#zu");
204:       }
205: 
206: 
207:       function LauscherAn()
208:       {
209:         for(i=0;i<use_elements.length;i++)
210:           use_elements.item(i).addEventListener("click",Zug,false);
211:       }
212: 
213: 
214:       function LauscherAus()
215:       {
216:         for(i=0;i<use_elements.length;i++)
217:           use_elements.item(i).removeEventListener("click",Zug,false);
218:       }
219: 
220:       ]]>
221:     </script>
222: 
223:   </defs>
224: 
225:   <text x="20" y="30" style="fill: #000; font-size: 24px">
226:     Spiel Tic-Tac-Toe</text>
227: 
228:   <text id="info" x="20" y="55" style="fill: #F00; font-size: 14px">
229:     Spieler 1 ist am Zug ...</text>
230: 
231:   <text x="195" y="55" style="fill: #000; font-size: 14px">
232:     <tspan id="sp1" style="fill: #F00">0</tspan>
233:     <tspan style="fill: #000">:</tspan>
234:     <tspan id="sp2" style="fill: #00C">0</tspan>
235:   </text>
236: 
237:   <a xlink:href="" cursor="pointer" onclick="return false">
238:     <text x="245" y="55" style="fill: #000; font-size: 14px"
239:       onclick="NeuesSpiel()">Neues Spiel
240:     <set attributeName="fill" attributeType="CSS" to="#090"
241:       begin="mouseover" end="mouseout"/>
242:     </text>
243:   </a>
244: 
245:   <g id="spielfeld"><!-- 9 Felder -->
246:     <!-- Felder der Reihe 1 -->
247:     <use id="f11" xlink:href="#zu" x="20" y="70"/>
248:     <use id="f12" xlink:href="#zu" x="120" y="70"/>
249:     <use id="f13" xlink:href="#zu" x="220" y="70"/>
250:     <!-- Felder der Reihe 2 -->
251:     <use id="f21" xlink:href="#zu" x="20" y="170"/>
252:     <use id="f22" xlink:href="#zu" x="120" y="170"/>
253:     <use id="f23" xlink:href="#zu" x="220" y="170"/>
254:     <!-- Felder der Reihe 3 -->
255:     <use id="f31" xlink:href="#zu" x="20" y="270"/>
256:     <use id="f32" xlink:href="#zu" x="120" y="270"/>
257:     <use id="f33" xlink:href="#zu" x="220" y="270"/>
258:   </g>
259: 
260: </svg>

[zum Anfang]