SVG – Learning by Coding
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: <!-- Author: Dr. Thomas 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==0 && 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]
