Javascript – функция с масив – заигравка

… не бях съвсем сигурен в кой раздел да закача този код … дали в „Полезни кодове“ или в „javascript“.
… ами става дума за сорсче, от което може да се види как борави един цикъл и как този цикъл може да борави с масиви. Като казвам „види“ – значи наистина може да види ( и сорс и изображение). Писал съм го преди около 2 години (когато бях започнал да уча езика), но такова уражнение ще ви даде истинско усещане за боравене с вложени цикли. CSS – не го гледайте и не намирайте косури. Сега бих но написал далеч по-сгъстено и кратко, но пък от друга страна е чудесно за човек, който сега започва с тези езици и иска да се ориентира … и така:

<html>
<head>
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title>Loto</title>

<style type="text/css">
body {
color: #990033;
background: #ff9900;
}

#table_A {
border-style: ridge;
border-color: #ff9900;
font-weight: bold;
font-size: 12;
width: 450;
height: 450;
position: absolute;
top: 100;
left: 280;
}

td {
text-align: center;
border-style: ridge;
border-color: #ff9900;
cursor: hand;
}

#but_A {
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 100;
left: 85;
}
#but_B {
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 130;
left: 85;
}


#but_start_a{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 250;
left: 85;
}
#but_start_b{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 280;
left: 85;
}

#but_start_c{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 310;
left: 85;
}
#but_start_d{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 340;
left: 85;
}
#but_start_e{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 370;
left: 85;
}
#but_start_f{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 400;
left: 85;
}
#but_start_g{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 430;
left: 85;
}
#but_start_h{
color: #990033;
background: #ff9900;
font-weight: bold;
width: 110;
position: absolute;
top: 460;
left: 85;
}

</style>

<script language="javascript">

function Zirou_All()
{
for(q=1; q<225; q++)
{
document.getElementById('t_' + q).style.background = '#ff9900';
}
}


var Clr_a = new Array('#ff9900','#ffcc33','#ffcc00','#ffff99','#ffff66','#ffff33','#ffff00','#cc0000');
var Clr_aa = new Array('#ff9900','#ffcc33','#ffcc00','#ffff99','#ffff66','#ffff33','#ffff00');
var Clr_ab = new Array('#ff9900','#ffcc33','#ffcc00','#ffff99','#ffff66','#ffff33');
var Clr_ac = new Array('#ff9900','#ffcc33','#ffcc00','#ffff99');

var Clr_b = new Array('#9900cc','#660099','#cc66cc','#cc33cc','#ff99cc','#ff66cc','#ff33cc','#993399');
var Clr_ba= new Array('#660099','#cc66cc','#cc33cc','#ff99cc','#ff66cc','#ff33cc','#993399');
var Clr_bb = new Array('#cc66cc','#cc33cc','#ff99cc','#ff66cc','#ff33cc','#993399');
var Clr_bc = new Array('#ff99cc','#ff66cc','#ff33cc','#993399');


function Zeal_a()
{
for(i=1; i<225; i++)
{
for(var z in Clr_a)
{
document.getElementById('t_' + i++).style.background = Clr_a[z];
}
}
}
function Zeal_b()
{
for(i=1; i<225; i++)
{
for(var z in Clr_aa)
{
document.getElementById('t_' + i++).style.background = Clr_aa[z];
}
}
}
function Zeal_c()
{
for(i=1; i<225; i++)
{
for(var z in Clr_ab)
{
document.getElementById('t_' + i++).style.background = Clr_ab[z];
}
}
}
function Zeal_d()
{
for(i=1; i<225; i++)
{
for(var z in Clr_ac)
{
document.getElementById('t_' + i++).style.background = Clr_ac[z];
}
}
}
function Zeal_e()
{
for(i=1; i<225; i++)
{
for(var z in Clr_b)
{
document.getElementById('t_' + i++).style.background = Clr_b[z];
}
}
}
function Zeal_f()
{
for(i=1; i<225; i++)
{
for(var z in Clr_ba)
{
document.getElementById('t_' + i++).style.background = Clr_ba[z];
}
}
}
function Zeal_g()
{
for(i=1; i<225; i++)
{
for(var z in Clr_bb)
{
document.getElementById('t_' + i++).style.background = Clr_bb[z];
}
}
}
function Zeal_h()
{
for(i=1; i<225; i++)
{
for(var z in Clr_bc)
{
document.getElementById('t_' + i++).style.background = Clr_bc[z];
}
}
}


function All_cycle()
{
setTimeout('Zeal_a()',1000);
setTimeout('Zirou_All()',1900);
setTimeout('Zeal_b()',2000);
setTimeout('Zirou_All()',2900);
setTimeout('Zeal_c()',3000);
setTimeout('Zirou_All()',3900);
setTimeout('Zeal_d()',4000);
setTimeout('Zirou_All()',4900);
setTimeout('Zeal_e()',5000);
setTimeout('Zirou_All()',5900);
setTimeout('Zeal_f()',6000);
setTimeout('Zirou_All()',6900);
setTimeout('Zeal_g()',7000);
setTimeout('Zirou_All()',7900);
setTimeout('Zeal_h()',8000);
setTimeout('Zirou_All()',8900);
}

</script>

</head>
<body>

<input type="button" id="but_A" value="start all" onFocus="if(this.blur)this.blur();" onclick="All_cycle();">
<input type="button" id="but_B" value="clear all" onFocus="if(this.blur)this.blur();" onclick="Zirou_All();">


<input type="button" id="but_start_a" value="view first" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_a();">
<input type="button" id="but_start_b" value="view second" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_b();">
<input type="button" id="but_start_c" value="view third" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_c();">
<input type="button" id="but_start_d" value="view fourth" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_d();">
<input type="button" id="but_start_e" value="view fifth" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_e();">
<input type="button" id="but_start_f" value="view sixth" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_f();">
<input type="button" id="but_start_g" value="view seventh" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_g();">
<input type="button" id="but_start_h" value="view eight" onFocus="if(this.blur)this.blur();" onclick="Zirou_All(); Zeal_h();">



<table id="table_A" frame="void">

<tr>

<td id="t_1" onClick="Change_col(1);"> 1
</td>
<td id="t_2" onClick="Change_col(2);"> 2
</td>
<td id="t_3" onClick="Change_col(3);"> 3
</td>
<td id="t_4" onClick="Change_col(4);"> 4
</td>
<td id="t_5" onClick="Change_col(5);"> 5
</td>

<td id="t_6" onClick="Change_col(6);"> 6
</td>
<td id="t_7" onClick="Change_col(7);"> 7
</td>
<td id="t_8" onClick="Change_col(8);"> 8
</td>
<td id="t_9" onClick="Change_col(9);"> 9
</td>
<td id="t_10" onClick="Change_col(10);"> 10
</td>

<td id="t_11" onClick="Change_col(11);"> 11
</td>
<td id="t_12" onClick="Change_col(12);"> 12
</td>
<td id="t_13" onClick="Change_col(13);"> 13
</td>
<td id="t_14" onClick="Change_col(14);"> 14
</td>
<td id="t_15" onClick="Change_col(15);"> 15
</td>

<td id="t_16" onClick="Change_col(16);"> 16
</td>
</tr>
<tr>
<td id="t_17" onClick="Change_col(17);"> 17
</td>
<td id="t_18" onClick="Change_col(18);"> 18
</td>
<td id="t_19" onClick="Change_col(19);"> 19
</td>

<td id="t_20" onClick="Change_col(20);"> 20
</td>
<td id="t_21" onClick="Change_col(21);"> 21
</td>
<td id="t_22" onClick="Change_col(22);"> 22
</td>
<td id="t_23" onClick="Change_col(23);"> 23
</td>
<td id="t_24" onClick="Change_col(24);"> 24
</td>

<td id="t_25" onClick="Change_col(25);"> 25
</td>
<td id="t_26" onClick="Change_col(26);"> 26
</td>
<td id="t_27" onClick="Change_col(27);"> 27
</td>
<td id="t_28" onClick="Change_col(28);"> 28
</td>
<td id="t_29" onClick="Change_col(29);"> 29
</td>

