請(qǐng)問(wèn)一下問(wèn)什么我的小球碰到上面和左邊不反彈？？
<!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%">
? ? ? ? 當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試
? ? </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;
? ? ? ? ? ? //畫(huà)布大小
? ? ? ? ? ? canvas.width = WINDOW_WIDTH;
? ? ? ? ? ? canvas.height = WINDOW_HEIGHT;
? ? ? ? ? ? var context = canvas.getContext("2d");
? ? ? ? ? ??
? ? ? ? ? ? setInterval(
? ? ? ? ? ? ? ? ?function(){//每幀的時(shí)候做什么
? ? ? ? ? ? ? ? ?render(context);//
? ? ? ? ? ? ? ? ?update();
? ? ? ? ? ? },
? ? ? ? ? ? 50//ms,每隔多久執(zhí)行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;
? ? ? ? ? ? //碰撞檢測(cè)
? ? ? ? ? ? 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>
2017-01-03
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? 是本身有正負(fù)的? 你給加了 Math.abs? 后? 就把原來(lái)的速度全部重置成了正 再去加 （-）負(fù)號(hào)? ，那么只能對(duì) ?circle.vx和circle.vx? 本身為正的數(shù)字起左右 ，本身為負(fù)，你添加了 Math.abs 后就變成正的 ，再去加（-）負(fù)號(hào) 還是他自己本身的速度，而不是相反的速度
2018-01-13
我的是按照老師的方法寫(xiě)的，但是不知道為什么就只在右上到左下這個(gè)對(duì)角線上面反復(fù)，請(qǐng)問(wèn)一下是什么原因嘞？
2017-01-03
哈哈哈哈哈哈，有錯(cuò)別字改下
看看你的?? Math.abs() 是什么意思希望你查一下? ，? 還有 ? 在web里面? X軸和y軸的方向 希望你查一下 ? （x左邊為正，y的下邊為正）， ?circle.vx? 是本身有正負(fù)的? 你給加了 Math.abs? 后? 就把原來(lái)的速度全部重置成了正 再去加 （-）負(fù)號(hào)? ，那么只能對(duì) ?circle.vx和circle.vx? 本身為正的數(shù)字起作用 ，本身為負(fù)，你添加了 Math.abs 后就變成正的 ，再去加（-）負(fù)號(hào) 還是他自己本身的速度，而不是相反的速度
1分鐘前
2017-01-03
把你里面的所有Math.abs 去掉，就行? 只加負(fù)號(hào)就行，最簡(jiǎn)單的方法 ，上面說(shuō)的希望你理解 ，還是有看看 書(shū)的