javaScript:一个令初学者抓狂的问题

从岳麓山到珞珈山 2018-03-22 01:50:16

编写一个生成指定输入数量圆球的程序:

JS.文档

得到了以下的页面：

然后每次输入指定的值后，页面就会很快显示一下球，然后变成空白。

之后我修改JS文档，取消点击事件触发，直接给了一个固定的值25.

然后页面就会得到指定的效果。

很抓狂，不知道什么原因，有哪位大大能指导一下萌新吗？

以下是文档（可直接粘贴复制）：

JS:

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var width = canvas.width = window.innerWidth-20;
var height = canvas.height = window.innerHeight - 150;

var btnSub = document.querySelector("button#sub");
var btnRes = document.querySelector("button#reset");
var input = document.querySelector("input");

/*随机数函数
--------------------------------------------------------------------------------*/
function random(min,max) {
var num = Math.floor(Math.random()*(max-min)) + min;
return num;
}

/*新建小球对象函数
--------------------------------------------------------------------------------*/

function Ball(x, y, r, velx, vely, color) {
this.x = x;
this.y = y;
this.r = r;
this.color = color;
this.velx = velx;
this.vely = vely;
}

/*用canvas画小球函数
--------------------------------------------------------------------------------*/

Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
ctx.fill();
}

/*生成输入数量的小球
--------------------------------------------------------------------------------*/

var balls = [];

