Как сделать дорожку из цветных плит

Как я могу реализовать это, чтобы сделать дорожку цветных плит, которые последует за персонажем (персонаж должен записать файл с тем же цветом символа, который будет кубом). я это сейчас (с другого поста):Как сделать дорожку из цветных плит

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

источник

2016-09-23 Calicol

Пожалуйста, будьте более конкретными. Что вы пробовали? Что не работает для вас? Какова ваша цель? –

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

не могу точно сказать, что вы собираетесь ... Я предполагаю, что «дорога» была плохой перевод «пути»? Это просто создает «случайный» путь сплошного цвета вниз по вашей случайно сгенерированной цветовой плитке. (Кроме того, я изменил 12345678 на 0xFFFFFF, чтобы получить полный спектр случайных цветов, и погладил строки после, рисуя все заливки для постоянного веса линии.)

источник

2016-09-23 04:22:35 Phildo

Как сделать дорожку из цветных плит

ответ

Смежные вопросы