Silverlight/XAML – Learning by Coding
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!-- coded by Thomas Meinike 02/08 -->
3: <Canvas xmlns="http://schemas.microsoft.com/client/2007"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: x:Name="spielfeld" Loaded="FarbenMerkenStart"><!-- 36 Felder -->
6:
7: <!-- Portierung der SVG-Variante by Thomas Meinike 02/04
8: http://svglbc.datenverdrahten.de/?code=spiel_farbenmerken2&znr=on -->
9:
10: <!-- Reihe 1 -->
11: <Rectangle x:Name="f1" Canvas.Left="20" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
12: <Image x:Name="d1" Source="media/deck.png" Canvas.Left="20" Canvas.Top="20"/>
13: <Rectangle x:Name="f2" Canvas.Left="70" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
14: <Image x:Name="d2" Source="media/deck.png" Canvas.Left="70" Canvas.Top="20"/>
15: <Rectangle x:Name="f3" Canvas.Left="120" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
16: <Image x:Name="d3" Source="media/deck.png" Canvas.Left="120" Canvas.Top="20"/>
17: <Rectangle x:Name="f4" Canvas.Left="170" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
18: <Image x:Name="d4" Source="media/deck.png" Canvas.Left="170" Canvas.Top="20"/>
19: <Rectangle x:Name="f5" Canvas.Left="220" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
20: <Image x:Name="d5" Source="media/deck.png" Canvas.Left="220" Canvas.Top="20"/>
21: <Rectangle x:Name="f6" Canvas.Left="270" Canvas.Top="20" Width="50" Height="50" Stroke="#999"/>
22: <Image x:Name="d6" Source="media/deck.png" Canvas.Left="270" Canvas.Top="20"/>
23:
24: <!-- Reihe 2 -->
25: <Rectangle x:Name="f7" Canvas.Left="20" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
26: <Image x:Name="d7" Source="media/deck.png" Canvas.Left="20" Canvas.Top="70"/>
27: <Rectangle x:Name="f8" Canvas.Left="70" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
28: <Image x:Name="d8" Source="media/deck.png" Canvas.Left="70" Canvas.Top="70"/>
29: <Rectangle x:Name="f9" Canvas.Left="120" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
30: <Image x:Name="d9" Source="media/deck.png" Canvas.Left="120" Canvas.Top="70"/>
31: <Rectangle x:Name="f10" Canvas.Left="170" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
32: <Image x:Name="d10" Source="media/deck.png" Canvas.Left="170" Canvas.Top="70"/>
33: <Rectangle x:Name="f11" Canvas.Left="220" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
34: <Image x:Name="d11" Source="media/deck.png" Canvas.Left="220" Canvas.Top="70"/>
35: <Rectangle x:Name="f12" Canvas.Left="270" Canvas.Top="70" Width="50" Height="50" Stroke="#999"/>
36: <Image x:Name="d12" Source="media/deck.png" Canvas.Left="270" Canvas.Top="70"/>
37:
38: <!-- Reihe 3 -->
39: <Rectangle x:Name="f13" Canvas.Left="20" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
40: <Image x:Name="d13" Source="media/deck.png" Canvas.Left="20" Canvas.Top="120"/>
41: <Rectangle x:Name="f14" Canvas.Left="70" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
42: <Image x:Name="d14" Source="media/deck.png" Canvas.Left="70" Canvas.Top="120"/>
43: <Rectangle x:Name="f15" Canvas.Left="120" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
44: <Image x:Name="d15" Source="media/deck.png" Canvas.Left="120" Canvas.Top="120"/>
45: <Rectangle x:Name="f16" Canvas.Left="170" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
46: <Image x:Name="d16" Source="media/deck.png" Canvas.Left="170" Canvas.Top="120"/>
47: <Rectangle x:Name="f17" Canvas.Left="220" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
48: <Image x:Name="d17" Source="media/deck.png" Canvas.Left="220" Canvas.Top="120"/>
49: <Rectangle x:Name="f18" Canvas.Left="270" Canvas.Top="120" Width="50" Height="50" Stroke="#999"/>
50: <Image x:Name="d18" Source="media/deck.png" Canvas.Left="270" Canvas.Top="120"/>
51:
52: <!-- Reihe 4 -->
53: <Rectangle x:Name="f19" Canvas.Left="20" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
54: <Image x:Name="d19" Source="media/deck.png" Canvas.Left="20" Canvas.Top="170"/>
55: <Rectangle x:Name="f20" Canvas.Left="70" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
56: <Image x:Name="d20" Source="media/deck.png" Canvas.Left="70" Canvas.Top="170"/>
57: <Rectangle x:Name="f21" Canvas.Left="120" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
58: <Image x:Name="d21" Source="media/deck.png" Canvas.Left="120" Canvas.Top="170"/>
59: <Rectangle x:Name="f22" Canvas.Left="170" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
60: <Image x:Name="d22" Source="media/deck.png" Canvas.Left="170" Canvas.Top="170"/>
61: <Rectangle x:Name="f23" Canvas.Left="220" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
62: <Image x:Name="d23" Source="media/deck.png" Canvas.Left="220" Canvas.Top="170"/>
63: <Rectangle x:Name="f24" Canvas.Left="270" Canvas.Top="170" Width="50" Height="50" Stroke="#999"/>
64: <Image x:Name="d24" Source="media/deck.png" Canvas.Left="270" Canvas.Top="170"/>
65:
66: <!-- Reihe 5 -->
67: <Rectangle x:Name="f25" Canvas.Left="20" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
68: <Image x:Name="d25" Source="media/deck.png" Canvas.Left="20" Canvas.Top="220"/>
69: <Rectangle x:Name="f26" Canvas.Left="70" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
70: <Image x:Name="d26" Source="media/deck.png" Canvas.Left="70" Canvas.Top="220"/>
71: <Rectangle x:Name="f27" Canvas.Left="120" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
72: <Image x:Name="d27" Source="media/deck.png" Canvas.Left="120" Canvas.Top="220"/>
73: <Rectangle x:Name="f28" Canvas.Left="170" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
74: <Image x:Name="d28" Source="media/deck.png" Canvas.Left="170" Canvas.Top="220"/>
75: <Rectangle x:Name="f29" Canvas.Left="220" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
76: <Image x:Name="d29" Source="media/deck.png" Canvas.Left="220" Canvas.Top="220"/>
77: <Rectangle x:Name="f30" Canvas.Left="270" Canvas.Top="220" Width="50" Height="50" Stroke="#999"/>
78: <Image x:Name="d30" Source="media/deck.png" Canvas.Left="270" Canvas.Top="220"/>
79:
80: <!-- Reihe 6 -->
81: <Rectangle x:Name="f31" Canvas.Left="20" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
82: <Image x:Name="d31" Source="media/deck.png" Canvas.Left="20" Canvas.Top="270"/>
83: <Rectangle x:Name="f32" Canvas.Left="70" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
84: <Image x:Name="d32" Source="media/deck.png" Canvas.Left="70" Canvas.Top="270"/>
85: <Rectangle x:Name="f33" Canvas.Left="120" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
86: <Image x:Name="d33" Source="media/deck.png" Canvas.Left="120" Canvas.Top="270"/>
87: <Rectangle x:Name="f34" Canvas.Left="170" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
88: <Image x:Name="d34" Source="media/deck.png" Canvas.Left="170" Canvas.Top="270"/>
89: <Rectangle x:Name="f35" Canvas.Left="220" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
90: <Image x:Name="d35" Source="media/deck.png" Canvas.Left="220" Canvas.Top="270"/>
91: <Rectangle x:Name="f36" Canvas.Left="270" Canvas.Top="270" Width="50" Height="50" Stroke="#999"/>
92: <Image x:Name="d36" Source="media/deck.png" Canvas.Left="270" Canvas.Top="270"/>
93:
94: <TextBlock Canvas.Left="70" Canvas.Top="330" FontFamily="Arial" FontSize="12" Foreground="#000">
95: <Run Text="Gefundene Paare: "/><Run x:Name="p" Foreground="#F00" Text="0"/>
96: </TextBlock>
97:
98: <TextBlock Canvas.Left="200" Canvas.Top="330" FontFamily="Arial" FontSize="12" Foreground="#000">
99: <Run Text="Versuche: "/><Run x:Name="v" Foreground="#F00" Text="0"/>
100: </TextBlock>
101:
102: <TextBlock Canvas.Left="110" Canvas.Top="350" FontFamily="Arial" FontSize="12" Foreground="#00C"
103: Text="Neues Spiel" MouseLeftButtonDown="NeuesSpiel" MouseEnter="TextOver" MouseLeave="TextOut"/>
104:
105: <TextBlock Canvas.Left="200" Canvas.Top="350" FontFamily="Arial" FontSize="12" Foreground="#00C"
106: Text="Hilfe" MouseLeftButtonDown="HilfeAn" MouseEnter="TextOver" MouseLeave="TextOut"/>
107:
108:
109: <!-- // zusätzlich verwendeter JavaScript-Code:
110:
111: var colors=["#F00","#090","#FF0","#00F","#0FF","#F0F","#AAA","#FC6","#FCC",
112: "#C03","#CF6","#EEE","#069","#0CC","#FFC","#C69","#FFF","#000"];
113: var anzahl=colors.length*2,zahlen,click1=false,click2=false,clnr1=0,clnr2=0,
114: clicks=0,versuche=0,paare=0,feld1,feld2,temp,hilfe=false;
115: var p_obj,v_obj,spielfeld; // global
116:
117: function InitRandom()
118: {
119: var neuezahl,i,k=0;
120: zahlen=new Array(anzahl);
121:
122: for(var i=0;i<anzahl;i++)
123: {
124: neuezahl=Zufallszahl(1,colors.length);
125: for(j=0;j<anzahl;j++)
126: {
127: if(zahlen[j]==neuezahl)k++;
128: }
129: if(k<2)zahlen[i]=neuezahl;
130: else
131: {
132: k=0;
133: i=i-1;
134: }
135: }
136:
137: for(var i=0;i<anzahl;i++)
138: {
139: spielfeld.findName("f"+(i+1)).fill=colors[zahlen[i]-1];
140: }
141: }
142:
143:
144: function FarbenMerkenStart(sender,eventArgs)
145: {
146: spielfeld=sender;
147: spielfeld.cursor="None";
148: p_obj=sender.findName("p");
149: v_obj=sender.findName("v");
150: LauscherAn();
151: setTimeout("NeuesSpiel()",3000);
152: }
153:
154:
155: function NeuesSpiel()
156: {
157: if(!hilfe)
158: {
159: AllesVerstecken();
160: paare=0;
161: p_obj.text=paare.toString();
162: versuche=0;
163: v_obj.text=versuche.toString();
164: InitRandom();
165: spielfeld.cursor="Default";
166: }
167: }
168:
169:
170: function Check(sender,eventArgs)
171: {
172: var obj,feldid,feldnr;
173:
174: obj=sender;
175: feldid=obj.Name;
176: feldnr=feldid.substring(1);
177:
178: if(obj.visibility=="Visible" && spielfeld.cursor=="Default" && paare<anzahl/2)
179: {
180: clicks++;
181: versuche++;
182: }
183:
184: if(clicks==1)
185: {
186: click1=true;
187: feld1=feldnr;
188: obj.visibility="Collapsed";
189: clnr1=zahlen[feld1-1];
190: }
191: else if(clicks==2 && click1)
192: {
193: click2=true;
194: feld2=feldnr;
195: obj.visibility="Collapsed";
196: clnr2=zahlen[feld2-1];
197: }
198:
199: if(click1 && click2)
200: {
201: if(clnr1==clnr2)paare++;
202: else
203: {
204: spielfeld.cursor="None";
205: setTimeout(function(){Nochmal(feld1,feld2);},1000);
206: }
207: clicks=0;
208: click1=false;
209: click2=false;
210: }
211:
212: if(versuche%2==0)
213: {
214: p_obj.text=paare.toString();
215: v_obj.text=(versuche/2).toString();
216: }
217: }
218:
219:
220: function Nochmal(feld1,feld2)
221: {
222: spielfeld.findName("d"+feld1).visibility="Visible";
223: spielfeld.findName("d"+feld2).visibility="Visible";
224: spielfeld.cursor="Default";
225: }
226:
227:
228: function AllesVerstecken()
229: {
230: for(var i=0;i<anzahl;i++)
231: {
232: spielfeld.findName("d"+(i+1)).visibility="Visible";
233: }
234: }
235:
236:
237: function LauscherAn()
238: {
239: for(var i=0;i<anzahl;i++)
240: {
241: spielfeld.findName("d"+(i+1)).addEventListener("MouseLeftButtonDown",Check);
242: }
243: }
244:
245:
246:
247: function HilfeAn()
248: {
249: if(!hilfe)
250: {
251: hilfe=!hilfe;
252: spielfeld.cursor="None";
253: temp=new Array(anzahl);
254:
255: for(var i=0;i<anzahl;i++)
256: {
257: if(spielfeld.findName("d"+(i+1)).visibility=="Visible")
258: {
259: temp[i]=true;
260: spielfeld.findName("d"+(i+1)).visibility="Collapsed";
261: }
262: else temp[i]=false;
263: }
264: setTimeout("HilfeAus()",3000);
265: }
266: }
267:
268:
269: function HilfeAus()
270: {
271: for(var i=0;i<anzahl;i++)
272: {
273: if(temp[i])
274: {
275: spielfeld.findName("d"+(i+1)).visibility="Visible";
276: }
277: }
278: spielfeld.cursor="Default";
279: hilfe=!hilfe;
280: }
281:
282:
283: function Zufallszahl(von,bis)
284: {
285: return Math.floor(von+(bis-von+1)*Math.random());
286: }
287:
288:
289: function TextOver(sender,eventArgs)
290: {
291: var txt_obj=sender;
292:
293: txt_obj.cursor="Hand";
294: txt_obj.foreGround="#F00";
295: txt_obj.textDecorations="Underline";
296: }
297:
298:
299: function TextOut(sender,eventArgs)
300: {
301: var txt_obj=sender;
302:
303: txt_obj.cursor="Default";
304: txt_obj.foreGround="#00C";
305: txt_obj.textDecorations="None";
306: }
307:
308: -->
309:
310: </Canvas>
[zum Anfang]
