小球跳動的問題
怎么實現(xiàn)多個小球的跳動啊
小杰雜貨店
2018-06-05
3 回答
舉報
0/150
提交
取消
怎么實現(xiàn)多個小球的跳動啊
2018-06-05
舉報
2018-06-06
2018-06-06
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> </head> <body> <script> ?var?RADIUS=4; ?var?balls=[] ????window.onload=function() ????????{ ????????????var?canvas?=?document.getElementById('canvas'); ?canvas.width?=?1024; ?canvas.height?=?500; ?var?context?=?canvas.getContext("2d"); ?setInterval( ????????????????function?()?{ ????????????????????render(context); ?update(); ?} ????????????????, ?50 ?); ?} ????function?update(){ ????????for(?var?i?=?0?;?i?<?balls.length?;?i?++?){ ????????????balls[i].x?+=?balls[i].vx; ?balls[i].y?+=?balls[i].vy; ?balls[i].vy?+=?balls[i].g; ?if(?balls[i].y?>=?canvas.width-RADIUS?){ ????????????????balls[i].y?=?canvas.height-RADIUS; ?balls[i].vy?=?-?balls[i].vy*0.75; ?} ????????} ????} ????function?render(cxt){ ????????cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height) ????????for(?var?i?=?0?;?i?<?balls.length?;?i?++?){ ????????????cxt.fillStyle="#ff3"; ?cxt.beginPath(); ?cxt.arc(?balls[i].x?,?balls[i].y?,?RADIUS?,?0?,?2*Math.PI?,?true?); ?cxt.closePath(); ?cxt.fill(); ?} ????} </script> <canvas?id="canvas"?style="border:1px?solid?#aaa;display:block;margin:50px?auto;"> ?<!--當前瀏覽器不支持Canvas，請更換瀏覽器后再試--> </canvas> </body> </html>2018-06-06
把每個小球當成一個對象放到數(shù)組里，遍歷數(shù)組實現(xiàn)每個小球的動畫。
?//小球的基本運動???? ?updataBalls?:?function(){???????? ??????????var?_this?=?this;???????? ??????????var?balls?=?_this.data.balls;???????? ??????????for(var?i=0;?i<balls.length;?i++){??????????? ?????????????balls[i].x?+=?balls[i].vx;???????????? ?????????????balls[i].y?+=?balls[i].vy;??????????? ?????????????balls[i].vy?+=?balls[i].g;???????????? ?????????????if(balls[i].y?>=_WINDOW_HEIGHT?-?_RADIUS){? ?????????????????balls[i].y?=?WINDOW_HEIGHT?-RADIUS;???????????????? ??????????????????balls[i].vy?=?-balls[i].vy*0.75;??????????? ?????????????}??????? ??????????}??? ????????}