programmering:maze1-js-code

<!DOCTYPE html>
<HTML>
<HEAD> <meta charset="utf-8"</HEAD>
<BODY>
<canvas id="screen" style="border:0px solid #000000;" width="400" height="400">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

  function rand(start,end) {
    return start+Math.round((Math.random()*(end-start)));
  }

  var canvas=document.getElementById("screen");
  var ctx=canvas.getContext("2d");
  var width=canvas.width;
  var height=canvas.height;

function drawOne(size) {
  ctx.beginPath();
  ctx.arc(centerX,centerY,radius,0,Math.PI*2,true);
  ctx.stroke();
  for (var i=0; i<24; i++) {
	  var angle=(2*Math.PI/24)*i;
	  var x=centerX+Math.cos(angle)*(radius-size);
	  var y=centerY+Math.sin(angle)*(radius-size);
          ctx.beginPath();
	  ctx.arc(x,y,size,0,Math.PI*2,true);
	  ctx.stroke();
  }
}

function drawBorder() {
  ctx.clearRect(0,0,width,height);
  ctx.fillStyle="#000000";
  ctx.fillRect(0,0,10,399);
  ctx.fillRect(389,0,10,399);
  ctx.fillRect(0,389,381,10);
  ctx.fillRect(19,0,379,10);
}

function drawWall(startpos,endpos,where,hole,direction) {
    if (direction=='h') { 
      ctx.beginPath();
      ctx.moveTo(startpos*10,where*10);
      ctx.lineTo(hole*10,where*10);
      ctx.moveTo((hole+1)*10,where*10);
      ctx.lineTo((endpos+1)*10,where*10);
      ctx.stroke();
    } 
    if (direction=='v') { 
      ctx.beginPath();
      ctx.moveTo(where*10,startpos*10);
      ctx.lineTo(where*10,hole*10);
      ctx.stroke();
      ctx.moveTo(where*10,(hole+1)*10);
      ctx.lineTo(where*10,(endpos+1)*10);
      ctx.stroke();
    }
}

function makeWalls(xstart,xend,ystart,yend,direction) {
  if (yend==ystart || xend==xstart) return;
  if (direction=='h') {
    var wall=rand(ystart+1,yend);
    var hole=rand(xstart,xend-1);
    drawWall(xstart,xend,wall,hole,'h');
    makeWalls(xstart,xend,ystart,wall-1,'v');
    makeWalls(xstart,xend,wall,yend,'v');
  }
  if (direction=='v') {
    var wall=rand(xstart+1,xend);
    var hole=rand(ystart,yend-1);
    drawWall(ystart,yend,wall,hole,'v');
    makeWalls(xstart,wall-1,ystart,yend,'h');
    makeWalls(wall,xend,ystart,yend,'h');
  }
}

drawBorder();
makeWalls(1,38,1,38,'v');

</script>

</BODY>
</HTML>