<td id="t_30" onClick="Change_col(30);"> 30
</td>
<td id="t_31" onClick="Change_col(31);"> 31
</td>
<td id="t_32" onClick="Change_col(32);"> 32
</td>
</tr>
<tr>
<td id="t_33" onClick="Change_col(33);"> 33
</td>

<td id="t_34" onClick="Change_col(34);"> 34
</td>
<td id="t_35" onClick="Change_col(35);"> 35
</td>
<td id="t_36" onClick="Change_col(36);"> 36
</td>
<td id="t_37" onClick="Change_col(37);"> 37
</td>
<td id="t_38" onClick="Change_col(38);"> 38
</td>

<td id="t_39" onClick="Change_col(39);"> 39
</td>
<td id="t_40" onClick="Change_col(40);"> 40
</td>
<td id="t_41" onClick="Change_col(41);"> 41
</td>
<td id="t_42" onClick="Change_col(42);"> 42
</td>
<td id="t_43" onClick="Change_col(43);"> 43
</td>

<td id="t_44" onClick="Change_col(44);"> 44
</td>
<td id="t_45" onClick="Change_col(45);"> 45
</td>
<td id="t_46" onClick="Change_col(46);"> 46
</td>
<td id="t_47" onClick="Change_col(47);"> 47
</td>
<td id="t_48" onClick="Change_col(48);"> 48
</td>

</tr>
<tr>
<td id="t_49" onClick="Change_col(49);"> 49
</td>
<td id="t_50" onClick="Change_col(50);"> 50
</td>
<td id="t_51" onClick="Change_col(51);"> 51
</td>
<td id="t_52" onClick="Change_col(52);"> 52
</td>

<td id="t_53" onClick="Change_col(53);"> 53
</td>
<td id="t_54" onClick="Change_col(54);"> 54
</td>
<td id="t_55" onClick="Change_col(55);"> 55
</td>
<td id="t_56" onClick="Change_col(56);"> 56
</td>
<td id="t_57" onClick="Change_col(57);"> 57
</td>

<td id="t_58" onClick="Change_col(58);"> 58
</td>
<td id="t_59" onClick="Change_col(59);"> 59
</td>
<td id="t_60" onClick="Change_col(60);"> 60
</td>
<td id="t_61" onClick="Change_col(61);"> 61
</td>
<td id="t_62" onClick="Change_col(62);"> 62
</td>

<td id="t_63" onClick="Change_col(63);"> 63
</td>
<td id="t_64" onClick="Change_col(64);"> 64
</td>
</tr>
<tr>
<td id="t_65" onClick="Change_col(65);"> 65
</td>
<td id="t_66" onClick="Change_col(66);"> 66
</td>

<td id="t_67" onClick="Change_col(67);"> 67
</td>
<td id="t_68" onClick="Change_col(68);"> 68
</td>
<td id="t_69" onClick="Change_col(69);"> 69
</td>
<td id="t_70" onClick="Change_col(70);"> 70
</td>
<td id="t_71" onClick="Change_col(71);"> 71
</td>

<td id="t_72" onClick="Change_col(72);"> 72
</td>
<td id="t_73" onClick="Change_col(73);"> 73
</td>
<td id="t_74" onClick="Change_col(74);"> 74
</td>
<td id="t_75" onClick="Change_col(75);"> 75
</td>
<td id="t_76" onClick="Change_col(76);"> 76
</td>

<td id="t_77" onClick="Change_col(77);"> 77
</td>
<td id="t_78" onClick="Change_col(78);"> 78
</td>
<td id="t_79" onClick="Change_col(79);"> 79
</td>
<td id="t_80" onClick="Change_col(80);"> 80
</td>
</tr>

<tr>
<td id="t_81" onClick="Change_col(81);"> 81
</td>
<td id="t_82" onClick="Change_col(82);"> 82
</td>
<td id="t_83" onClick="Change_col(83);"> 83
</td>
<td id="t_84" onClick="Change_col(84);"> 84
</td>

<td id="t_85" onClick="Change_col(85);"> 85
</td>
<td id="t_86" onClick="Change_col(86);"> 86
</td>
<td id="t_87" onClick="Change_col(87);"> 87
</td>
<td id="t_88" onClick="Change_col(88);"> 88
</td>
<td id="t_89" onClick="Change_col(89);"> 89
</td>

<td id="t_90" onClick="Change_col(90);"> 90
</td>
<td id="t_91" onClick="Change_col(91);"> 91
</td>
<td id="t_92" onClick="Change_col(92);"> 92
</td>
<td id="t_93" onClick="Change_col(93);"> 93
</td>
<td id="t_94" onClick="Change_col(94);"> 94
</td>

<td id="t_95" onClick="Change_col(95);"> 95
</td>
<td id="t_96" onClick="Change_col(96);"> 96
</td>
</tr>
<tr>
<td id="t_97" onClick="Change_col(97);"> 97
</td>
<td id="t_98" onClick="Change_col(98);"> 98
</td>

<td id="t_99" onClick="Change_col(99);"> 99
</td>
<td id="t_100" onClick="Change_col(100);"> 100
</td>
<td id="t_101" onClick="Change_col(101);"> 101
</td>
<td id="t_102" onClick="Change_col(102);"> 102
</td>
<td id="t_103" onClick="Change_col(103);"> 103
</td>

<td id="t_104" onClick="Change_col(104);"> 104
</td>
<td id="t_105" onClick="Change_col(105);"> 105
</td>
<td id="t_106" onClick="Change_col(106);"> 106
</td>
<td id="t_107" onClick="Change_col(107);"> 107
</td>
<td id="t_108" onClick="Change_col(108);"> 108
</td>

<td id="t_109" onClick="Change_col(109);"> 109
</td>
<td id="t_110" onClick="Change_col(110);"> 110
</td>
<td id="t_111" onClick="Change_col(111);"> 111
</td>
<td id="t_112" onClick="Change_col(112);"> 112
</td>
</tr>

<tr>
<td id="t_113" onClick="bgColor = '#66cc99'"> 113
</td>
<td id="t_114" onClick="bgColor = '#66cc99'"> 114
</td>
<td id="t_115" onClick="bgColor = '#66cc99'"> 115
</td>
<td id="t_116" onClick="bgColor = '#66cc99'"> 116
</td>

<td id="t_117" onClick="bgColor = '#66cc99'"> 117
</td>
<td id="t_118" onClick="bgColor = '#66cc99'"> 118
</td>
<td id="t_119" onClick="bgColor = '#66cc99'"> 119
</td>
<td id="t_120" onClick="bgColor = '#66cc99'"> 120
</td>
<td id="t_121" onClick="bgColor = '#66cc99'"> 121
</td>

<td id="t_122" onClick="bgColor = '#66cc99'"> 122
</td>
<td id="t_123" onClick="bgColor = '#66cc99'"> 123
</td>
<td id="t_124" onClick="bgColor = '#66cc99'"> 124
</td>
<td id="t_125" onClick="bgColor = '#66cc99'"> 125
</td>
<td id="t_126" onClick="bgColor = '#66cc99'"> 126
</td>

<td id="t_127" onClick="bgColor = '#66cc99'"> 127
</td>
<td id="t_128" onClick="bgColor = '#66cc99'"> 128
</td>
</tr>
<tr>
<td id="t_129" onClick="bgColor = '#66cc99'"> 129
</td>
<td id="t_130" onClick="bgColor = '#66cc99'"> 130
</td>

<td id="t_131" onClick="bgColor = '#66cc99'"> 131
</td>
<td id="t_132" onClick="bgColor = '#66cc99'"> 132
</td>
<td id="t_133" onClick="bgColor = '#66cc99'"> 133
</td>
<td id="t_134" onClick="bgColor = '#66cc99'"> 134
</td>
<td id="t_135" onClick="bgColor = '#66cc99'"> 135
</td>

<td id="t_136" onClick="bgColor = '#66cc99'"> 136
</td>
<td id="t_137" onClick="bgColor = '#66cc99'"> 137
</td>
<td id="t_138" onClick="bgColor = '#66cc99'"> 138
</td>
<td id="t_139" onClick="bgColor = '#66cc99'"> 139
</td>
<td id="t_140" onClick="bgColor = '#66cc99'"> 140
</td>

