又来了！10分钟实现微信“炸屎”战
时间：2023-04-05 22:33:47
HTML5
澶у濂斤紝鎴戞槸绉嬮銆傝繎鏃ワ紝寰俊鍙戝竷浜嗕竴涓柊鍔熻兘锛堟洿鏂拌嚦寰俊8.0.6锛夈€傛渶鐏殑灏辨槸鈥滅垎灞庘€濆姛鑳斤紝鍚勭缇ら兘寮€濮嬬帺鈥滅垎灞庘€濆姛鑳戒簡銆備笉鐭ラ亾澶у鏈夋病鏈夎繃杩欐牱鐨勭粡鍘嗭紝灏忔椂鍊欒繃骞寸殑鏃跺€欙紝鎬讳細鐪嬪埌闅斿瀹剁殑瀛╁瓙鍋氳繖绉嶆伓浜嬨€傛病鎯冲埌寰俊鍋氫簡涓€涓綉缁滅増銆傜敋鑷冲垱閫犺浜у搧鐨勪汉涔熷槻绗戣繖椤瑰姛鑳芥€у彂鏄庛€備絾鏄兘澶熷仛鍑轰竴涓鍏ㄦ皯閮戒箰鍦ㄥ叾涓殑鍔熻兘锛屽浜庝骇鍝佸瑙傜殑鎰忎箟涔熶笉鏄櫧鏉ョ殑銆傚井淇?.0鏇存柊鐨勬椂鍊欐垜涔熷啓浜嗙瘒銆婃暀浣犲疄鐜板井淇?.0銆庣偢瑁傘€忕殑绀艰姳琛ㄦ儏鐗规晥銆嬬殑鏂囩珷銆傚湪涓婁竴绡囨枃绔犱腑锛屾垜浣跨敤浜哻anvas鏉ュ疄鐜板畠銆備笂娆℃枃鏈湁浜鸿瘎璁鸿閫氳繃lottie鍙互瀹炵幇绫讳技鐨勫姛鑳姐€傚叾瀹炴垜瀵硅繖涓繕鏄緢鎰熷叴瓒ｇ殑锛屽彧鏄竴鐩存病鏈夊皾璇曡繃銆傝繖娆℃垜鎯抽€氳繃鏂扮殑鏂瑰紡lottie鏉ュ疄鐜拌繖涓姛鑳姐€傛晥鏋滀綋楠岋細https://example.qiufeng.blue/...Github鍦板潃锛歨ttps://github.com/hua1995116...鍒嗚В浠讳綍瀵硅薄鐨勬楠ら兘鏄敱鏇村皬鐨勫璞＄粍鎴愮殑锛屾墍浠ユ垜浠瀹炵幇浠ヤ笂鍔熻兘锛岃嚜鐒惰涓€姝ユ鏉ャ€傛垜鎶婁笂闈㈢殑鍔熻兘澶ц嚧鎷嗚В鎴愪簡浠ヤ笅鍥涙銆傛瘡涓€涓兘涓嶆槸澶毦锛屽彲浠ヨ鍓嶇灏忕櫧閮借兘杞绘澗瀹炵幇銆?.鍦ㄦ墧鐐稿脊杩欎竴姝ワ紝鎴戜滑鍙互鍒╃敤浜屾鍑芥暟鐨勭煡璇嗗啓鍑鸿建杩硅矾寰勶紙绫讳技y=$x^2$锛夛紝鐒跺悗浣跨敤tween.js鍋氳ˉ闂村姩鐢汇€?.鐐稿脊鐖嗙偢浣跨敤lottie瀹炵幇鍔ㄧ敾銆?.宸村反鐖嗙偢浣跨敤css鍔ㄧ敾4.澶у鎶栭煶浣跨敤css鍔ㄧ敾鏈変簡浠ヤ笂鎬濊矾涔嬪悗锛屾帴涓嬫潵灏辫寮€濮嬬湡鍒€鐪熸灙鐨勭粌涔犱簡銆傚叿浣撳疄鐜?.鎶曟幏鐐稿脊鎴戜滑鍏跺疄閫氳繃浠旂粏瑙傚療鍙互鐪嬪嚭锛岀偢寮圭殑杩愯杞ㄨ抗鍏跺疄鏄竴鏉℃姏鐗╃嚎銆傚鏋滄垜浠瀹炵幇杩欎釜鍔熻兘锛屾垜浠緢瀹规槗鎯冲埌浜屾鍑芥暟銆傞鍏堬紝璁╂垜浠湅涓€涓嬩簩娆″嚱鏁扮殑瀹氫箟銆傞€氬父锛寉=ax虏+bx+c(a鈮?)锛坅銆乥銆乧鍧囦负甯告暟锛夊舰寮忕殑鍑芥暟绉颁负浜屾鍑芥暟銆傝繖灏辨槸瀹冧互鍥惧舰鏂瑰紡琛ㄨ揪鐨勬柟寮忋€傛樉鐒惰繖鍜屾垜浠兂瑕佺殑杞ㄨ抗闈炲父鐩镐技銆傚洜涓烘甯哥殑绗涘崱灏斿潗鏍囩郴鍙栨y杞村瀭鐩村悜涓婏紝姝杞村彇姘村钩鍚戝彸銆傚浜巇om瀹氫綅锛屽乏涓婁负(0,0)锛屾按骞冲悜鍙充负姝杞达紝鍨傜洿鍚戜笅涓烘y杞淬€傚畠鍙槸娌縳杞寸炕杞潗鏍囩郴銆傛墍浠ユ垜浠彧闇€瑕佺‘瀹氫竴涓簩娆″嚱鏁帮紝灏卞彲浠ュ緱鍒拌建杩广€傜敱浜庝簩娆″嚱鏁扮殑涓€鑸」鏈?涓湭鐭ユ暟锛屾垜浠彧闇€瑕佺煡閬?涓偣灏卞彲浠ョ‘瀹氫竴涓簩娆″嚱鏁般€傛垜浠厛鍋囪鎴戜滑鐨勪簩娆″嚱鏁版槸杩欐牱鐨勩€傛垜浠殑3涓偣鍒嗗埆鏄?0,H),(H,0),(3H,3H)鎴戜滑鎶婇€氶」浠ｅ叆鍙互寰楀埌涓嬮潰鐨勫叕寮忥細鐒跺悗姹傝В寰楀埌锛氬洜姝わ紝鎴戜滑鍙渶瑕佸緱鍒版渶楂樼偣鐐稿脊浠庘€滃睅鈥濈殑楂樺害锛屽彲浠ョ敾鍑烘暣涓脊閬撱€傜幇鍦ㄥ亣璁炬垜浠殑鐐稿脊鏄竴涓?0px*10px鐨勫皬鏂瑰潡锛岃璧风偣涓?300,300)锛岀粓鐐逛负(0,100)H=100锛岄偅涔堟垜浠緱鍒颁簩娆″嚱鏁帮細鎴戜滑鍙互寰楀埌濡備笅杞ㄨ抗Animation锛氫负浜嗘覆鏌撴瘡涓€甯у姩鐢伙紝鎴戜滑浣跨敤钁楀悕鐨勮ˉ闂村姩鐢诲簱Tween.jsTween锛堝姩鐢伙級鏄竴涓厑璁告偍浠ュ钩婊戠殑鏂瑰紡鏇存敼瀵硅薄灞炴€х殑姒傚康銆備綘鍙鍛婅瘔瀹冭鏀瑰彉鍝簺灞炴€э紝褰撹ˉ闂村畬鎴愯繍琛屾椂瀹冧滑搴旇鏈変粈涔堟渶缁堝€硷紝浠ュ強杩欓渶瑕佸闀挎椂闂达紝琛ラ棿寮曟搸浼氳礋璐ｈ绠椾粠璧风偣鍒扮粓鐐圭殑鍊?鍙橀噺鍧愭爣={x:300};//璧风偣鏄痻=300vartween=newTWEEN.Tween(coords).to({x:0},1000)//缁堢偣鏄痻=0锛岃繖涓姩浣滀細鍦?绉掑唴瀹屾垚銆俥asing(TWEEN.Easing.Linear.None)//閫氳繃涓婇潰鐨勬亽閫熷畾涔夛紝鎴戜滑鍙互鍦╫nUpdate涓緱鍒版瘡娆″彉鍖栫殑x鍊硷紝鐒跺悗閫氳繃涓婇潰鐨勪簩娆″嚱鏁板緱鍒皔锛岀劧鍚庡灏忓潡杩涜鏇存柊.tween.onUpdate(function(){varx=coords.x;vary=1/120*x*x-11/6*x+100;box.style.setProperty('transform','translate('+x+'px,'+y+'px)');})杩欎釜鏃跺€欐垜浠畬鎴愮殑鏁堟灉杩樻槸灏戜簡鐐逛笢瑗匡紝灏卞儚鐢荤敾涓€鏍凤紝鎴戜滑鍙槸缁欎粬鐢讳簡楠ㄦ灦锛屾垜浠渶瑕佺粰瀹冧笂鑹诧紝鎺ヤ笅鏉ワ紝鎴戜滑鍙渶瑕佸仛涓嬮潰涓や欢浜嬶紝灏卞彲浠ョ湅鍒版晥鏋滀簡~1.鐢ㄧ偢寮规浛鎹㈡鏂瑰舰銆傚綋鐒讹紝鐐稿脊鐨勫舰鐘跺緢绠€鍗曪紝鎴戜滑鍙互閫氳繃ps鎶婂浘灞傝鍑烘潵銆?.淇敼绉诲姩鏃剁殑瑙掑害銆傛湰鑺傚畬鏁翠唬鐮侊細https://github.com/hua1995116...2.鐐稿脊鐖嗙偢鎺ョ潃璇磋鐐稿脊鐖嗙偢鐨勬晥鏋溿€備笂闈㈣浜嗘兂鎹㈡垚lottie鍐欏姩鐢伙紝閭ｄ箞lottie鏄粈涔堬紵Lottie鏄竴涓彲浠ュ垎鏋愮敤AE鍒朵綔鐨勫姩鐢荤殑搴擄紙闇€瑕佺敤bodymovin瀵煎嚭鎴恓son鏍煎紡锛夛紝鏀寔web銆乮os銆乤ndroid鍜宺eactnative銆傚湪web绔紝lottie-web搴撳彲浠ヨВ鏋愬鍑虹殑鍔ㄧ敾json鏂囦欢锛屽皢鍔ㄧ敾浠vg鎴栬€卌anvas鐨勫舰寮忕粯鍒跺埌鎴戜滑鐨勯〉闈笂銆傜劧鍚庡幓https://lottiefiles.com/鎵句簡涓€涓猨son鐖嗙偢鏁堟灉鏂囦欢銆傝€屼笖瀹冪殑鍐欐硶涔熷緢绠€鍗曪紝鍙渶瑕佸紩鍏ottie锛岀劧鍚庤皟鐢╞odymovin.loadAnimation鏂规硶鍗冲彲銆?scriptsrc="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js">
鎵€浠ユ垜浠彧闇€瑕佸湪鎶涚墿绾垮畬鎴愬悗绔嬪嵆璋冪敤鐖嗙偢鏁堟灉鍗冲彲锛宼ween.js涔熶负鎴戞彁渚涗簡浜嬩欢鏂规硶onComplete銆傛垜浠彧闇€瑕佽鐖嗙偢鍔ㄧ敾鍦╫nComplete鍥炶皟涓紑濮嬨€倀ween.onComplete(function(){//鍐欑垎鐐稿姩鐢粆)鏈妭瀹屾暣浠ｇ爜锛歨ttps://github.com/hua1995116...3.宸村反鐖嗙偢浜?.1褰㈢姸鍜岀偢寮逛竴鏍枫€傜敤PS鍓嚭鈥滅矐绮戔€濃€滃壀鍑洪€忔槑灞傦紝灏辫繖鏍蜂簡銆傦紙鏈変竴鐐规瘺鍒烘病鍏崇郴锛屽疄闄呬究渚挎病閭ｄ箞澶э紝鎵€浠ユ瘺鍒轰笉瀹规槗鐪嬪嚭鏉ワ紝鍙互淇竴涓嬮€氳繃寰皟).feces{position:absolute;background-image:url(./feces.png);background-size:100%;background-position:center;background-repeat:no-repeat;width:80px;height:80px;transform-origin:center;}//鍒涘缓涓€涓勃渚垮厓绱爁unctioncreatefeces(scale=1){constfece=document.createElement('div');fece.className='feces';//鍥犱负绮究鏈変笉鍚屽昂瀵稿拰鏂瑰悜锛屽彇鍊间繚鐣檆onstsymbol=Math.random()>0.5?1:-1;fece.style.transform=`scale(${scale*1.1})rotate(${symbol*20*Math.random()}deg)`returnfece;}鍦?.2鐨勪綅缃紝鎴戜滑鍙互鐪嬪埌澶т究浠庤寮€鐨勫湴鏂归浜嗗嚭鏉ワ紝椋炲嚭鐨勫ぇ渚夸富瑕佹湁7涓紝涓棿涓€涓渶澶э紝绗簩涓叾浠栫殑绂讳腑蹇冭秺杩滆秺灏忥紝鎺掑垪鏂瑰紡绫讳技鍦嗗舰锛屼絾涓嶉偅涔堣鍒欍€傛墍浠ワ紝鎴戜滑鍙互鍏堢敤鏈€绠€鍗曠殑鏂瑰紡鏉ュ疄鐜帮紝灏辨槸鐢ㄤ竴涓渾鎶婂畠鍥磋捣鏉ャ€備竴涓渾鏄?60掳锛屾垜浠彧瑕佹妸瀹冨垎鎴?绛変唤灏卞彲浠ヤ簡銆傛垜浠懆鍥存€诲叡鏈?涓究渚匡紝鎵€浠ユ瘡涓究渚夸箣闂存湁60掳銆傜敱浜庢垜浠笂闈㈢殑鐐稿脊澶ц嚧鏄竴涓?00*300鐨勫尯鍩燂紝鎵€浠ユ垜鎶婁腑蹇冪殑鍧愭爣璁剧疆涓猴紙150,150锛夛紝鐒跺悗闅忔満鐢熸垚涓€涓?0~230鐨剎鐐规潵璁＄畻y鍊笺€傜‘瀹氬畬绗竴涓偣鍚庯紝鏈€鍚庢牴鎹瘡涓偣涔嬮棿鐨勫す瑙掍负60掳锛屽彲浠ヨ绠楀嚭鍓╀笅鐨?涓偣銆傜敱浜庣敤鍦嗗績鐐?150,150)浣滀负鍦嗗績姣旇緝楹荤儲锛屾墍浠ユ垜鎶婂渾蹇冪偣绉诲埌(0,0)杩涜璁＄畻锛屾渶鍚庢妸鎵€鏈夎绠楀嚭鏉ョ殑鐐圭Щ鍔ㄥ埌x杞村拰y杞翠笂150.//璁＄畻瑕佺敓鎴愮殑澶氫釜铔嬬硶鐨勪綅缃?/浼犲叆鐨勫弬鏁皀um涓鸿鐢熸垚鐨勮泲绯曚釜鏁癴unctionrandomPosition(num){constradius=80;//鍦嗗崐寰刢onstrandomX=Math.random()*radius//鍙栦粠0鍒板崐寰勭殑浠绘剰xconsty=Math.round(Math.sqrt(radius*radius-randomX*randomX));//纭畾鍦嗕笂绗竴璞￠檺涓虹殑鐐筩onstradian=Math.闃垮潶锛坹/randomX锛夛紱//璇ョ偣鐨勫姬搴﹀€糲onststep=Math.PI*2/num;//姣忓爢鐙楀睅鐨勫姬搴﹀€紃eturnnewArray(num).fill(0).map((item,index)=>{constr=(index*step+radian)//灏嗗姬搴﹁浆鎹负0-2*PIconsttr=r>Math.PI*2?r-Math.PI*2:r<0?r+Math.PI*2:r;return{x:radius*Math.sin(tr),y:radius*Math.cos(tr),}})}鐒跺悗鎴戜滑鎸夌収杩欎釜鎬濊矾鐢伙紝鐢讳簡6涓泲绯曪紝鐒跺悗鍒嗗埆鎶?50骞崇Щ鍒皒杞村拰y杞翠笂銆俽andomPosition(6).map(item=>({x:item.x+150,y:item.y+150}))//杩欓噷杩樺畾涔変簡6涓互涓婏紝鐪嬭捣鏉ユ湁鐐瑰鎬紝浣嗘槸閮芥槸閮戒竴鏍峰ぇ锛屾墍浠ユ垜浠渶瑕佸鐞嗗畠銆傛牴鎹鍦嗗績鐨勮窛绂荤缉鏀惧ぇ灏忥紝澶ц嚧鍐欎竴涓紝鍥犱负鍦嗙殑鍗婂緞鏄?0锛屾瘡澧炲姞80锛岃泲绯曠殑澶у皬灏变細鍙樻垚鍘熸潵鐨?/3銆俢onstdis=Math.sqrt((end.x-150)*(end.x-150)+(end.y-150)*(end.y-150));//鐢变簬姝ゆ椂宸茬粡骞崇Щ浜?50锛屾墍浠ラ渶瑕佽绠楄窛绂讳腑蹇冪偣鐨勮窛绂籧onstr=Math.pow(2/3,dis/length);//闇€瑕佺缉鏀剧殑姣斾緥浣嗘槸鍦ㄧ湡瀹炲満鏅腑锛屾垜浠殑鎽嗘斁浣嶇疆浼氭瘮杈冮殢鏈猴紝鎵€浠ユ垜缁欐瘡涓究渚跨殑浣嶇疆閮藉姞浜嗕竴涓殢鏈哄€硷紝涓績浼氭洿鍋忓悜宸︿笂瑙掞紝骞朵笖娣诲姞浜嗕竴瀹氱殑闅忔満鍊笺€俧unctionrandomPosition(num){...returnnewArray(num).fill(0).map((item,index)=>{constr=(index*step+radian)consttr=r>Math.PI*2?r-Math.PI*2:r<0?r+Math.PI*2:r;return{//娣诲姞闅忔満鍊紉:length*Math.sin(tr)+(Math.random()>0.5?1:-1)*10*Math.random(),y:length*Math.cos(tr)+(Math.random()>0.5?1:-1)*10*Math.random(),}})}3.3Angle鏈€鍚庢垜浠彧闇€瑕佷慨楗版瘡涓猵apa鐨勮搴﹀嵆鍙€俧unctioncreatefeces(scale){constfece=document.createElement('div');fece.className='绮究';constsymbol=Math.random()>0.5?1:-1;//鐢熸垚-20~20涔嬮棿鐨勯殢鏈鸿搴ece.style.transform=`scale(${scale})rotate(${symbol*20*Math.random()}deg)`fece.style.opacity='0';returnfece;}3.4杩欓噷鐨勫姩鐢荤被浼间簬鎵旂偢寮癸紝杩欓噷灏变笉璧樿堪浜嗐€傞渶瑕佽鏄庣殑鏄紝鐢变簬宸村反鍏堜粠鐐稿脊浣嶇疆鍑烘潵锛岀劧鍚庢參鎱笅鏉ワ紝鎵€浠ヨ繖閲岄渶瑕佺敤鍒颁袱涓猅ween鍔ㄧ敾銆?/鍒氬嚭鐜版椂鐨勫姩鐢伙紝浠庣垎鐐稿彛鍐插嚭鏉unctioninitFece(end){...conststart={x:0,y:100,z:0};//鐖嗗彛consttween=newTWEEN.Tween(start).to({...end,z:1},100).easing(TWEEN.Easing.Linear.None).onUpdate(function(){fece.style.setProperty('top',`${start.y}px`);fece.style.setProperty('left',`${start.x}px`);fece.style.setProperty('opacity',`${start.z}`);}).onComplete(function(){initDown(start,fece).start();//绐佺牬瀹屾垚鍚庯紝鎵ц涓嬭惤閫忔槑鍔ㄧ敾})returntween;}//涓嬭惤鍙橀€忔槑鍔ㄧ敾functioninitDown(start,fece){consts={y:start.y,o:1,};conste={y:start.y+80,o:0};consttween=newTWEEN.Tween(s).to(e,2000+500*Math.random()).easing(TWEEN.Easing.Quadratic.In).onUpdate(function(){fece.style.setProperty('top',`${s.y}px`);fece.style.setProperty('opacity',`${s.o}`);}).onComplete(function(){})returntween;}鏈€缁堟晥鏋滃畬鏁翠唬鐮佹湰鑺傚唴瀹癸細https://github.com/hua1995116...3.5灏忕粨鐢变簬鏈妭姣旇緝闀匡紝鎴戜滑鍏堢敤1=x虏+y虏鍦嗚建閬撴潵鎬荤粨涓€涓嬬煡璇嗘牴鎹抗绾跨殑鐗圭偣锛屽缓绔嬪垵濮嬩綅缃紝鐒跺悗鍔犲叆闅忔満鍊硷紝璁╂暣涓垎甯冪◢寰笉閭ｄ箞瑙勫垯銆備负铔嬬硶娣诲姞闅忔満瑙掑害锛屼娇涓ぎ铔嬬硶鏇村€惧悜浜庣垎鐐稿彛锛屽苟娣诲姞杩為攣鍔ㄧ敾鍑虹幇鍜屾帀钀姐€?.澶у鍙渶瑕侀渿鍔ㄨ繖涓姛鑳斤紝鐢ㄤ竴涓畝鍗曠殑css鍔ㄧ敾灏卞彲浠ユ悶瀹氾紝杩欓噷灏变笉璧樿堪浜嗐€傛湁鍏磋叮鐨勫彲浠ヨ嚜宸卞疄鐜帮紝鏀惧湪璇勮閲屻€傛渶鍚庯紝绾睘濂藉鎺㈢储杩欎釜鏁堟灉锛屼笉鏄?00%杩樺師鍔ㄧ敾锛屾湰浜轰篃涓嶆槸涓撲笟浜哄＋锛岀涓€娆′娇鐢ㄤ笂杩板簱鍐欏姩鐢伙紝鍐欑殑涓嶄竴瀹氬ソ涓撲笟锛堟湁闂娆㈣繋鍦ㄨ瘎璁哄尯鎸囧嚭閿欒锛夈€備絾鎴戝笇鏈涜兘涓烘偍鎻愪緵涓€涓湁瓒ｇ殑鎯虫硶銆傚仛鍔ㄧ敾鍙互浣跨敤lottie鍜宼ween杩欎袱涓簱锛屾妸澶嶆潅鐨勯棶棰樼畝鍗曞寲锛屾妸涓嶈鍒欑殑涓滆タ鍙樻垚瑙勫垯鐨勪笢瑗匡紝鎶婂鏉傜殑涓滆タ鍙樻垚绠€鍗曠殑涓滆タ銆傛槸鐨勶紝鏈€鍚庝竴姝ユ鍔犳繁銆傚悓鏃舵劅璋㈡婧牎瀵规湰鏂囥€傚洖澶寸湅鐪嬩綔鑰呬箣鍓嶇殑楂樿禐鏂囩珷锛岃涓嶅畾杩樿兘鏀惰幏鏇村鍛紒2021鍓嶇瀛︿範涔嬭矾涔﹀崟-鑷垜鎴愰暱涔嬭矾锛?70+鐐硅禐鏁欎綘瀹炵幇寰俊8.0鈥滅垎鈥濔煄夌壒鏁堬細400+鐐硅禐浠庣牬瑙ｄ竴涓璁＄綉绔欒皥鍓嶇姘村嵃锛堣缁嗭級鏁欑▼锛夛細790+鎴戝湪鐜嬭€呰崳鑰€鍓嶇鏂版墜鏀荤暐涓婂鍒扮殑鐐硅禐鏁帮細260+杩欑瘒鏂囩珷甯︿綘灞傚眰瑙ｅ紑鈥滄枃浠朵笅杞解€濈殑濂ョ锛?40+鐐硅禐10璺ㄥ煙瑙ｅ喅鏂规锛堟湁缁濇嫑锛夛細940+鐐硅禐缁撹鉂わ笍鍏虫敞+鐐硅禐+鏀惰棌+璇勮+杞彂鉂わ笍锛屽師鍒涗笉鏄擄紝榧撳姳浣滆€呭垱浣滄洿濂界殑鏂囩珷鍏虫敞鍏紬鍙风椋庣殑鎵嬭锛屼竴涓墠绔笓娉ㄤ簬鍓嶇闈㈣瘯銆佸伐绋嬪拰寮€婧愮殑鍏紬鍙?/p>
