Javascript 如何制作彩色瓷砖的道路_Javascript_Arrays_Html5 Canvas

Javascript 如何制作彩色瓷砖的道路

javascript arrays html5-canvas

Javascript 如何制作彩色瓷砖的道路,javascript,arrays,html5-canvas,Javascript,Arrays,Html5 Canvas,我如何实现这一点，以创建角色将跟随的彩色瓷砖道路（角色需要使用与角色相同的颜色归档一条道路，该颜色将是立方体。）我现在有这个（来自其他帖子）：正文{背景色：象牙色；填充：10px；} #画布{边框：1px纯红；} var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var cw=画布宽度； var ch=画布高度； var colwidth=cw/20； var rowheight=

我如何实现这一点，以创建角色将跟随的彩色瓷砖道路（角色需要使用与角色相同的颜色归档一条道路，该颜色将是立方体。）我现在有这个（来自其他帖子）：


正文{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var colwidth=cw/20；
var rowheight=ch/20；
对于（变量y=0；y
正文{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var n=20；
var colwidth=cw/n；
var rowheight=ch/n；
var颜色=[]；
对于（var y=0；y）请更具体一点。您尝试过什么？什么对您不起作用？您的目标是什么？
<html>
<head>
<style>
body{background-color:ivory;padding:10px;}
#canvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">

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

var cw=canvas.width;
var ch=canvas.height;

var n = 20;

var colwidth=cw/n;
var rowheight=ch/n;

var colors = [];
for(var y=0;y<n;y++)
{
  colors[y] = [];
  for(var x=0;x<n;x++)
  {
    colors[y][x] = randomColor();
  }
}

var road_color = randomColor();
var x = n/2;
var y = 0;
while(y < n)
{
  colors[y][x] = road_color;
  var path = Math.floor(Math.random()*3);
  switch(path)
  {
    case 0: //try left
      if(x > 0 && colors[y][x-1] != road_color) x--; break;
    case 1: //try right
      if(x < n-1 && colors[y][x+1] != road_color) x++; break;
    case 2: //down
      y++; break;
  }
}

for(var y=0;y<n;y++)
{
  for(var x=0;x<n;x++)
  {
    ctx.fillStyle=colors[y][x];
    ctx.fillRect  (x*colwidth,y*rowheight,colwidth,rowheight);
  }
}
for(var y=0;y<n;y++)
{
  for(var x=0;x<n;x++)
  {
    ctx.strokeRect(x*colwidth,y*rowheight,colwidth,rowheight);
  }
}

function randomColor(){return('#'+Math.floor(Math.random()*0xFFFFFF).toString(16));}
</script>
</body>
</html>