<td id="t_141" onClick="bgColor = '#66cc99'"> 141
</td>
<td id="t_142" onClick="bgColor = '#66cc99'"> 142
</td>
<td id="t_143" onClick="bgColor = '#66cc99'"> 143
</td>
<td id="t_144" onClick="bgColor = '#66cc99'"> 144
</td>
</tr>

<tr>
<td id="t_145" onClick="bgColor = '#66cc99'"> 145
</td>
<td id="t_146" onClick="bgColor = '#66cc99'"> 146
</td>
<td id="t_147" onClick="bgColor = '#66cc99'"> 147
</td>
<td id="t_148" onClick="bgColor = '#66cc99'"> 148
</td>

<td id="t_149" onClick="bgColor = '#66cc99'"> 149
</td>
<td id="t_150" onClick="bgColor = '#66cc99'"> 150
</td>
<td id="t_151" onClick="bgColor = '#66cc99'"> 151
</td>
<td id="t_152" onClick="bgColor = '#66cc99'"> 152
</td>
<td id="t_153" onClick="bgColor = '#66cc99'"> 153
</td>

<td id="t_154" onClick="bgColor = '#66cc99'"> 154
</td>
<td id="t_155" onClick="bgColor = '#66cc99'"> 155
</td>
<td id="t_156" onClick="bgColor = '#66cc99'"> 156
</td>
<td id="t_157" onClick="bgColor = '#66cc99'"> 157
</td>
<td id="t_158" onClick="bgColor = '#66cc99'"> 158
</td>

<td id="t_159" onClick="bgColor = '#66cc99'"> 159
</td>
<td id="t_160" onClick="bgColor = '#66cc99'"> 160
</td>
</tr>
<tr>
<td id="t_161" onClick="bgColor = '#66cc99'"> 161
</td>
<td id="t_162" onClick="bgColor = '#66cc99'"> 162
</td>

<td id="t_163" onClick="bgColor = '#66cc99'"> 163
</td>
<td id="t_164" onClick="bgColor = '#66cc99'"> 164
</td>
<td id="t_165" onClick="bgColor = '#66cc99'"> 165
</td>
<td id="t_166" onClick="bgColor = '#66cc99'"> 166
</td>
<td id="t_167" onClick="bgColor = '#66cc99'"> 167
</td>

<td id="t_168" onClick="bgColor = '#66cc99'"> 168
</td>
<td id="t_169" onClick="bgColor = '#66cc99'"> 169
</td>
<td id="t_170" onClick="bgColor = '#66cc99'"> 170
</td>
<td id="t_171" onClick="bgColor = '#66cc99'"> 171
</td>
<td id="t_172" onClick="bgColor = '#66cc99'"> 172
</td>

<td id="t_173" onClick="bgColor = '#66cc99'"> 173
</td>
<td id="t_174" onClick="bgColor = '#66cc99'"> 174
</td>
<td id="t_175" onClick="bgColor = '#66cc99'"> 175
</td>
<td id="t_176" onClick="bgColor = '#66cc99'"> 176
</td>
</tr>

<tr>
<td id="t_177" onClick="bgColor = '#66cc99'"> 177
</td>
<td id="t_178" onClick="bgColor = '#66cc99'"> 178
</td>
<td id="t_179" onClick="bgColor = '#66cc99'"> 179
</td>
<td id="t_180" onClick="bgColor = '#66cc99'"> 180
</td>

<td id="t_181" onClick="bgColor = '#66cc99'"> 181
</td>
<td id="t_182" onClick="bgColor = '#66cc99'"> 182
</td>
<td id="t_183" onClick="bgColor = '#66cc99'"> 183
</td>
<td id="t_184" onClick="bgColor = '#66cc99'"> 184
</td>
<td id="t_185" onClick="bgColor = '#66cc99'"> 185
</td>

