请问一下问什么我的小球碰到上面和左边不反弹？？
je_suis_idiot
2017-01-03 17:17
<!DOCTYPE html style="height:100%;width:100%">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body style="height:100%;width:100%">
<canvas id="canvas" style="height:100%;width: 100%">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
var circle= {x:400,y:200, vx:10,vy:5,}
window.onload = function(){
var canvas = document.getElementById('canvas');
//获取浏览器显示屏的宽高
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
RADIUS=150;
//画布大小
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
var context = canvas.getContext("2d");
setInterval(
function(){//每帧的时候做什么
render(context);//
update();
},
50//ms,每隔多久执行function
);
}
function render(context){
context.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
context.save();
context.beginPath();
context.fillStyle="#000";//纯黑背景
context.fillRect(0,0,canvas.width,canvas.height);
context.beginPath();
context.fillStyle="#fff";
context.arc(circle.x , circle.y , RADIUS , 0 , 2*Math.PI , true );
context.fill();
context.clip();
context.font="bolder 200px sans-serif";
context.fillStyle="red"
context.fillText("canvas",canvas.width*0.3,canvas.height*0.5);
context.restore();
}
function update(){
circle.x += circle.vx;//小球x方向位置
circle.y += circle.vy;
//碰撞检测
if( circle.y <=RADIUS ){//如果小球碰到顶部
circle.vy = - Math.abs(circle.vy)//y方向速度反向，
circle.y = RADIUS;
}
if( circle.x >= WINDOW_WIDTH-RADIUS ){//如果小球碰到右
circle.vx = - Math.abs(circle.vx)//x方向速度反向，
circle.x = WINDOW_WIDTH-RADIUS;
}
if( circle.y >= WINDOW_HEIGHT-RADIUS ){//如果小球碰到底部
circle.vy = - Math.abs(circle.vy)
circle.y = WINDOW_HEIGHT-RADIUS;
}
if( circle.x <= RADIUS ){//如果小球碰到左
circle.vx = - Math.abs(circle.vx)
circle.x = RADIUS;
}
}
</script>
</body>
</html>
4回答
-
- 奴奴雪人
- 2017-01-03 22:39:18
if( circle.y <=RADIUS ){//如果小球碰到顶部
circle.vy = - Math.abs(circle.vx)//y方向速度反向，
circle.y = RADIUS;
}
if( circle.x <= RADIUS ){//如果小球碰到左
circle.vx = - Math.abs(circle.vx)
circle.x = RADIUS;
}
看看你的 Math.abs() 是什么意思希望你查一下 ， 还有 在web里面 X轴和y轴的方向 希望你查一下 （x左边为正，y的下边为正）， circle.vx 是本身有正负的 你给加了 Math.abs 后 就把原来的速度全部重置成了正 再去加 （-）负号 ，那么只能对 circle.vx和circle.vx 本身为正的数字起左右 ，本身为负，你添加了 Math.abs 后就变成正的 ，再去加（-）负号 还是他自己本身的速度，而不是相反的速度
-
- Serena_Cecilia
- 2018-01-13 20:29:11
我的是按照老师的方法写的，但是不知道为什么就只在右上到左下这个对角线上面反复，请问一下是什么原因嘞？
-
- 奴奴雪人
- 2017-01-03 22:42:38
哈哈哈哈哈哈，有错别字改下
看看你的 Math.abs() 是什么意思希望你查一下 ， 还有 在web里面 X轴和y轴的方向 希望你查一下 （x左边为正，y的下边为正）， circle.vx 是本身有正负的 你给加了 Math.abs 后 就把原来的速度全部重置成了正 再去加 （-）负号 ，那么只能对 circle.vx和circle.vx 本身为正的数字起作用 ，本身为负，你添加了 Math.abs 后就变成正的 ，再去加（-）负号 还是他自己本身的速度，而不是相反的速度
1分钟前
-
- 奴奴雪人
- 2017-01-03 22:40:48
把你里面的所有Math.abs 去掉，就行 只加负号就行，最简单的方法 ，上面说的希望你理解 ，还是有看看 书的
Canvas绘图详解
72881 学习 · 422 问题
相似问题
回答 1
回答 2