matrix spiralförmig durchsuchen (javascript) von ziegenmelker, 19.05.2005 17:42

matrix spiralförmig durchsuchen (javascript)

ziegenmelker 19.05.2005 17:42

programmiertechnik

Hallo,

das Thema hat mich ein wenig zum Spielen angeregt und so habe ich das Ganze einmal in JavaScript mit ein paar Animationen umgesetzt. Im IE wird es (ohne JavaScript Fehlermeldung) nicht angezeigt. Der ganze Seineninhalt wird dynamisch erzeugt und die Größe der Matrix kann beliebig veränder werden. Ich habe jedoch nicht mit besonders kleinen bzw. unsinnigen Werten getestet, da mögen noch Fehler auftauchen. Wer Spass daran hat, kann ja mal ein bisschen damit rumspielen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
  <head>  
    <title>Spirale</title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
<style type="text/css">

  html,body{padding:0;margin:0;height:100%;text-align:center;font-size:101%;}  
  table {font-size:0.7em;margin:0.5em;float:left;border:1px solid grey;background-color:#eee;border-collapse:collapse}  
  td {border:1px solid grey;margin:0;padding:0;width:26px;height:26px;white-space:nowrap;}  
  div {float:left;margin:0.3em auto;}  
  ul {margin:0;padding:0;text-align:center;}  
  li {list-style-type:none;margin:0.5em;}  
  button {width:15em;}

</style>  
<script type="text/javascript">  
<!--

function init() {  
  xsize = 15;  
  ysize = 20;  
  dir = 1 /* 1=rechts, 2=runter, 3=links, 4=rauf */  
  xstart = Math.floor((xsize+1)/2);  
  ystart = Math.floor((ysize+1)/2);  
  MtxPt = new pos(xstart, ystart);  
  maxI = Math.max(xsize, ysize);  
  maxX = xstart;  
  minX = xstart;  
  maxY = ystart;  
  minY = ystart;  
  stepSize = 1;  
  spiralPart = 1; /* Eine Umdrehung besteht aus 4 Teilen, wobei jeweils Teil 1 und 2 bzw. 3 und 4 dieselbe Schrittweite haben */  
}  
  
function createObjects() {  
  createTable();  
  showMatrix();  
  createUl();  
  createButtons();  
}  
  
function pos(x,y) {  
  this.x = x;  
  this.y = y;  
}  
  
function colorSpiral() {  
  init();  
  setPos();  
  setTimeout('drawColorLine()',100);  
}  
  
function drawColorLine() {  
  if(maxX < xsize || maxY < ysize || minX > 1 || minY > 1 || dir==3 || dir==1) { /* wir sind noch auf dem Spielfeld */  
    for(i=1;i<=stepSize;i++) { /* Linie einfaerben */  
      getPos(dir);  
      setPos();  
    }  
    if(spiralPart==2 || spiralPart==4) {  
      stepSize++;  
    }  
    spiralPart = spiralPart % 4 + 1; /* Abbildung von {1,2,3,4} => {2,3,4,1} */  
    dir = dir % 4 + 1; /* Richtungsaenderung */  
    setTimeout('drawColorLine()',100);  
  }  
}  
  
function symbolSpiral() {  
  init();  
  arrowRight = "&#x2192;"; arrowDown = "&#x2193;"; arrowLeft = "&#x2190;"; arrowUp = "&#x2191;";  
  arrowDownRight = "&#x2198;"; arrowDownLeft = "&#x2199;"; arrowUpLeft = "&#x2196;"; arrowUpRight = "&#x2197;";  
  setSymbolPos("&#0183;");  
  setTimeout('drawSymbolLine()',100);  
}  
  
function drawSymbolLine() {  
  if(maxX < xsize || maxY < ysize || minX > 1 || minY > 1 || dir==3 || dir==1) { /* wir sind noch auf dem Spielfeld */  
    switch (dir) {  
      case 1:  
        symbolNorm = arrowRight;  
        symbolCorner = arrowDownRight;  
        break;  
      case 2:  
        symbolNorm = arrowDown;  
        symbolCorner = arrowDownLeft;  
        break;  
      case 3:  
        symbolNorm = arrowLeft;  
        symbolCorner = arrowUpLeft;  
        break;  
      case 4:  
        symbolNorm = arrowUp;  
        symbolCorner = arrowUpRight;  
        break;  
    }  
    for(i=1;i<stepSize;i++) {  
  
      getPos(dir);  
      setSymbolPos(symbolNorm);  
    }  
    getPos(dir);  
    setSymbolPos(symbolCorner);  
     if(spiralPart==2 || spiralPart==4) {  
      stepSize++;  
    }  
    spiralPart = spiralPart % 4 + 1; /* Abbildung von {1,2,3,4} => {2,3,4,1} */  
    dir = dir % 4 + 1; /* Richtungsänderung */  
    setTimeout('drawSymbolLine()',100);  
  }  
}  
  
function start() {  
  init();  
  colorSpiral();  
}  
  
function getPos(dir) {  
  if(dir==1) {MtxPt.x++;}  
  if(dir==2) {MtxPt.y++;}  
  if(dir==3) {MtxPt.x--;}  
  if(dir==4) {MtxPt.y--;}  
}  
  
function setPos() {  
  if(MtxPt.x > maxX) {maxX = MtxPt.x;}  
  if(MtxPt.x < minX) {minX = MtxPt.x;}  
  if(MtxPt.y > maxY) {maxY = MtxPt.y;}  
  if(MtxPt.y < minY) {minY = MtxPt.y;}  
  myTD = document.getElementById('td:'+MtxPt.x+'.'+MtxPt.y);  
  if(MtxPt.x > 0 && MtxPt.x <= xsize & MtxPt.y > 0 && MtxPt.y <= ysize) {  
    myTD.style.backgroundColor = "green";  
  } else {  
    myTD.style.backgroundColor = "red";  
  }  
}  
  
function setSymbolPos(symbol) {  
  if(MtxPt.x > maxX) {maxX = MtxPt.x;}  
  if(MtxPt.x < minX) {minX = MtxPt.x;}  
  if(MtxPt.y > maxY) {maxY = MtxPt.y;}  
  if(MtxPt.y < minY) {minY = MtxPt.y;}  
  myTD = document.getElementById('td:'+MtxPt.x+'.'+MtxPt.y);  
  myTD.innerHTML = symbol;  
}  
  
function reset() {  
  knoten = document.getElementsByTagName('div')[0];  
  document.getElementsByTagName('body')[0].removeChild(knoten);  
  document.getElementsByTagName('body')[0].removeChild(document.getElementsByTagName('table')[0]);  
  init();  
  createObjects();  
}  
  
function createTable() {  
  table = document.createElement('table');  
  xborder = Math.floor((maxI-xsize+2)/2);  
  yborder = Math.floor((maxI-ysize)+2/2);  
  for(y=-(yborder-1);y<=ysize+yborder;y++) {  
    tr = document.createElement('tr');  
    for(x=-(xborder-1);x<=(xsize+xborder);x++) {  
      td = document.createElement('td');  
      td.setAttribute('style','');  
      if(x>0 && y>0 && x<=xsize && y<=ysize) { td.style.nodeValue += "background-color:#000;color:#fff;";}  
      text = document.createTextNode(x + "|" + y);  
      td.appendChild(text);  
      td.setAttribute('id',"td:" + x + "." + y);  
      tr.appendChild(td);  
    }  
    table.appendChild(tr);  
  }  
  document.body.appendChild(table);  
}  
  
function createButtons() {  
  li = document.createElement('li');  
  button = document.createElement('button');  
  button.setAttribute('type','button');  
  button.innerHTML = "Wegstrecke einf&auml;rben";  
  button.setAttribute('onclick','colorSpiral();');  
  li.appendChild(button);  
  document.getElementsByTagName('ul')[0].appendChild(li);  
  li = document.createElement('li');  
  button = document.createElement('button');  
  button.setAttribute('type','button');  
  button.innerHTML = "Wegstrecke markieren";  
  button.setAttribute('onclick','symbolSpiral();');  
  li.appendChild(button);  
  document.getElementsByTagName('ul')[0].appendChild(li);  
  li = document.createElement('li');  
  button = document.createElement('button');  
  button.setAttribute('type','button');  
  button.innerHTML = "Reset";  
  button.setAttribute('onclick','reset();');  
  li.appendChild(button);  
  document.getElementsByTagName('ul')[0].appendChild(li);  
}  
  
function showMatrix() {  
  for(i=1;i<=xsize;i++) {  
    for(j=1;j<=ysize;j++) {  
      document.getElementById('td:'+i+'.'+j).style.backgroundColor = "lightgrey";  
    }  
  }  
}  
  
function createUl () {  
  navcontainer = document.createElement('div');  
  ul = document.createElement('ul')  
  navcontainer.appendChild(ul);  
  document.body.appendChild(navcontainer);  
}

-->  
</script>  
</head>  
<body onload="init();createObjects();">  
</body>  
</html>

cu,
ziegenmelker

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

ziegenmelker: matrix spiralförmig durchsuchen (javascript)

Beitrag lesen

matrix spiralförmig durchsuchen (javascript)

matrix spiralförmig durchsuchen

korektur

matrix spiralförmig durchsuchen (javascript)