<td id="t_186" onClick="bgColor = '#66cc99'"> 186
</td>
<td id="t_187" onClick="bgColor = '#66cc99'"> 187
</td>
<td id="t_188" onClick="bgColor = '#66cc99'"> 188
</td>
<td id="t_189" onClick="bgColor = '#66cc99'"> 189
</td>
<td id="t_190" onClick="bgColor = '#66cc99'"> 190
</td>

<td id="t_191" onClick="bgColor = '#66cc99'"> 191
</td>
<td id="t_192" onClick="bgColor = '#66cc99'"> 192
</td>
</tr>
<tr>
<td id="t_193" onClick="bgColor = '#66cc99'"> 193
</td>
<td id="t_194" onClick="bgColor = '#66cc99'"> 194
</td>

<td id="t_195" onClick="bgColor = '#66cc99'"> 195
</td>
<td id="t_196" onClick="bgColor = '#66cc99'"> 196
</td>
<td id="t_197" onClick="bgColor = '#66cc99'"> 197
</td>
<td id="t_198" onClick="bgColor = '#66cc99'"> 198
</td>
<td id="t_199" onClick="bgColor = '#66cc99'"> 199
</td>

<td id="t_200" onClick="bgColor = '#66cc99'"> 200
</td>
<td id="t_201" onClick="bgColor = '#66cc99'"> 201
</td>
<td id="t_202" onClick="bgColor = '#66cc99'"> 202
</td>
<td id="t_203" onClick="bgColor = '#66cc99'"> 203
</td>
<td id="t_204" onClick="bgColor = '#66cc99'"> 204
</td>

<td id="t_205" onClick="bgColor = '#66cc99'"> 205
</td>
<td id="t_206" onClick="bgColor = '#66cc99'"> 206
</td>
<td id="t_207" onClick="bgColor = '#66cc99'"> 207
</td>
<td id="t_208" onClick="bgColor = '#66cc99'"> 208
</td>
</tr>

<tr>
<td id="t_209" onClick="bgColor = '#66cc99'"> 209
</td>
<td id="t_210" onClick="bgColor = '#66cc99'"> 210
</td>
<td id="t_211" onClick="bgColor = '#66cc99'"> 211
</td>
<td id="t_212" onClick="bgColor = '#66cc99'"> 212
</td>

<td id="t_213" onClick="bgColor = '#66cc99'"> 213
</td>
<td id="t_214" onClick="bgColor = '#66cc99'"> 214
</td>
<td id="t_215" onClick="bgColor = '#66cc99'"> 215
</td>
<td id="t_216" onClick="bgColor = '#66cc99'"> 216
</td>
<td id="t_217" onClick="bgColor = '#66cc99'"> 217
</td>

<td id="t_218" onClick="bgColor = '#66cc99'"> 218
</td>
<td id="t_219" onClick="bgColor = '#66cc99'"> 219
</td>
<td id="t_220" onClick="bgColor = '#66cc99'"> 220
</td>
<td id="t_221" onClick="bgColor = '#66cc99'"> 221
</td>
<td id="t_222" onClick="bgColor = '#66cc99'"> 222
</td>

<td id="t_223" onClick="bgColor = '#66cc99'"> 223
</td>
<td id="t_224" onClick="bgColor = '#66cc99'"> 224
</td>
</tr>

</table>

</BODY>
</HTML>

… както казах, кода е предназначен за начинаещи, които искат да се запознаят с част от силата на вложените цикли, тяхното взаимодействие с масиви, както и начално запознаване със CSS. Ако искате да разберете как точно работи един вложен цикъл, трябва да отворите сорса и с ‘Ctrl’+’F’ да напишете името на функцията с въпросния цикъл. Проследете към кой бутон е вързана, след което се върнете в страницата и натиснете съответния бутон. Когато правих това упражнение тогава – експериментирах доста и това ми отвори очите за някои неща около тях … Сега е ваш ред … Успех ! Winking

съвет: И не се шашкайте от многото писане. Хванете си само една функция от всички и забравете за другия код. Можете да експериментирате и като променяте цветовете в отделните масиви …

п.п. Отговарям на въпроси свързани с упражнението.