Как остановить увеличение скорости «падения»?

Проблема в том, что каждый раз, когда добавляется новая капля, нажимая клавишу «Пробел», скорость всех капель увеличивается, скорость определяется функцией movepi в Drop Constructor. Любая помощь будет оценена по достоинству. Благодарю. Приведенный ниже фрагмент кода можно проверить, нажав клавишу SpaceBar.Как остановить увеличение скорости «падения»?

// Get Random // 
 
function rand(min, max) { 
 
    "use strict"; 
 
    return Math.floor((Math.random() * max) + min); 
 
} 
 

 
// Setup Canvas // 
 
var canvas = document.querySelector("#make"), 
 
    ctx = canvas.getContext("2d"); 
 

 
// Create Drop // 
 
function Drop(x, y) { 
 
    'use strict'; 
 
    // Set X and Y Position // 
 
    this.x = x; 
 
    this.y = y; 
 
    // Show Drop // 
 
    this.showpi = function() { 
 
     ctx.fillStyle = 'red'; 
 
     ctx.fillRect(x, y, 10, 10); 
 
    }; 
 
    // Move Drop // 
 
    this.movepi = function() { 
 
     y = y - 3; 
 
    }; 
 
} 
 

 
// Setup Canvas Size // 
 
function setCanvasWidth() { 
 
    "use strict"; 
 
    ctx.canvas.width = window.innerWidth; 
 
    ctx.canvas.height = window.innerHeight; 
 
} 
 

 
// Paint Over Canvas For Animation Illusion // 
 
function paintover() { 
 
    'use strict'; 
 
    ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
    window.requestAnimationFrame(paintover); 
 
} 
 

 
// Variables // 
 
var dropi = []; 
 
//var drop = new Drop(window.innerWidth/2, window.innerHeight); 
 

 
// Get New Drops // 
 
function drop() { 
 
    'use strict'; 
 
    var newdrops = new Drop(window.innerWidth/2, window.innerHeight); 
 
    return newdrops; 
 
} 
 

 
// Draw // 
 
function draw() { 
 
    'use strict'; 
 
    var i; 
 
    for (i = 0; i < dropi.length; i = i + 1) { 
 
     dropi[i].showpi(); 
 
     dropi[i].movepi(); 
 
    } 
 
    window.requestAnimationFrame(draw); 
 
} 
 

 
// Listen For "SpaceBar" Key Press // 
 
window.addEventListener('keydown', function pressed(x) { 
 
\t 'use strict'; 
 
\t var code = x.keyCode; 
 
     //soundfile = new Audio('blop.wav'); 
 
\t if (code === 32) { 
 
     //soundfile.play(); 
 
     dropi.push(new Drop(window.innerWidth/2, window.innerHeight)); 
 
     draw(); 
 
    } 
 
}); 
 

 
// Run // 
 
setCanvasWidth(); 
 
paintover();

canvas { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<html> 
 
    <body> 
 
     <canvas id="make"></canvas> 
 
    </body> 
 
</html>

источник

2017-02-02 user2777173

Мой друг помог мне, я сделал ошибку вызова отрисовки() каждый раз я нажимал пространство. он поставил его в условном выражении, поэтому мне только нужно было позвонить ему один раз. Спасибо всем ...

// Get Random // 
 
function rand(min, max) { 
 
    "use strict"; 
 
    return Math.floor((Math.random() * max) + min); 
 
} 
 

 
// Setup Canvas // 
 
var canvas = document.querySelector("#make"), 
 
    ctx = canvas.getContext("2d"); 
 

 
// Create Drop // 
 
function Drop(x, y) { 
 
    'use strict'; 
 
    // Set X and Y Position // 
 
    this.x = x; 
 
    this.y = y; 
 
    // Show Drop // 
 
    this.showpi = function() { 
 
     ctx.fillStyle = 'red'; 
 
     ctx.fillRect(x, y, 10, 10); 
 
    }; 
 
    // Move Drop // 
 
    this.movepi = function() { 
 
     y = y - 3; 
 
    }; 
 
} 
 

 
// Setup Canvas Size // 
 
function setCanvasWidth() { 
 
    "use strict"; 
 
    ctx.canvas.width = window.innerWidth; 
 
    ctx.canvas.height = window.innerHeight; 
 
} 
 

 
// Paint Over Canvas For Animation Illusion // 
 
function paintover() { 
 
    'use strict'; 
 
    ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
    window.requestAnimationFrame(paintover); 
 
} 
 

 
// Variables // 
 
var dropi = []; 
 
//var drop = new Drop(window.innerWidth/2, window.innerHeight); 
 

 
// Get New Drops // 
 
function drop() { 
 
    'use strict'; 
 
    var newdrops = new Drop(window.innerWidth/2, window.innerHeight); 
 
    return newdrops; 
 
} 
 

 
// Draw // 
 
function draw() { 
 
    'use strict'; 
 
    var i; 
 
    for (i = 0; i < dropi.length; i = i + 1) { 
 
     dropi[i].showpi(); 
 
     dropi[i].movepi(); 
 
    } 
 
    window.requestAnimationFrame(draw); 
 
} 
 

 
// Listen For Key Press // 
 
window.addEventListener('keydown', function pressed(x) { 
 
\t 'use strict'; 
 
\t var code = x.keyCode; 
 
     //soundfile = new Audio('blop.wav'); 
 
\t if (code === 32) { 
 
     //soundfile.play(); 
 
     dropi.push(new Drop(window.innerWidth/2, window.innerHeight)); 
 
     if (dropi.length === 1) { 
 
      draw(); 
 
     } 
 
    } 
 
}); 
 

 
// Run // 
 
setCanvasWidth(); 
 
paintover();

canvas { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<body> 
 
     <canvas id="make"></canvas> 
 
    </body>

источник

2017-02-02 18:23:34 user2777173

Как остановить увеличение скорости «падения»?

ответ

Смежные вопросы