Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Hey i would really like to expand the playable Grid could you tell me how?

try using this source, it's a little better to understand and has configurable width and height at the top. Unfortunately it's not 551 byte anymore 8p

<canvas id="c" width="532" height="500"><script>
width=58;
height=30;
r=Math.random;
k=e=>{
 if(e){g[b][a]=W;
 e=e.key;
 x=a;
 y=b;
 e=='w'?y--:e=='s'?y++:e=='a'?x--:e=='d'?x++:s;
 if(g[y][x]==R)location.reload();
 if(g[y][x]==W)b=y,a=x}
 g[b][a]='#0f0';
 for(y=b-1; y<b+2; y++){
  for(x=a-1; x<a+2; x++){
   c.fillStyle=g[y][x];
   c.fillRect(x*9,y*9,9,9)
  }}
};
W='#888';
R='#f00';
d=a=b=1;
c=c.getContext('2d');
c.canvas.width=(width+2)*9;
c.canvas.height=(height+2)*9;
g=[];
for(y=0; y<height+2; y++){g[y]=Array(width).fill('#000')};
for(y=1; y<height; y+=2){
 for(x=1; x<width; x+=2){
  g[y][x]=W;
  if(r()>.5&&y<height-2||x>width-3)
  {
   g[y+1][x]=W;
  }
  else
  {
   if(x<width-3)
    g[y][x+1]=W;
  }
  if(y>1&&r()>.9&&d)d=0,g[y][x]=R;
 }
}
g[height-1][width-2]='#000';
onkeypress=k;
k();
</script></canvas>

Thanks im just getting into java script and this code is helping me understand the canvas funktion.

If you want to understand canvas, maybe it's better to start with something not obfuscated. Something like: https://www.w3schools.com/html/html5_canvas.asp it's quite a good start and has simple examples.

Thanks but i already checked that site out and it doesn't really work for me.