当前位置：首页 > Web前端 > HTML5

HTML游戏2——2048网页版（附完整源码）

时间：2023-04-05 20:25:04 HTML5

馃拏缃戠珯鎺ㄨ崘锛氥€愮绾ф簮鐮佽祫婧愮綉銆戙€愭崟楸兼父鎴忋€戰煠熼瓒ｅ菇榛樼殑鍓嶇瀛︿範璇剧▼锛氿煈夎叮鍛冲涔?8渚嬪墠绔煉呮兂鎵惧彲浠ヤ竴璧峰涔犱氦娴侊紝涓€璧烽挀楸煎垝妗ㄧ殑灏忎紮浼达紝璇风偣鍑汇€愰挀楸煎涔犱氦娴佺兢銆戰煉厤璐瑰疄鐢ㄧ殑璁＄畻鏈虹浉鍏崇煡璇嗛搴擄細馃憠蹇潵瀹夊埄缁欏ぇ瀹朵竴涓厤璐瑰疄鐢ㄧ殑鍓嶇鍒烽锛堥潰鎺堢簿娉夛級缃戝潃锛岎煈夌偣鍑昏烦杞埌缃戝潃銆傚湪绾挎紨绀哄湴鍧€锛歨ttps://code.haiyong.site/moyu/2048.html鏂囨湯涔熷彲鍏嶈垂鑾峰彇婧愮爜鉁ㄥ墠瑷€馃暪锔忔湰鏂囧凡鏀跺綍浜庰煄栵笍100涓狧TML娓告垙涓撴爮锛?00HTML娓告垙馃幃鐩墠涓婄嚎100+娆惧皬娓告垙锛屾簮鐮佹寔缁洿鏂颁腑锛屽墠100鍚嶅厤璐硅闃咃紝鍏堝埌鍏堝緱銆傪煇闃呬笓鏍忥紝鍗冲彲闃呰100绡嘓TML灏忔父鎴忔枃绔狅紱涔熷彲浠ョ鑱婇鍙?00娆惧皬娓告垙婧愮爜銆傗湪椤圭洰鐩綍缁撴瀯鐨勫熀鏈粨鏋勫涓嬶細鈹溾攢鈹€css鈹傗敂鈹€鈹€style.css鈹溾攢鈹€js鈹傗敂鈹€鈹€script.js鈹斺攢鈹€index.html鍦ㄦ湰鏁欑▼涓紝鎴戝皢甯︿綘鍒颁娇鐢℉TML銆丆SS鍜孞S鍒朵綔涓€涓?048缃戦〉娓告垙銆傛湰鑺傜ず渚嬪皢瀹炵幇濡備笅鏁堟灉锛欻TML婧愮爜浣跨敤

娣诲姞head2048鏍囬

2048

鏉ヨ嚜娴风敤鉁?/a>

浣滅敤锛氭坊鍔犲鍣╟ontainer

娣诲姞涓讳綋閮ㄥ垎娓告垙鐜╂硶锛氫娇鐢ㄩ敭鐩樻柟鍚戦敭绉诲姩鏁板瓧绔嬫柟浣撱€備袱涓浉閭荤殑鐩稿悓鏁板瓧鐨勬柟鍧楀彲浠ュ悎骞朵负涓€涓紒

鍘嗗彶鏈€浣筹細0

鍒嗘暟锛?divclass="score">0

