Question

问题是，每次按下“Space”键添加新的下降时，所有下降的速度都会增加，速度由Drop Constructor中的movepi函数决定。任何帮助，将不胜感激。谢谢。可以通过按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) {
	'use strict';
	var code = x.keyCode;
        //soundfile = new Audio('blop.wav');
	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>

Answer 1

我的朋友帮助了我，每次按空间时我都犯了调用draw（）的错误。他把它放在条件语句中，所以我只需要调用一次。感谢所有...

＆＃13;

// 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) {
	'use strict';
	var code = x.keyCode;
        //soundfile = new Audio('blop.wav');
	if (code === 32) {
        //soundfile.play();
        dropi.push(new Drop(window.innerWidth / 2, window.innerHeight));
        if (dropi.length === 1) {
            draw();
        }
    }
});

// Run //
setCanvasWidth();
paintover();

＆＃13;

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

＆＃13;

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

＆＃13;

如何阻止“下降”速度增加？

1 个答案: