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 8 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: #CCC; 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: <!-- Deckblatt und Farbflaechen 1 bis 8 als Symbole - Ende -->
72:
73:
74: <script type="text/javascript">
75: <![CDATA[
76:
77: var svgdoc,zahlen,click1=false,click2=false,clnr1=0,clnr2=0,clicks=0,versuche=0;
78: var temp,paare=0,feld1,feld2,ns="http://www.w3.org/1999/xlink",attr="href";
79: var spielfeld,use_elements;
80:
81:
82: function getSVGDoc(load_evt)
83: {
84: svgdoc=load_evt.target.ownerDocument;
85: spielfeld=svgdoc.getElementById("spielfeld");
86: use_elements=spielfeld.getElementsByTagName("use");
87: NeuesSpiel();
88: }
89:
90:
91: function InitRandom()
92: {
93: var neuezahl,k=0;
94: zahlen=new Array(use_elements.length);
95:
96: for(i=0;i<use_elements.length;i++)
97: {
98: neuezahl=Zufallszahl(1,use_elements.length/2);
99: for(j=0;j<zahlen.length;j++)
100: {
101: if(zahlen[j]==neuezahl)k++;
102: }
103: if(k<2)zahlen[i]=neuezahl;
104: else
105: {
106: k=0;
107: i--;
108: }
109: }
110: }
111:
112:
113: function Zufallszahl(von,bis)
114: {
115: var z;
116:
117: z=Math.floor(von+(bis-von+1)*Math.random());
118: return z;
119: }
120:
121:
122: function Check(click_evt)
123: {
124: var obj,feldid,feldnr;
125: obj=click_evt.currentTarget;
126:
127: feldid=obj.getAttribute("id");
128: feldnr=feldid.substring(1);
129:
130: if(obj.getAttributeNS(ns,attr)=="#zu" && paare<use_elements.length/2)
131: {
132: clicks++;
133: versuche++;
134: }
135:
136: if(clicks==1)
137: {
138: click1=true;
139: feld1=feldnr;
140: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld1-1]);
141: clnr1=zahlen[feld1-1];
142: }
143:
144: else if(clicks==2 && click1)
145: {
146: click2=true;
147: feld2=feldnr;
148: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld2-1]);
149: clnr2=zahlen[feld2-1];
150: }
151:
152: if(click1 && click2)
153: {
154: if(clnr1==clnr2)paare++;
155: else
156: {
157: LauscherAus();
158: setTimeout("Nochmal()",1000);
159: }
160: clicks=0;
161: click1=false;
162: click2=false;
163: }
164:
165: if(versuche%2==0)
166: {
167: svgdoc.getElementById("v").firstChild.nodeValue=versuche/2;
168: svgdoc.getElementById("p").firstChild.nodeValue=paare;
169: }
170: }
171:
172:
173: function Nochmal()
174: {
175: svgdoc.getElementById("f"+feld1).setAttributeNS(ns,attr,"#zu");
176: svgdoc.getElementById("f"+feld2).setAttributeNS(ns,attr,"#zu");
177: LauscherAn();
178: }
179:
180:
181: function NeuesSpiel()
182: {
183: AllesVerstecken();
184: InitRandom();
185: paare=0;
186: versuche=0;
187: svgdoc.getElementById("v").firstChild.nodeValue=versuche;
188: svgdoc.getElementById("p").firstChild.nodeValue=paare;
189: LauscherAn();
190: }
191:
192:
193: function HilfeAn()
194: {
195: temp=new Array(use_elements.length);
196:
197: for(i=0;i<use_elements.length;i++)
198: {
199: if(use_elements.item(i).getAttributeNS(ns,attr)=="#zu")
200: {
201: temp[i]=true;
202: use_elements.item(i).setAttributeNS(ns,attr,"#s"+zahlen[i]);
203: }
204: else temp[i]=false;
205: }
206: setTimeout("HilfeAus()",3000)
207: }
208:
209:
210: function HilfeAus()
211: {
212: for(i=0;i<use_elements.length;i++)
213: if(temp[i])use_elements.item(i).setAttributeNS(ns,attr,"#zu");
214: }
215:
216:
217: function AllesVerstecken()
218: {
219: for(i=0;i<use_elements.length;i++)
220: use_elements.item(i).setAttributeNS(ns,attr,"#zu");
221: }
222:
223:
224: function LauscherAn()
225: {
226: for(i=0;i<use_elements.length;i++)
227: use_elements.item(i).addEventListener("click",Check,false);
228: }
229:
230:
231: function LauscherAus()
232: {
233: for(i=0;i<use_elements.length;i++)
234: use_elements.item(i).removeEventListener("click",Check,false);
235: }
236:
237: ]]>
238: </script>
239:
240: </defs>
241:
242: <text x="20" y="30" style="fill: #000; font-size: 24px">
243: Denkspiel [16 Felder]</text>
244:
245: <text x="20" y="50" style="fill: #000; font-size: 12px">
246: Gesucht sind 8 gleichfarbige Paare.</text>
247:
248: <g id="spielfeld"><!-- 16 Felder -->
249: <!-- Reihe 1 -->
250: <use id="f1" xlink:href="#zu" x="20" y="70"/>
251: <use id="f2" xlink:href="#zu" x="70" y="70"/>
252: <use id="f3" xlink:href="#zu" x="120" y="70"/>
253: <use id="f4" xlink:href="#zu" x="170" y="70"/>
254: <!-- Reihe 2 -->
255: <use id="f5" xlink:href="#zu" x="20" y="120"/>
256: <use id="f6" xlink:href="#zu" x="70" y="120"/>
257: <use id="f7" xlink:href="#zu" x="120" y="120"/>
258: <use id="f8" xlink:href="#zu" x="170" y="120"/>
259: <!-- Reihe 3 -->
260: <use id="f9" xlink:href="#zu" x="20" y="170"/>
261: <use id="f10" xlink:href="#zu" x="70" y="170"/>
262: <use id="f11" xlink:href="#zu" x="120" y="170"/>
263: <use id="f12" xlink:href="#zu" x="170" y="170"/>
264: <!-- Reihe 4 -->
265: <use id="f13" xlink:href="#zu" x="20" y="220"/>
266: <use id="f14" xlink:href="#zu" x="70" y="220"/>
267: <use id="f15" xlink:href="#zu" x="120" y="220"/>
268: <use id="f16" xlink:href="#zu" x="170" y="220"/>
269: </g>
270:
271: <g id="infoblock">
272: <text x="20" y="300">
273: Gefundene Paare: <tspan id="p" style="fill: #F00">0</tspan>
274: </text>
275:
276: <text x="150" y="300">
277: Versuche: <tspan id="v" style="fill: #00C">0</tspan>
278: </text>
279:
280: <a xlink:href="" cursor="pointer" onclick="return false">
281: <text x="60" y="320" onclick="NeuesSpiel()">Neues Spiel</text>
282: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
283: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
284: </a>
285:
286: <a xlink:href="" cursor="pointer" onclick="return false">
287: <text x="150" y="320" onclick="HilfeAn()">Hilfe</text>
288: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
289: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
290: </a>
291: </g>
292:
293: </svg>
[zum Anfang]
