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]](鞭策我)


...全文
560 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
引用 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>
  • 打赏
  • 举报
回复
引用 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
  • 打赏
  • 举报
回复
反到是你第一种看着不太对
  • 打赏
  • 举报
回复
引用 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 是小写
  • 打赏
  • 举报
回复
引用 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);
}

也是一闪就过了。找了半天也没找到什么原因,我觉得这两种思路是一样的,不知道差别在哪。
  • 打赏
  • 举报
回复
引用 4 楼 jslang 的回复:
页面闪一下又恢复如初,肯定是表单提交让页面刷新了
老哥你太厉害,看了你写的游戏。。
天际的海浪 2018-03-22
  • 打赏
  • 举报
回复
页面闪一下又恢复如初,肯定是表单提交让页面刷新了
  • 打赏
  • 举报
回复
引用 1 楼 Free_Wind22 的回复:
给button加个type,默认是submit,提交页面后刷新就没了 <button type='button' id="sub">submit</button>
谢谢老哥~~
Go 旅城通票 2018-03-22
  • 打赏
  • 举报
回复
引用 1 楼 Free_Wind22 的回复:
给button加个type,默认是submit,提交页面后刷新就没了 <button type='button' id="sub">submit</button>


Web开发学习资料推荐
Web开发网
jquery全年日期选择器日历插件
2018-03-22
  • 打赏
  • 举报
回复
给button加个type,默认是submit,提交页面后刷新就没了 <button type='button' id="sub">submit</button>

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