我的代码不知道是什么问题

来源:3-2 画一个五角星

酒醉人自醉

2017-08-11 01:33

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <canvas id="canvas" style="border:1px solid #aab;display:block;margin:50px auto;">
不支持canvas,请换浏览器
</canvas>
<script type="text/javascript">
var ball={x:512,y:150,r:10,g:1,vx:-4,vy:0,color:"#ccff66"}
window.onload=function(){
var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800;

var context=canvas.getContext("2d");

setInterval(
function(){
render(context);
update();
}
,
25
);
}
function update(){
ball.x+=ball.vx
ball.y+=ball.vy
ball.vy+=ball.g
if(ball.x <= ball.r){
ball.x = ball.r
ball.vx = - ball.vx
}
if(ball.x >= 800-ball.r){
ball.x = 800-ball.r
ball.vx = - ball.vx
}
if(ball.y >= 800- ball.r){
ball.y = 800- ball.r
ball.vy = - ball.vy
}
if(ball.y <= ball.r){
ball.y=ball.r
ball.vy=-ball.vy
}
console.log(ball.y,ball.vy)

}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
cxt.fillStyle=ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y,ball.r,0,2*Math.PI)
cxt.closePath()
cxt.fill()
}
</script>
 </body>
</html>

小球不会来回的弹是怎么回事


写回答 关注

1回答

  • 番茄是我2
    2017-08-11 16:27:22

    把对上边界的控制条件改成ball.y <= 0 时执行里面的内容,因为的你的竖直速度太小,进入这个条件时加量太小,一直会进入这个条件,所以小球会在上面下不来,逃逸不出来

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72885 学习 · 422 问题

查看课程

相似问题