0

window.onload = function() {

  var start = document.getElementById('start');
  var stop = document.getElementById('stop');
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var choosenPos = getSquare();
  var choosenSpeed = getSpeed();
  var currentPos = 0;

  function getSquare() {
    var pos = Math.floor(Math.random() * (640 - 1) + 1);
    return pos;
  }


  function getSpeed() {
    var speed = Math.floor(Math.random() * (10 - 1) + 1);
    return speed;
  }



  function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.round(Math.random() * 15)];
    }
    return color;
  }


  function animate() {
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
    ctx.fillRect(choosenPos, currentPos, 20, 20);
    currentPos += choosenSpeed;
    if (currentPos >= canvas.height) {
      currentPos = 0;
      choosenSpeed = getSpeed();
      choosenPos = getSquare();
      ctx.fillStyle = getRandomColor();
    }
    requestAnimationFrame(animate);
  }
  start.addEventListener('click', animate);

  stop.removeEventListener('click', animate); //???
};
canvas {
  background: yellow;
}
<div>
  <button id="start"> Start </button>
  <button id="stop"> Stop </button>
  <span> Score: <span id="score"> 0 </span> </span>
</div>
<canvas width="640" height="480" id="canvas"></canvas>

При нажатии на кнопку "Stop" ничего не происходит.

1
  • почему ты думаешь, что при нажатии на кнопку Stop что-то должно было происходить?
    – Grundy
    5 мая 2018 в 20:13

1 ответ 1

2

Надо анимацию останавливать, а не событие удалять...

window.onload = function() {

  var start = document.getElementById('start');
  var stop = document.getElementById('stop');
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var choosenPos = getSquare();
  var choosenSpeed = getSpeed();
  var currentPos = 0;

  function getSquare() {
    var pos = Math.floor(Math.random() * (640 - 1) + 1);
    return pos;
  }

  function getSpeed() {
    var speed = Math.floor(Math.random() * (10 - 1) + 1);
    return speed;
  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.round(Math.random() * 15)];
    }
    return color;
  }

  var stoping = null; //добавленные строки в коде

  function animate() {
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
    ctx.fillRect(choosenPos, currentPos, 20, 20);
    currentPos += choosenSpeed;
    if (currentPos >= canvas.height) {
      currentPos = 0;
      choosenSpeed = getSpeed();
      choosenPos = getSquare();
      ctx.fillStyle = getRandomColor();
    }
    stoping = requestAnimationFrame(animate);
  }
  start.addEventListener('click', animate);

  stop.addEventListener('click', function() {
    cancelAnimationFrame(stoping); //добавленные строки в коде
  }); //Добавленная функция
};
<style>
  canvas {
    background: yellow;
  }
</style>

<div>
  <button id="start"> Start </button>
  <button id="stop"> Stop </button>
  <span> Score: <span id="score"> 0 </span> </span>
</div>
<canvas width="640" height="480" id="canvas"></canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.