娓告垙缁撴潫馃檲鍐嶈瘯涓€娆?/button>鏁堟灉锛氶噸鍚父鎴?divclass="not-recommended">閲嶅惎娓告垙搴曢儴瀵艰埅鏍?footer>鍒涘缓鑰?ahref="https://haiyong.site/about">娴风敤2048鏇村娓告垙锛?ahref="https://code.haiyong.site/moyu">鎽搁奔浣滅敤锛欳SS婧愪唬鐮乭eader閮ㄥ垎header{color:#F8FFE5;text-align:center;}headerspan{display:inline-block;妗嗗ぇ灏忥細杈规妗嗭紱瀹藉害锛?rem锛涢珮搴︼細4rem锛涜楂橈細4rem锛涗繚璇侀噾锛?0.4rem锛涜儗鏅細#FFC43D;}濯掍綋鏌ヨ锛欯mediascreenand(max-width:440px){headerspan{width:3rem;楂樺害锛?rem锛涜楂橈細3rem锛泒}@mediascreenand(max-width:375px){headerspan{width:2.5rem;楂樺害锛?.5rem锛涜楂橈細2.5rem锛泒}containercontainer.container{杈硅窛锛?鑷姩锛涘簳閮ㄥ～鍏咃細3.5rem锛?webkit-box-flex:1;寮规€э細1锛涘脊鎬э細1锛涘搴︼細100%锛涙渶澶у搴︼細550px锛涙枃鏈榻愶細灞呬腑锛泒鏍囬銆傚鍣▄濉厖锛?;濉厖锛?rem4rem锛沵ax-width:900px;}@mediascreenand(max-width:440px){header.container{padding:1rem2rem;}}搴曢儴瀵艰埅鏍忛〉鑴歿background-color:#158ca5;搴曢儴锛?锛涙闃村奖锛?px0px10px5pxrgba(0,0,0,0.5);鐧介鑹?鏄剧ず锛氬脊鎬э紱璇佹槑鍐呭锛氱┖闂村懆鍥达紱宸︼細0锛涘～鍏咃細15px锛涗綅缃細鍥哄畾锛況ight:0;}footera{color:white;}footer.center{justify-content:center;}JS婧愮爜杩欓噷鎻愪緵浜嗗緢澶歫s浠ｇ爜锛屽畬鏁寸殑婧愮爜鍙互鍦ㄦ枃绔犵粨灏緁unctionhandleKeypress(evt){var淇グ绗?event.altKey||浜嬩欢.ctrlKey||浜嬩欢.metaKey||浜嬩欢.shiftKey锛泇arwhichKey=event.which;varprevGame=[].concat(娓告垙);濡傛灉锛堬紒淇グ绗︼級{event.preventDefault锛堬級;switch(whichKey){妗堜緥37:game=shiftGameLeft(game);浼戞伅;妗堜緥38:game=shiftGameUp(game);浼戞伅;妗堜緥39:game=shiftGameRight(game);浼戞伅;妗堜緥40:game=shiftGameDown(game);浼戞伅;}game=game.map(function(tile,index){if(tile){return_extends({},tile,{index:index});}else{returnnull;}});娣诲姞闅忔満鏁帮紙锛夛紱鏇存柊DOM锛堜笂涓€涓父鎴忥紝娓告垙锛夛紱if(gameOver()){setTimeout(function(){endDiv.classList.add('active');},800);杩斿洖;}}}functionnewGameStart(){document.getElementById('tile-container').innerHTML='';endDiv.classList.remove('active');寰楀垎=0锛涘垎鏁癉iv.innerHTML=寰楀垎锛涘垵濮嬪寲娓告垙锛堬級锛涚粯鍒惰儗鏅紙锛夛紱varpreviousGame=[].concat(娓告垙);娣诲姞闅忔満鏁帮紙锛夛紱娣诲姞闅忔満鏁帮紙锛夛紱updateDOM(previousGame,game);}newGameStart();婧愮爜涓嬭浇1.CSDN璧勬簮涓嬭浇锛歨ttps://download.csdn.net/download/qq_44273429/868155222銆傚墠杈堣祫婧愮綉涓嬭浇锛堜环鏍兼洿浼樻儬锛夛細https://code.haiyong.site/372/

上一篇：查看重复页面请求的经验

下一篇：CSS函数百科

HTML游戏2——2048网页版（附完整源码）相关文章

最新推荐

猜你喜欢