SVG – Learning by Coding

[ spiel_farbenmerken2.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 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-familysans-serif;
 24:         font-size12px;
 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==&& 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]