body{
  overflow: hidden;
}

svg{
  position: absolute;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.3em;
  width: 100%;
  height: 100%;
}
var _w = 10,
    _h = 10,
    _sw = 100,
    _sh = 100,
    _bx = 1,
    _border = 20,
    s,
    i, j, k,
    _x = _bx + (_border / 2), 
    _y = (_sh * (_h - 1)) + _bx + (_border / 2),
    rect,
    fill,
    board;

svgWidth = _w * _sw + (_bx * 2) + _border;
svgHeight = _h * _sw + (_bx * 2) + (_border * 2)  + _border;
s = new Snap(svgWidth, svgHeight),
s.attr({
    viewBox: "0 0 " + svgWidth + " " + svgHeight,
    preserveAspectRatio: "xMidYMid meet"
});
  
board = s.g();

border = s.rect(_border / 2, _border / 2, _w * _sw, _h * _sh);
border.attr({
  fill: 'transparent',
  stroke: '#ff7777',
  strokeWidth: _border
});
board.append(border);

k = 1;
for (i = 0; i < _h; i += 1) {
  for (j = 0; j < _w; j += 1) {
    fill = k % 2 == 0 ? 'white' : '#ffffcc';
    
    square = s.g();
    square.attr({
      'data-id': k, 
      'data-pos': (_x + (_sw / 2)) + ',' + (_y + (_sh / 2))});
    square.transform('translate(' + _x + ', ' + _y + ')');

    rect = s.rect(0, 0, _sw, _sh);
    rect.attr({
      fill: fill,
      stroke: 'black'
    });
    square.append(rect);
    
    num = s.text(7, 25, k);
    square.append(num);
    
    board.append(square);
    
    _x = i % 2 == 0 ? _x + _sw : _x - _sw;
    k ++;
  }
  
  _x = i % 2 == 1 ? _bx + (_border / 2) : (_sw * (_w- 1)) + _bx + (_border / 2);
  _y -= _sh;
}

function addSlide(a, b) {
  var _a = s.select("[data-id='" + a + "']"),
      _b = s.select("[data-id='" + b + "']");
  
  _apos = _a.attr('data-pos').split(',');
  _bpos = _b.attr('data-pos').split(',');
  
  _startpos = [parseInt(_apos[0]), parseInt(_apos[1])];
  _endpos = [parseInt(_bpos[0]), parseInt(_bpos[1])];
    
  _path = "";
  _points = [_startpos[0], _startpos[1]];
  
  for (i = 1; i < 3; i += 1) {
    var _pos1 = Math.random() * (_sw * _w);
    //var _pos1 = _endpos[0]; //_startpos[0] + (Math.abs(_endpos[0] - _startpos[0]) / 3) * i;
    var _pos2 = _startpos[1] - (Math.abs(_endpos[1] - _startpos[1]) / 3) * i;
    
    _points.push(_pos1);
    _points.push(_pos2);
  }
  
  _points.push(_endpos);
  
  _path += "M";
  for (j = 0; j < _points.length; j += 1) {
    _path += _points[j];
    
    if (j % 2 == 0) {
      _path += ',';
    } else {
      _path += ' ';
    }
    
    if (j % 6 == 1) {
      _path += "C";
    }
  }
  
  var slide = s.g();
  
  var p1 = s.path(_path);
  p1.attr({
    fill: 'transparent',
    stroke: '#ff5555',
    strokeWidth: 50
  });
  slide.append(p1);
  
  var p2 = s.path(_path);
  p2.attr({
    fill: 'transparent',
    stroke: '#cc3333',
    strokeWidth: 30,
  });
  slide.append(p2);
  
  board.append(slide);
}

function addLadder(a, b) {
    var _a = s.select("[data-id='" + a + "']"),
      _b = s.select("[data-id='" + b + "']");
  
  _apos = _a.attr('data-pos').split(',');
  _bpos = _b.attr('data-pos').split(',');
  
  _startpos = [parseInt(_apos[0]), parseInt(_apos[1])];
  _endpos = [parseInt(_bpos[0]), parseInt(_bpos[1])];
  
  line1 = s.line(_startpos[0] - 20, _startpos[1], _endpos[0] - 20, _endpos[1]);
  line1.attr({
    fill: 'transparent',
    stroke: '#666600',
    strokeLinecap: 'round',
    strokeWidth: 6
  });
  
  line2 = s.line(_startpos[0] + 20, _startpos[1], _endpos[0] + 20, _endpos[1]);
  line2.attr({
    fill: 'transparent',
    stroke: '#666600',
    strokeLinecap: 'round',
    strokeWidth: 6
  });
  
  //TODO:: add pegs
}

//addLadder(3, 97);


addSlide(1, 91);
addSlide(4, 50);

addSlide(10, 100);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js