浠婂勾鏉窞鍙堝紑濮嬩妇鍔炵儫鑺辫妭浜嗐€傜儫鑺辩湡鐨勫緢缇庛€傚鏋滄病鏈夋満浼氱幇鍦虹湅锛屼綔涓哄墠绔紝鍙互鑷繁瀹炵幇涓€涓儫鑺遍〉闈€傝窡鎴戞潵锛屾妸杩欑儫鑺卞瘑鐮佸搴熴€傚姛鑳藉垎瑁傛櫘閫氱儫鑺辨槸浠庝竴涓湴鏂瑰悜涓婂彂灏勶紝褰撳埌杈句竴瀹氶珮搴︽椂锛岀垎鐐告垚涓€鍦堝厜鐐广€傞珮搴︿笉鍚岋紝鍦嗗湀鐨勫ぇ灏忎笉鍚岋紝鍏夋枒鐨勯鑹蹭篃涓嶅悓銆傚洜姝わ紝涓€涓儫鑺辩殑杩囩▼鍙互鍒嗕负2涓楠わ細1.浠庢煇涓綅缃甈0涓婂崌鍒癙1锛?銆佷粠P1鐖嗗彂鎴愪竴鍦堝厜鐐癸紝鍏夌偣鍚戝鎵╂暎锛屽厜鐐规墿鏁e埌涓€瀹氱▼搴︼紝鐒跺悗閫愭笎娑堝け銆備竴姝ユ鍐欎唬鐮佽繖涓儫鑺憋紝鎴戜滑闇€瑕佺敤canvas鏉ョ敾锛屾墍浠ユ垜浠渶瑕佸厛鍒朵綔canvas锛歷arcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');//娓呴櫎鐢诲竷functionclearCanvas(){ctx.fillStyle='#000000';ctx.fillRect(0,0,canvas.width,canvas.height);}clearCanvas();鐑熻姳鍗囩┖锛岄鍏堣缃儫鑺辩殑鍩烘湰淇℃伅锛屽寘鎷儫鑺辩殑澶у皬锛屼粠鍝噷寮€濮嬫斁鐑熻姳銆傚父閲忓ぇ灏?2锛?/鐑熻姳鐨勫ぇ灏廲onststart={x:canvas.width/2,y:canvas.height-100,};鐒跺悗鍋氫竴涓紶鏍囩偣鍑讳簨浠讹紝褰撶偣鍑荤敾甯冩椂锛岀儫鑺卞氨浼氬紑濮嬫挱鏀撅紙fire鏂规硶锛夈€傚湪fire鏂规硶涓紝涓嶆柇鏇存柊褰撳墠鐑熻姳绮掑瓙鐨勪綅缃紝褰㈡垚鍚戜笂鐨勭儫鑺辨晥鏋溿€傝rid=0;functionfire(){constp={x:start.x,y:start.y}functiontick(){clearCanvas();姝ラ1(p);rid=requestAnimationFrame(tick);}cancelAnimationFrame(鎽嗚劚);tick()}//鐑熻姳绗竴姝ワ紝鍗囩┖functionstep1(p){p.y=p.y-4;//姣忓抚鏀瑰彉绮掑瓙鐨勪綅缃甤tx.beginPath();ctx.arc(p.x,p.y,size,0,Math.PI*2,false)ctx.closePath();ctx.fillStyle="#ffffff";ctx.fill();}functionmouseDownHandler(e){fire();}document.addEventListener('mousedown',mouseDownHandler,false);鐑熻姳鍗囪捣鐨勬椂鍊欙紝閫熷害浼氳秺鏉ヨ秺鎱€傚綋杈惧埌涓€瀹氶珮搴﹀悗锛屼笂鍗囬€熷害涓?锛岃繘鍏ョ浜岄樁娈点€傛墍浠.y鐨勫彉鍖栭渶瑕佹敼鎴恈hange锛岀劧鍚庡姞涓€涓帶浠惰繘鍏ョ浜岀鐘舵€併€傚嚱鏁皌ick(){clearCanvas();//鏍规嵁state鎺у埗stageif(p.state===1){step1(p);}elseif(p.state===2){step2(p);}}functionstep1(p){if(p.upSpeed<0.1){//褰撻€熷害寰堜綆鏃讹紝杩涘叆绗簩闃舵p.state=2;杩斿洖;}p.upSpeed=p.upSpeed-0.05;//閫熷害鍙樺寲閫愭笎鍑忓皬p.y=p.y-p.upSpeed;...}鐑熻姳鐖嗙偢杩涘叆绗簩闃舵鍚庯紝闇€瑕佸皢鏁e竷鍦ㄥ懆鍥寸殑涓€鏉熺矑瀛愮偢寮€銆傛垜浠厛鍋氫竴鍦堢矑瀛愶紝鐒跺悗娣诲姞鍔ㄧ敾鍜岀矑瀛愩€傝鍗婂緞=10锛?/绮掑瓙鐜粫鍗婂緞functionstep2(p){constcount=10;//10涓矑瀛恟adius++//鍗婂緞涓嶆柇澧為暱锛屽舰鎴愬姩鐢籪or(vari=0;i