for(var i = 0; i < 25; i++) {
var x = random(0, width);
var y = random(0, height);
var r = random(10, 20);
var color = "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
var velx = random(-10, 10);
var vely = random(-10, 10);
balls[i] = new Ball(x, y, r, velx, vely, color);
balls[i].draw();
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bouncing balls</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>"Bouncing Balls Test" By Chenxy</h1>

<form>
<label for="ballsNumber">Please enter the number of balls you want：</label>
<input type="text">
<button id="sub">submit</button>
<button id="reset">Reset</button>
</form>

<canvas></canvas>

<script src="main.js"></script>

</body>
</html>

ps:邀请的大神是系统推荐的，新人刚到，不懂规矩，如有冒犯，请狠狠地批评我~~~~~~~~~~~~~[/color[color=#800000]]（鞭策我）

...全文

543 12 打赏收藏举报

写回复

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

从岳麓山到珞珈山 2018-03-23

打赏
举报

引用 8 楼 jslang 的回复:

反到是你第一种看着不太对

但是第一种可以运行，第二种却不行。第一个的所有： var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var input = document.querySelector("input"); var btn = document.querySelector("button"); var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight; // function to generate random number function random(min,max) { var num = Math.floor(Math.random()*(max-min)) + min; return num; } function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; this.velY = velY; this.color = color; this.size = size; } Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); } Ball.prototype.update = function() { if((this.x + this.size) >= width) { this.velX = -(this.velX); } if((this.x - this.size) <= 0) { this.velX = -(this.velX); } if((this.y + this.size) >= height) { this.velY = -(this.velY); } if((this.y - this.size) <= 0) { this.velY = -(this.velY); } this.x += this.velX; this.y += this.velY; }; var balls = []; function loop() { ctx.fillStyle = 'rgba(255, 255, 255,0.5)'; ctx.fillRect(0,0,width,height); while(balls.length < input.value) { var ball = new Ball( random(0,width), random(0,height), random(-7,7), random(-7,7), 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', random(10,20) ); balls.push(ball); } for(var i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); } requestAnimationFrame(loop); } btn.onclick = loop; 第二个： var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var width = canvas.width = window.innerWidth-20; var height = canvas.height = window.innerHeight - 150; var btnSub = document.querySelector("button#sub"); var btnRes = document.querySelector("button#reset"); var input = document.querySelector("input"); /*随机数函数 --------------------------------------------------------------------------------*/ function random(min,max) { var num = Math.floor(Math.random()*(max-min)) + min; return num; } /*新建小球对象函数 --------------------------------------------------------------------------------*/ function Ball(x, y, r, velx, vely, color) { this.x = x; this.y = y; this.r = r; this.color = color; this.velx = velx; this.vely = vely; } /*用canvas画小球函数 --------------------------------------------------------------------------------*/ Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); ctx.fill(); } /*小球运动微元 --------------------------------------------------------------------------------*/ Ball.prototype.update = function() { if((this.x + this.size) >= width) { this.velX = -(this.velX); } if((this.x - this.size) <= 0) { this.velX = -(this.velX); } if((this.y + this.size) >= height) { this.velY = -(this.velY); } if((this.y - this.size) <= 0) { this.velY = -(this.velY); } this.x += this.velX; this.y += this.velY; }; /*生成输入数量的小球 --------------------------------------------------------------------------------*/ var balls = []; btnSub.onclick = function() { for(var i = 0; i < input.value; i++) { var x = random(0, width); var y = random(0, height); var r = random(10, 20); var color = "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")"; var velx = random(-10, 10); var vely = random(-10, 10); balls[i] = new Ball(x, y, r, velx, vely, color); } animate (); } function animate() { ctx.fillStyle = 'rgba(255, 255, 255,0.5)'; ctx.fillRect(0,0,width,height); for (var j = 0; j < input.value; j++) { balls[j].draw(); balls[j].update(); } requestAnimationFrame(animate); } HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>bouncing balls</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>"Bouncing Balls Test" By Chenxy</h1> <form> <label for="ballsNumber">Please enter the number of balls you want：</label> <input type="text"> <button id="sub" type="button">submit</button> <button id="reset">Reset</button> </form> <canvas></canvas> <script src="main.js"></script> </body> </html>

从岳麓山到珞珈山 2018-03-23

打赏
举报

引用 8 楼 jslang 的回复:

反到是你第一种看着不太对

Ball.prototype.update = function() { if((this.x + this.size) >= width) { this.velX = -(this.velX); } if((this.x - this.size) <= 0) { this.velX = -(this.velX); } if((this.y + this.size) >= height) { this.velY = -(this.velY); } if((this.y - this.size) <= 0) { this.velY = -(this.velY); } this.x += this.velX; this.y += this.velY; };

天际的海浪 2018-03-23

打赏
举报

第二种没问题，只是你.update()方法没发出来

天际的海浪 2018-03-23

打赏
举报

反到是你第一种看着不太对

从岳麓山到珞珈山 2018-03-23

打赏
举报

引用 11 楼 jslang 的回复:

update方法的问题，写代码不仔细啊 this.size是什么？应该是this.r呀。 this.velx 和 this.vely 中的x y 是小写

谢谢海浪哥，我一定吸取教训，十分感谢海浪哥一直给我解答。

天际的海浪 2018-03-23

打赏
举报

update方法的问题，写代码不仔细啊 this.size是什么？应该是this.r呀。 this.velx 和 this.vely 中的x y 是小写

从岳麓山到珞珈山 2018-03-22

打赏
举报

引用 4 楼 jslang 的回复:

页面闪一下又恢复如初，肯定是表单提交让页面刷新了

海浪哥，我将button标签后加了type = "button" ,然后试着让这些球动起来。用了两种写法。
第一种是这样：
Ball.prototype.collisionDetect = function() {
for (var j = 0; j < balls.length; j++) {
if (!(this === balls[j])) {
var dx = this.x - balls[j].x;
var dy = this.y - balls[j].y;
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < this.size + balls[j].size) {
balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
}
}
}
}

var balls = [];

function loop() {
ctx.fillStyle = 'rgba(255, 255, 255,0.5)';
ctx.fillRect(0,0,width,height);

while(balls.length < input.value) {
var ball = new Ball(
random(0,width),
random(0,height),
random(-7,7),
random(-7,7),
'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
random(10,20)
);
balls.push(ball);
}

for(var i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].update();
}

requestAnimationFrame(loop);
}

btn.onclick = function () {
loop();
}

效果达到预期。

第二种：btnSub.onclick = function() {
for(var i = 0; i < input.value; i++) {
var x = random(0, width);
var y = random(0, height);
var r = random(10, 20);
var color = "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
var velx = random(-10, 10);
var vely = random(-10, 10);
balls[i] = new Ball(x, y, r, velx, vely, color);
}

animate ();
}

function animate() {
ctx.fillStyle = 'rgba(255, 255, 255,0.5)';
ctx.fillRect(0,0,width,height);

for (var j = 0; j < input.value; j++) {
balls[j].draw();
balls[j].update();
}
requestAnimationFrame(animate);
}

也是一闪就过了。找了半天也没找到什么原因，我觉得这两种思路是一样的，不知道差别在哪。

从岳麓山到珞珈山 2018-03-22