SVG – Learning by Coding

[ spiel_farbenmerken1.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 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==&& 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]