没有帆布的小径

Question

我已经创建了以下代码，并且希望在落下的球后留下一条痕迹。

JSFiddle：https://jsfiddle.net/uj896hmq/72/

代码

var generateGame = function(){
    var string = "";

  var discAmount = 0;
  for(var x = 0; x < 13; x++){
        discAmount++;

        string += "<div class='row'>";

    for(var y = 1; y <= discAmount; y++){
        string += "<div class='disc'></div>";
    }


    string += "</div>";

  }

  $('.board .wrapper').append(string);

  var getPosition = $('.board').find('.disc').eq(0),
      top = getPosition.position().top,
      left = getPosition.position().left;

  var $el = $('<div class="falling"></div>');
  $('.board .wrapper').prepend($el);
  $el.css({
    top: top,
    left: left
  });
}

generateGame();

$(document).on('click', 'button', function(){
    startGame();
});

var startGame = function(){
    var $board = $('.board .wrapper'),
        $el = $(".falling");

  var currentRow = 0,
        path = generatePath();

  setInterval(function(){
        var getPosition = $board.find('.row').eq(currentRow).find('.disc').eq(path[currentRow]),
            top = getPosition.position().top,
        left = getPosition.position().left;

    $el.animate({
        top: top,
      left: left
    }, 500);

    //random between 1-2, 3-5, 4-8
    currentRow++;
  }, 500);
}

var generatePath = function(){
    var path = [0];

  for(var x = 1; x < 13; x++){
    var previousPath = path[x - 1];        
    var randomPath = generateNext(previousPath, (previousPath + 1));

    path.push(randomPath);
  }

  return path;
}

function generateNext(min,max){
  return Math.floor(Math.random()*(max-min+1)+min);
}

console.log(generatePath());

重点是我不知道如何使用常规的javascript和jQuery实现此目标，我想到可能在球的位置放置许多div，但这似乎不合适。

有人有什么主意吗？

Answer 1

您可以使用SVG在不使用画布的情况下向HTML动态添加行。我创建了一个粗略的示例，您可以参考。基本上，仅是对行进行定位的一些计算。

var generateGame = function() {
  var string = "";

  var discAmount = 0;
  for (var x = 0; x < 13; x++) {
    discAmount++;

    string += "<div class='row'>";
    for (var y = 1; y <= discAmount; y++) {
      string += "<div class='disc'></div>";
    }
    string += "</div>";

  }

  $('.board .wrapper').append(string);

  var getPosition = $('.board').find('.disc').eq(0),
    top = getPosition.position().top,
    left = getPosition.position().left;

  var $el = $('<div class="falling"></div>');
  $('.board .wrapper').prepend($el);
  $el.css({
    top: top,
    left: left
  });
}

generateGame();

$(document).on('click', 'button', function() {
  startGame();
});

var startGame = function() {
  var $board = $('.board .wrapper'),
      $el = $(".falling"),
      $trail = $('.trail'),
      $prevDisc = null;

  var currentRow = 0,
      path = generatePath();

  $trail.empty();
  setInterval(function() {
    var getPosition = $board.find('.row').eq(currentRow).find('.disc').eq(path[currentRow])
    if (getPosition.length > 0) {

      var top = getPosition.position().top,
          left = getPosition.position().left;

      if ($prevDisc) {
        var isLeft = left < $prevDisc.position().left;
        drawPath($prevDisc.position().left, currentRow - 1, isLeft);
      }

      $prevDisc = getPosition;

      $el.animate({
        top: top,
        left: left
      }, 500);

      //random between 1-2, 3-5, 4-8
      currentRow++;
    }
  }, 500);
}

var generatePath = function() {
  var path = [0];

  for (var x = 1; x < 13; x++) {
    var previousPath = path[x - 1];
    var randomPath = generateNext(previousPath, (previousPath + 1));

    path.push(randomPath);
  }

  return path;
}

function generateNext(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function drawPath(xPos, prevRow, isLeft) {
  if (prevRow >= 0) {
    var svgTopOffSet = 12;
    var svgHeight = 22;
    var svgWidth = 22;

    var $trail = $('.trail');
    var $newTrail = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
    $newTrail.attr({
           x: xPos,
           y: prevRow * svgHeight + svgTopOffSet
    });

    var $line = $(document.createElementNS('http://www.w3.org/2000/svg', 'line'));
    $line.attr({
      x1: svgWidth / 2,
      y1: 0,
      x2: isLeft ? 0 : svgWidth,
      y2: svgWidth,
      style: 'stroke:orange;stroke-width:3'
    });
    $newTrail.append($line);
    $trail.append($newTrail);
  }
}

body {
  background: rgb(26, 30, 35);
}

.board {
  width: 500px;
  height: 300px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  justify-content: center;
}

.row .disc {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: gray;
  margin: 8px;
}

.wrapper .falling {
  position: absolute;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background: orange;
  transform: translate(50%, 50%);
  z-index: 1;
}

.wrapper {
  position: relative;
}

.trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

line { stroke-dasharray: 25; stroke-dashoffset: 25; animation: offset 0.5s linear forwards; }
    
@keyframes offset { 
    to { 
       	stroke-dashoffset: 0;
    } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='board'>
  <div class='wrapper'>
    <svg class="trail">
  </svg>
  </div>

  <button>
    test game
  </button>
</div>