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" ничего не происходит.
Stop
что-то должно было происходить?