課程
/前端開(kāi)發(fā)
/Html5
/炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ)
怎么實(shí)現(xiàn)多個(gè)小球的跳動(dòng)啊
2018-06-05
源自：炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ) 4-2
正在回答
怎么實(shí)現(xiàn)多個(gè)小球隨機(jī)跳動(dòng)，不要有倒計(jì)時(shí)的效果。請(qǐng)看一下還差了什么。
<!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;"> ?<!--當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試--> </canvas> </body> </html>
把每個(gè)小球當(dāng)成一個(gè)對(duì)象放到數(shù)組里，遍歷數(shù)組實(shí)現(xiàn)每個(gè)小球的動(dòng)畫(huà)。
?//小球的基本運(yùn)動(dòng)???? ?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;??????????? ?????????????}??????? ??????????}??? ????????}
舉報(bào)
學(xué)習(xí)HTML5中最激動(dòng)人心的技術(shù)Canvas，徹底釋放自己的創(chuàng)造力
1 回答多個(gè)小球跳動(dòng)的問(wèn)題。
1 回答小球在前面跳。。。。
2 回答華麗的小球滾動(dòng)效果問(wèn)題
4 回答如何讓小球不跳
5 回答關(guān)于小球無(wú)限彈跳
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
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;"> ?<!--當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試--> </canvas> </body> </html>2018-06-06
把每個(gè)小球當(dāng)成一個(gè)對(duì)象放到數(shù)組里，遍歷數(shù)組實(shí)現(xiàn)每個(gè)小球的動(dòng)畫(huà)。
?//小球的基本運(yùn)動(dòng)???? ?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;??????????? ?????????????}??????? ??????????}??? ????????}