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 02/04 - 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: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <!-- Deckblatt und Farbflaechen 1 bis 18 als Symbole - Beginn -->
32:
33: <symbol id="zu"><!-- Deckblatt -->
34: <rect x="0" y="0" width="50" height="50" style="fill: #FFF; stroke: #000"/>
35: <line x1="0" y1="0" x2="50" y2="50" style="stroke: #999"/>
36: <line x1="50" y1="0" x2="0" y2="50" style="stroke: #999"/>
37: </symbol>
38:
39: <symbol id="s1">
40: <rect x="0" y="0" width="50" height="50" style="fill: #F00; stroke: #000"/>
41: </symbol>
42:
43: <symbol id="s2">
44: <rect x="0" y="0" width="50" height="50" style="fill: #090; stroke: #000"/>
45: </symbol>
46:
47: <symbol id="s3">
48: <rect x="0" y="0" width="50" height="50" style="fill: #FF0; stroke: #000"/>
49: </symbol>
50:
51: <symbol id="s4">
52: <rect x="0" y="0" width="50" height="50" style="fill: #00F; stroke: #000"/>
53: </symbol>
54:
55: <symbol id="s5">
56: <rect x="0" y="0" width="50" height="50" style="fill: #0FF; stroke: #000"/>
57: </symbol>
58:
59: <symbol id="s6">
60: <rect x="0" y="0" width="50" height="50" style="fill: #F0F; stroke: #000"/>
61: </symbol>
62:
63: <symbol id="s7">
64: <rect x="0" y="0" width="50" height="50" style="fill: #AAA; stroke: #000"/>
65: </symbol>
66:
67: <symbol id="s8">
68: <rect x="0" y="0" width="50" height="50" style="fill: #FC6; stroke: #000"/>
69: </symbol>
70:
71: <symbol id="s9">
72: <rect x="0" y="0" width="50" height="50" style="fill: #FCC; stroke: #000"/>
73: </symbol>
74:
75: <symbol id="s10">
76: <rect x="0" y="0" width="50" height="50" style="fill: #C03; stroke: #000"/>
77: </symbol>
78:
79: <symbol id="s11">
80: <rect x="0" y="0" width="50" height="50" style="fill: #CF6; stroke: #000"/>
81: </symbol>
82:
83: <symbol id="s12">
84: <rect x="0" y="0" width="50" height="50" style="fill: #EEE; stroke: #000"/>
85: </symbol>
86:
87: <symbol id="s13">
88: <rect x="0" y="0" width="50" height="50" style="fill: #069; stroke: #000"/>
89: </symbol>
90:
91: <symbol id="s14">
92: <rect x="0" y="0" width="50" height="50" style="fill: #0CC; stroke: #000"/>
93: </symbol>
94:
95: <symbol id="s15">
96: <rect x="0" y="0" width="50" height="50" style="fill: #FFC; stroke: #000"/>
97: </symbol>
98:
99: <symbol id="s16">
100: <rect x="0" y="0" width="50" height="50" style="fill: #C69; stroke: #000"/>
101: </symbol>
102:
103: <symbol id="s17">
104: <rect x="0" y="0" width="50" height="50" style="fill: #FFF; stroke: #000"/>
105: </symbol>
106:
107: <symbol id="s18">
108: <rect x="0" y="0" width="50" height="50" style="fill: #000; stroke: #000"/>
109: </symbol>
110:
111: <!-- Deckblatt und Farbflaechen 1 bis 18 als Symbole - Ende -->
112:
113:
114: <script type="text/javascript">
115: <![CDATA[
116:
117: var svgdoc,zahlen,click1=false,click2=false,clnr1=0,clnr2=0,clicks=0,versuche=0;
118: var temp,paare=0,feld1,feld2,ns="http://www.w3.org/1999/xlink",attr="href";
119: var spielfeld,use_elements;
120:
121:
122: function getSVGDoc(load_evt)
123: {
124: svgdoc=load_evt.target.ownerDocument;
125: spielfeld=svgdoc.getElementById("spielfeld");
126: use_elements=spielfeld.getElementsByTagName("use");
127: NeuesSpiel();
128: }
129:
130:
131: function InitRandom()
132: {
133: var neuezahl,k=0;
134: zahlen=new Array(use_elements.length);
135:
136: for(i=0;i<use_elements.length;i++)
137: {
138: neuezahl=Zufallszahl(1,use_elements.length/2);
139: for(j=0;j<zahlen.length;j++)
140: {
141: if(zahlen[j]==neuezahl)k++;
142: }
143: if(k<2)zahlen[i]=neuezahl;
144: else
145: {
146: k=0;
147: i--;
148: }
149: }
150: }
151:
152:
153: function Zufallszahl(von,bis)
154: {
155: var z;
156:
157: z=Math.floor(von+(bis-von+1)*Math.random());
158: return z;
159: }
160:
161:
162: function Check(click_evt)
163: {
164: var obj,feldid,feldnr;
165: obj=click_evt.currentTarget;
166:
167: feldid=obj.getAttribute("id");
168: feldnr=feldid.substring(1);
169:
170: if(obj.getAttributeNS(ns,attr)=="#zu" && paare<use_elements.length/2)
171: {
172: clicks++;
173: versuche++;
174: }
175:
176: if(clicks==1)
177: {
178: click1=true;
179: feld1=feldnr;
180: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld1-1]);
181: clnr1=zahlen[feld1-1];
182: }
183:
184: else if(clicks==2 && click1)
185: {
186: click2=true;
187: feld2=feldnr;
188: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld2-1]);
189: clnr2=zahlen[feld2-1];
190: }
191:
192: if(click1 && click2)
193: {
194: if(clnr1==clnr2)paare++;
195: else
196: {
197: LauscherAus();
198: setTimeout("Nochmal()",1000);
199: }
200: clicks=0;
201: click1=false;
202: click2=false;
203: }
204:
205: if(versuche%2==0)
206: {
207: svgdoc.getElementById("v").firstChild.nodeValue=versuche/2;
208: svgdoc.getElementById("p").firstChild.nodeValue=paare;
209: }
210: }
211:
212:
213: function Nochmal()
214: {
215: svgdoc.getElementById("f"+feld1).setAttributeNS(ns,attr,"#zu");
216: svgdoc.getElementById("f"+feld2).setAttributeNS(ns,attr,"#zu");
217: LauscherAn();
218: }
219:
220:
221: function NeuesSpiel()
222: {
223: AllesVerstecken();
224: InitRandom();
225: paare=0;
226: versuche=0;
227: svgdoc.getElementById("v").firstChild.nodeValue=versuche;
228: svgdoc.getElementById("p").firstChild.nodeValue=paare;
229: LauscherAn();
230: }
231:
232:
233: function HilfeAn()
234: {
235: temp=new Array(use_elements.length);
236:
237: for(i=0;i<use_elements.length;i++)
238: {
239: if(use_elements.item(i).getAttributeNS(ns,attr)=="#zu")
240: {
241: temp[i]=true;
242: use_elements.item(i).setAttributeNS(ns,attr,"#s"+zahlen[i]);
243: }
244: else temp[i]=false;
245: }
246: setTimeout("HilfeAus()",3000)
247: }
248:
249:
250: function HilfeAus()
251: {
252: for(i=0;i<use_elements.length;i++)
253: if(temp[i])use_elements.item(i).setAttributeNS(ns,attr,"#zu");
254: }
255:
256:
257: function AllesVerstecken()
258: {
259: for(i=0;i<use_elements.length;i++)
260: use_elements.item(i).setAttributeNS(ns,attr,"#zu");
261: }
262:
263:
264: function LauscherAn()
265: {
266: for(i=0;i<use_elements.length;i++)
267: use_elements.item(i).addEventListener("click",Check,false);
268: }
269:
270:
271: function LauscherAus()
272: {
273: for(i=0;i<use_elements.length;i++)
274: use_elements.item(i).removeEventListener("click",Check,false);
275: }
276:
277: ]]>
278: </script>
279:
280: </defs>
281:
282: <text x="20" y="30" style="fill: #000; font-size: 24px">
283: Denkspiel [36 Felder]</text>
284:
285: <text x="20" y="50" style="fill: #000; font-size: 12px">
286: Gesucht sind 18 gleichfarbige Paare.</text>
287:
288: <g id="spielfeld"><!-- 36 Felder -->
289: <!-- Reihe 1 -->
290: <use id="f1" xlink:href="#zu" x="20" y="70"/>
291: <use id="f2" xlink:href="#zu" x="70" y="70"/>
292: <use id="f3" xlink:href="#zu" x="120" y="70"/>
293: <use id="f4" xlink:href="#zu" x="170" y="70"/>
294: <use id="f5" xlink:href="#zu" x="220" y="70"/>
295: <use id="f6" xlink:href="#zu" x="270" y="70"/>
296: <!-- Reihe 2 -->
297: <use id="f7" xlink:href="#zu" x="20" y="120"/>
298: <use id="f8" xlink:href="#zu" x="70" y="120"/>
299: <use id="f9" xlink:href="#zu" x="120" y="120"/>
300: <use id="f10" xlink:href="#zu" x="170" y="120"/>
301: <use id="f11" xlink:href="#zu" x="220" y="120"/>
302: <use id="f12" xlink:href="#zu" x="270" y="120"/>
303: <!-- Reihe 3 -->
304: <use id="f13" xlink:href="#zu" x="20" y="170"/>
305: <use id="f14" xlink:href="#zu" x="70" y="170"/>
306: <use id="f15" xlink:href="#zu" x="120" y="170"/>
307: <use id="f16" xlink:href="#zu" x="170" y="170"/>
308: <use id="f17" xlink:href="#zu" x="220" y="170"/>
309: <use id="f18" xlink:href="#zu" x="270" y="170"/>
310: <!-- Reihe 4 -->
311: <use id="f19" xlink:href="#zu" x="20" y="220"/>
312: <use id="f20" xlink:href="#zu" x="70" y="220"/>
313: <use id="f21" xlink:href="#zu" x="120" y="220"/>
314: <use id="f22" xlink:href="#zu" x="170" y="220"/>
315: <use id="f23" xlink:href="#zu" x="220" y="220"/>
316: <use id="f24" xlink:href="#zu" x="270" y="220"/>
317: <!-- Reihe 5 -->
318: <use id="f25" xlink:href="#zu" x="20" y="270"/>
319: <use id="f26" xlink:href="#zu" x="70" y="270"/>
320: <use id="f27" xlink:href="#zu" x="120" y="270"/>
321: <use id="f28" xlink:href="#zu" x="170" y="270"/>
322: <use id="f29" xlink:href="#zu" x="220" y="270"/>
323: <use id="f30" xlink:href="#zu" x="270" y="270"/>
324: <!-- Reihe 6 -->
325: <use id="f31" xlink:href="#zu" x="20" y="320"/>
326: <use id="f32" xlink:href="#zu" x="70" y="320"/>
327: <use id="f33" xlink:href="#zu" x="120" y="320"/>
328: <use id="f34" xlink:href="#zu" x="170" y="320"/>
329: <use id="f35" xlink:href="#zu" x="220" y="320"/>
330: <use id="f36" xlink:href="#zu" x="270" y="320"/>
331: </g>
332:
333: <g id="infoblock">
334: <text x="70" y="400">
335: Gefundene Paare: <tspan id="p" style="fill: #F00">0</tspan>
336: </text>
337:
338: <text x="200" y="400">
339: Versuche: <tspan id="v" style="fill: #00C">0</tspan>
340: </text>
341:
342: <a xlink:href="" cursor="pointer" onclick="return false">
343: <text x="110" y="420" onclick="NeuesSpiel()">Neues Spiel</text>
344: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
345: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
346: </a>
347:
348: <a xlink:href="" cursor="pointer" onclick="return false">
349: <text x="200" y="420" onclick="HilfeAn()">Hilfe</text>
350: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
351: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
352: </a>
353: </g>
354:
355: </svg>
[zum Anfang]
