鍓嶈█澶у濂斤紝鎴戞槸webfansplz銆傛湰鏂囧氨鏄垎浜浣曚娇鐢╒ue.js瀹炵幇涓€涓懡浠よ璐悆铔囨父鎴忥紙temir-snake-game锛夈€傛兂蹇呭ぇ瀹跺璐悆铔囨父鎴忛兘涓嶉檶鐢熴€備娇鐢╒ue.js瀹炵幇缃戦〉鐗堢殑璐悆铔囨父鎴忎技涔庡苟涓嶉毦锛岄偅濡傛灉鏄懡浠よ鐗堝憿锛熶綘瀵瑰畠鐨勫疄鐜板師鐞嗘劅鍏磋叮鍚楋紵寮€濮嬪惂锛佸畨瑁卬pminstalltemir-snake-game-g鍚姩娓告垙骞跺湪缁堢绐楀彛涓繍琛宼emir-sg銆俉indows绯荤粺锛屾帹鑽愪娇鐢ㄨ秴绾х粓绔繘琛屼綋楠屻€傚皢Vue娓叉煋鍒板懡浠よ鐣岄潰浣跨敤Vue.js瀹炵幇鍛戒护琛岃椽鍚冭泧娓告垙锛岄鍏堟剰鍛崇潃鎴戜滑闇€瑕佸皢Vue.js娓叉煋鍒板懡浠よ鐣岄潰锛屾墠鑳藉紑濮嬪叿浣撶殑娓告垙瀹炵幇銆傛垜浠粡甯镐娇鐢╒ue.js鏉ョ紪鍐橶eb搴旂敤绋嬪簭锛屼絾Vue鐨勮兘鍔涗笉浠呴檺浜庢锛屽畠鐨勮垶鍙颁篃涓嶅眬闄愪簬娴忚鍣ㄣ€俈ue3鍏锋湁浼樼鐨勮法骞冲彴鑳藉姏锛屾垜浠彲浠ラ€氳繃createRendererAPI鍒涘缓鑷畾涔夋覆鏌撳櫒锛屽湪瀹夸富鐜涓垱寤哄搴旂殑Node鍜孍lement锛屽鍏冪礌杩涜澧炲垹鏀规煡銆傚緱鐩婁簬Vue3浼樼鐨勮法骞冲彴鑳藉姏锛屾垜瀹炵幇浜員emir锛屼竴涓敤鎴稸ue缁勪欢锛岀敤浜庣紪鍐欏懡浠よ鐣岄潰搴旂敤鐨勫伐鍏枫€傚紑鍙戣€呭彧闇€瑕佷娇鐢╒ue缂栧啓鍛戒护琛屽簲鐢ㄧ▼搴忥紝鏃犻渶浠讳綍棰濆鐨勫涔犳垚鏈€傚浜嗭紝杩樺€煎緱涓€鎻愮殑鏄紝瀹冭繕鏀寔HMR~Temir杩欓噷涓嶅仛璇︾粏浠嬬粛锛屾劅鍏磋叮鐨勭闉嬪彲浠ュ幓Github鏌ョ湅浠嬬粛鎴栬€呴槄璇讳娇鐢╒ue.js鍐欏懡浠よ鐣岄潰鐨勬枃绔犮€傝椽鍚冭泧娓告垙瀹炵幇鏈変簡閾佺背灏旓紝鎴戜滑灏辨湁浜嗕娇鐢╒ue.js缂栧啓鍛戒护琛屾父鎴忕殑鏉′欢锛屾帴涓嬫潵鎴戜滑鏉ョ湅鐪嬫父鎴忕殑鍏蜂綋瀹炵幇锛氬疄鐜版媶瑙ｉ鍏堢畝鍗曟媶瑙ｄ竴涓嬫父鎴忓疄鐜般€備粠鍏冪礌+閫昏緫鐨勮搴︼紝鍙互绠€鍗曞垎涓哄嚑涓儴鍒嗭細绔炴妧骞冲彴铔囩殑鍏冪礌鍒濆鍖栫埇琛屽拰椋熺墿鐢熸垚閮介渶瑕佷緷璧栧潗鏍囥€傛渶绠€鍗曠殑鍧愭爣鍏跺疄鍙渶瑕佷竴涓储寮曞€笺€傚洜姝わ紝arena鐨勬瀯鎴愪篃寰堢畝鍗曪紝鐢卞緢澶氬皬鏂瑰潡锛堣繖閲岀敤猬涜〃绀猴級缁勬垚锛屾瘡涓柟鍧楀搴斾竴涓潗鏍囷紙Index锛夛紝鎴戜滑瑕佸仛鐨勬槸涓€涓?8*28鐨刟rena锛屾墍浠ュ畠绱㈠紩闆嗘槸(0~783).constbasic=28constbackgroundIcon='猬?constarena=ref([])functioninitArena(){arena.value=Array.from({lengthth:basic*basic},()=>backgroundIcon)}Snake鎴戜滑涔嬪墠鎻愬埌杩囧潗鏍囩殑姒傚康锛岀粍鎴愯泧韬殑灏辨槸涓€绯诲垪鏈夎寰嬬殑鍧愭爣銆俢onstsnakeIcon='馃煣'//鍧愭爣(index)30,29闀垮害涓?鐨勮泧浣揷onstsnakeBody=ref([30,29])椋熺墿food鐨勭敓鎴愬叾瀹炴槸涓€涓殢鏈虹殑鍧愭爣(index)锛屼絾鏄簲璇ラ渶瑕佹敞鎰忕殑鏄紝鎴戜滑闇€瑕侀伩寮€铔囦綋鏈韩鐨勫潗鏍囥€俢onstfoodIcon='馃崡'//椋熺墿鍧愭爣constfoodCoord=ref(77)//鐢熸垚椋熺墿鍑芥暟generateFood(){constfood=Math.floor(Math.random()*basic*basic)//涓庤泧浣撳啿绐侊紝regenerateif(snakeBody.value.includes(food)){generateFood()return}foodCoord.value=food}鍒濆鍖栫殑鍏冪礌鏄繖鏍风殑馃憞锛歋nakecrawling铔囩殑鐖閫昏緫鏈変袱涓熀鏈厓绱狅紝鏂瑰悜+姝ラ銆傚墠闈㈡垜浠彁鍒扮珵鎶€鍦虹殑鏋勬垚鏄竴涓?8*28鐨勮鍒楀紡缁撴瀯锛屾墍浠ユ柟鍚戝拰姝ユ暟鐨勬槧灏勫氨姣旇緝娓呮浜嗭細constmap={left:-1,right:1,top:-28,bottom:28}鏈変簡涓や釜鍩烘湰鍏冪礌锛屾垜浠氨鍙互寰楀埌姣忔鎶撳彇鐨勪笅涓€涓潗鏍囥€傛垜浠彧闇€瑕佺粰铔囧ご鍔犱笂瀵瑰簲鐨勫潗鏍囷紝鍘绘帀铔囧熬鐨勫潗鏍囧氨鍙互瀹炵幇铔囩埇琛岀殑鏁堟灉銆俧unctionmove(){consth=snakeBody.value[0]//璁＄畻涓嬩竴娆＄埇琛岀殑鍧愭爣骞跺皢鍏舵坊鍔犲埌铔囧ごhead.value=h+direction.valuesnakeBody.value.unshift(head.value)//鍚冮鐗╋紝閲嶆柊鐢熸垚if(head.value===foodCoord.value){generateFood()}//鍙渶瑕佸湪娌℃湁椋熺墿琚悆鎺夌殑鏃跺€欏幓鎺夎泧灏緀lse{snakeBody.value.pop()}}瓒婄晫閫昏緫Snake鐨刧ame-over瑙勫垯鍒ゆ柇铔囧湪鐖鐨勬椂鍊欏ご璺充簡銆傝寖鍥达紙杩欓噷鐨勯檺鍒舵寚鐨勬槸瓒呭嚭绔炴妧鍦虹殑鑼冨洿锛夋垨鑰呮帴瑙﹀埌铔囪韩銆俧unctionisOutOfRange(h:number){//1.铔囧ご纰板埌铔囪韩returnsnakeBody.value.indexOf(h,1)>0//2.铔囧ご瓒呭嚭绔炴妧鍦洪《閮▅|h<0//3.铔囧ご瓒呭嚭浜嗙珵鎶€鍦哄簳閮▅|h>basic*basic-1//4.铔囧ご鍦ㄧ珵鎶€鍦哄彸渚т箣澶東|(direction.value===1&&h%basic===0)//5.铔囧ご瓒呭嚭绔炴妧鍦哄乏渚|(direction.value===-1&&h%basic===basic-1)}鏂瑰悜鎺у埗璐悆铔囨父鎴忔牳蹇冩搷浣滈€昏緫鏄搷绾佃泧鐨勬柟鍚戝幓鎶撻鐗┿€傞偅涔堟垜浠渶瑕佸仛鐨勫氨鏄崟鑾风敤鎴锋柟鍚戦敭鍒囨崲鏂瑰悜鐨勮緭鍏ャ€俆emir鎻愪緵浜唘seInput鍑芥暟鏉ョ洃鍚敤鎴风殑杈撳叆銆俰mport{useInput}from'@temir/core'useInput(onKeyBoard,{isActive:true})functiononKeyBoard(_,keys){const{upArrow,downArrow,leftArrow,rightArrow}=keysconstd={[+leftArrow]:-1,[+rightArrow]:1,[+upArrow]:-basic,[+downArrow]:basic,}[1]??direction.valuedirection.value=(snakeBody.value[1]-snakeBody.value[0]===d)?direction.value:d}UI缁樺埗鍏充簬UI缁樺埗鍜屾覆鏌撻搧绫冲皵鎻愪緵浜嗕竴浜沄ue缁勪欢锛屾垜浠彧闇€瑕佸儚鏋勫缓Flexbox甯冨眬涓€鏍锋瀯寤虹粓绔疷I锛?scriptlang="ts"setup>import{computed}from'vue'import{TBox,TText}from'@temir/core'import{useGame}from'./composables'importHeaderfrom'./components/Header.vue'importHomefrom'./components/Home.vue'import娓告垙鏉ヨ嚜'./components/Game.vue'浠?./components/GameOver.vue'瀵煎叆GameOver浠?./components/Exit.vue'瀵煎叆閫€鍑篶onst{playStatus}=useGame()constactiveComponent=computed(()=>{return{unplayed:Home,playing:Game,over:GameOver,exit:Exit,}[playStatus.value]})杩欓噷锛実reedy鐨勫疄鐜拌泧鐨勬晠浜嬬粨鏉熶簡銆傚鏋滃鍏蜂綋瀹炵幇鎰熷叴瓒ｏ紝鍙互鏌ョ湅婧愮爜銆傚鏋滄垜鐨勬枃绔犲拰椤圭洰瀵逛綘鏈夊惎鍙戝拰甯姪锛岃缁欎釜star鏀寔浣滆€呪湆锛?/p>
