Web Editor by 101Computing.net

101

2D Level Generator HTML + CSS + JavaScript

HTML

CSS

JavaScript

//Level Generator - www.101computing.net
var rows = 8;
var cols = 18;
var grid = [
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0],
  [0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
  [1,1,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

function displayLevel() {
  var stage = document.getElementById("stage");
  for (var row = 0; row < rows; row++) {
    for (var col = 0; col < cols; col++) {
      if (grid[row][col]==2) {
          var coin = document.createElement('div');
          coin.className = "coin";
          coin.style.top = row*50 + 'px';
          coin.style.left = col*50 + 'px';
          stage.appendChild(coin);
      } else if (grid[row][col]==1) {
          var tile = document.createElement('div');
          tile.className = "tile";
          tile.style.top = row*50 + 'px';
          tile.style.left = col*50 + 'px';
          //Merge tiles which are next to each other
          if (col<cols-1) { if (grid[row][col+1]==1) {tile.style.borderBottomRightRadius='0px';tile.style.borderTopRightRadius='0px';}}
          if (col>0) { if (grid[row][col-1]==1) {tile.style.borderBottomLeftRadius='0px';tile.style.borderTopLeftRadius='0px';}}
          if (row<rows-1) { if (grid[row+1][col]==1) {tile.style.borderBottomLeftRadius='0px';tile.style.borderBottomRightRadius='0px';}}
          if (row>0) { if (grid[row-1][col]==1) {tile.style.borderTopLeftRadius='0px';tile.style.borderTopRightRadius='0px';}}
           //Add tile to the stage
           stage.appendChild(tile);
       }  
     }
   } 
}

displayLevel();

Preview live webpage

Console logs, warnings and errors