Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<style>/*к ÑтилÑм добавлен (оÑтальные - из примера 1) клаÑÑ Ð·Ð°ÐºÑ€Ð°ÑˆÐµÐ½Ð½Ð¾Ð¹ Ñчейки. Пока что он один (1 цвет)*/ .f{background-color:#bbb; border-left-color:#bbb; border-top-color:#bbb;} .l0,.l1,.l2,.l3 {border:1px solid white; font-size:10px; width:14px; height:14px;} .l1{border-right-color:black} /*клаÑÑÑ‹ Ñчеек таблицы*/ .l2{border-bottom-color:black;} .l3{border-bottom-color:black;border-right-color:black} </style><script>d=document; onload=genLab=function(){ nx=((d.all?d.body.clientWidth:innerWidth)-30)/14; ny=((d.all?d.body.clientHeight:innerHeight)-80)/14; aL=[];for(i=0;i<ny;i++)aL[i]=[]; //--образ лабиринта s='<table cellspacing=0 cellpadding=0' +'style="border:1px solid black;' +'" id=t1>'; for(i=0;i<ny;i++){s+='<tr>'; for(j=0;j<nx;j++){ s+='<td><div class=l'+(aL[i][j]=Math.floor((Math.random() *1.5)+0.96))+'> </div></td>'; //важные конÑтанты чаÑтоты вÑтречаемоÑти Ñтенок }s+='</tr>'; }s+='</table>'; d.getElementById('d1').innerHTML=(d.all?'' :'<style>.l0,.l1,.l2,.l3{width:12px;height:12px;}</style>') +s; // далее работаем Ñ Ð·Ð°ÐºÑ€Ð°Ñкой облаÑти ta1=d.getElementById('t1'); sO=[];iSO=0; //Ñтек обхода aM=[];for(i=0;i<ny;i++)aM[i]=[];//образ пройденных клеток i=0;j=0; //точка входа (начало закраÑки) j2=i2=0; m=0;k=0; //Ñлужебные переменные projden(i,j); //пометка 1-й клетки setInterval(hod2,30); //периодичеÑки делаем группу ходов, // в данном Ñлучае, на 7 клеток, чтобы видеть процеÑÑ } hod=function(n){ i2=i+(n==3?-1:(n==1?1:0)); j2=j+(n==0?-1:(n==2?1:0)); //попытка хода if(i2<0||i2>=ny||j2<0||j2>=nx)return -1; //край if(n==0&&aL[i2][j2]%2==1 || n==1&&aL[i][j]>1 || n==2&&aL[i][j]%2==1 || n==3&&aL[i2][j2]>1) return -1; //Ñтенка if(aM[i2][j2]&&aM[i2][j2]==1)return -1;//пройденное поле return 0; //проход разрешён } projden=function(i,j){ //помечаем клетку визуально и в aM tc=ta1.firstChild.childNodes[i].childNodes[j].firstChild; if(tc.className=='l1'||tc.className=='l0') tc.style.borderBottomColor='#bbb'; if(tc.className=='l2'||tc.className=='l0') tc.style.borderRightColor='#bbb'; ta1.firstChild.childNodes[i].childNodes[j] .firstChild.className+=' f'; //делаем ÑоÑтавной клаÑÑ aM[i][j]=1; //пометка, что поле пройдено m++; // Ñчёт до 7 Ð´Ð»Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð¾Ð³Ð¾ Ñффекта } hod2=function(){m=0; //Ð´Ð»Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð¾Ñти, Ñчёт до 7 for(k=k;k<4&&m<7;k++){ //древовидный обход облаÑти if(!hod(k)){i=i2;j=j2; //ход вперёд projden(i,j); //пометка клетки sO[iSO++]=k; //пометка Ñтека k=-1; //(цикл Ñделает далее k==0) }else{while(iSO>0&&k==3){k=sO[--iSO]; //возврат i-=(k==3?-1:(k==1?1:0)); j-=(k==0?-1:(k==2?1:0)); //**внимание, здеÑÑŒ k обновлÑетÑÑ Ð¸Ð· Ñтека }} } }</script><div id=d1></div>