文章/答案/技术大牛

发布

社区首页 >问答首页 >如何停止“降速”提速？

问如何停止“降速”提速？
EN

Stack Overflow用户

提问于 2017-02-03 02:11:57

回答 1查看 23关注 0票数 0

问题是，每次按空格键添加一个新的drop时，所有Drop的速度都会增加，该速度由Drop构造器中的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>

javascript

canvas

constructor

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-03 02:23:35

我的朋友帮了我一把，我犯了一个错误，每次我按空格键的时候都会调用draw()。他把它放在一个条件语句中，所以我只需要调用它一次。感谢所有人..。

// 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();

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42009413

复制

相似问题

问如何停止“降速”提速？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止“降速”提速？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止“降速”提速？
EN