Question

我如何实现这一点来制作一个角色所遵循的彩色瓷砖之路（角色需要使用与多维数据集相同的颜色来提交一个rode。）我现在有这个（来自其他帖子）：

    <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 colwidth=cw/20;
        var rowheight=ch/20;

        for(var y=0;y<20;y++){

        for(var x=0;x<20;x++){
      
        ctx.fillStyle=randomColor();
        ctx.fillRect(x*colwidth,y*rowheight,colwidth,rowheight);
        ctx.strokeRect(x*colwidth,y*rowheight,colwidth,rowheight);
         }}

        function randomColor(){ 
        return('#'+Math.floor(Math.random()*12345678).toString(16));
        }
    </script>

</body></html>

Answer 1

<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>

无法确切地说明你的目标......我认为＆＃34; road＆＃34;是一个糟糕的翻译＆＃34;路径＆＃34;？这只会创建一个＆＃34;随机＆＃34;沿着随机生成的彩色瓷砖的纯色路径。（另外，我将12345678更改为0xFFFFFF以提供全部随机颜色，并在绘制所有填充以获得一致的线宽后触发行。）

如何制作彩色瓷砖之路

1 个答案: