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

使用HTML、CSS、JavaScript制作一个简单的井字游戏

时间：2023-03-28 17:08:06 HTML

馃寠浣滆€呬富椤碉細娴峰媷馃寠浣滆€呯畝浠嬶細馃弳CSDN鍏ㄦ爤浼樿川鍒涗綔鑰咃紝馃HDZ鏍稿績鍥㈤槦鎴愬憳馃寠绮変笣绂忓埄锛氱矇涓濆洟閫佹瘡鍛ㄥ叚鏈功锛屾瘡鏈堥€佸悇绉嶅皬绀肩墿鐢╦avascript鍒涘缓娓告垙鏄渶濂界帺鐨勫涔犳柟寮忋€傚畠璁╀綘淇濇寔鍔ㄥ姏锛岃繖瀵逛簬瀛︿範缃戠粶寮€鍙戠瓑澶嶆潅鎶€鑳借嚦鍏抽噸瑕併€傛澶栵紝鎮ㄥ彲浠ュ拰鏈嬪弸涓€璧风帺锛屾垨鑰呭彧鏄悜浠栦滑灞曠ず鎮ㄥ埗浣滅殑灏忎笢瑗匡紝浠栦滑涔熶細鐜╁緱寰堝紑蹇冦€傚湪浠婂ぉ鐨勫崥鏂囦腑锛屾垜浠皢浣跨敤HTML銆丆SS鍜孞avascript鍒涘缓涓€涓簳瀛楁父鎴忋€傛紨绀虹綉鍧€锛歨ttp://haiyong.site/xxoo2瀹炵幇HTML棣栧厛鍦╤ead閮ㄥ垎锛屾垜灏嗗寘鎷垜浠◢鍚庡垱寤虹殑css鍜宩avascript鏂囦欢銆傛垜杩樻坊鍔犱簡涓€涓悕涓篒tim鐨凣oogle瀛椾綋銆?linkrel="stylesheet"href="style.css">HTML鐨勪富浣撳皢鐩稿綋绠€鍗曘€備负浜嗗寘瑁呮墍鏈夊唴瀹癸紝鎴戝皢浣跨敤涓€涓富鏍囩锛屽苟涓哄叾搴旂敤绫昏儗鏅€傚湪涓诲寘瑁呭唴锛屾垜浠皢鏈変簲涓儴鍒嗐€傜涓€閮ㄥ垎灏嗗彧鍖呭惈鎴戜滑鐨勬爣棰榟1銆傜浜岄儴鍒嗗皢鏄剧ず杞埌璋佷簡銆傚湪鏄剧ず涓紝鎴戜滑鏈変竴涓寘鍚玐鎴朞鐨勮法搴︼紝鍏蜂綋鍙栧喅浜庡綋鍓嶇敤鎴枫€傛垜浠皢璇ョ被搴旂敤浜庢鑼冨洿浠ュ鏂囨湰杩涜鐫€鑹层€傜涓夐儴鍒嗘槸鏀剧疆娓告垙鏉跨殑閮ㄥ垎銆傚畠鏈変竴涓鍣ㄧ被锛屾墍浠ユ垜浠彲浠ユ纭斁缃摲鐮栥€傚湪鏈妭涓紝鎴戜滑鏈?涓猟iv锛屽畠浠皢鍏呭綋鏉垮唴鐨勫浘鍧椼€傜鍥涢儴鍒嗚礋璐ｅ叕甯冩瘮璧涙渶缁堢粨鏋溿€傚畠榛樿涓虹┖锛屾垜浠皢閫氳繃javascript淇敼瀹冪殑鍐呭銆傛渶鍚庝竴閮ㄥ垎灏嗗寘鍚垜浠殑鎺т欢锛屽叾涓寘鍚竴涓噸鏂板惎鍔ㄦ寜閽€?mainclass="background">鈥嬧€?sectionclass="title">

浜曞瓧娓告垙

鐜╁X鐨勫洖褰?/section>

閲嶆柊寮€濮?/button></main>娣诲姞CSS鎴戜笉浼氳缁嗕粙缁嶆瘡涓€琛孋SS锛屼絾鎮ㄥ彲浠ュ湪婧愪唬鐮佷腑鏌ョ湅瀹屾暣浠ｇ爜棣栧厛锛屾垜灏嗗垱寤簊tyle.css鏂囦欢骞跺垹闄や换浣曟祻瑙堝櫒瀹氫箟鐨勮竟璺濆拰濉厖锛屽苟涓烘垜鍦℉TML涓寘鍚殑鏁翠釜鏂囨。璁剧疆Google瀛椾綋娣诲姞鏂版牱寮忋€?{濉厖锛?锛涗繚璇侀噾锛?锛沠ont-family:'Itim',cursive;}鎴戜滑蹇呴』娣诲姞鐨勪笅涓€涓噸瑕佺殑浜嬫儏鏄垜浠殑钁ｄ簨浼氱殑椋庢牸銆傛垜浠皢浣跨敤CSSGrid鏉ュ垱寤洪潰鏉裤€傛垜浠彲浠ラ€氳繃涓哄垪鍜岃鎻愪緵3鍊?3%鐨勭┖闂存潵灏嗗鍣ㄥ垎鎴愪袱鍗娿€傛垜浠皢閫氳繃璁剧疆鏈€澶у搴﹀拰杈硅窛鏉ヤ娇瀹瑰櫒灞呬腑锛?auto锛?.container{淇濊瘉閲戯細0鑷姩锛涙樉绀猴細缃戞牸锛涚綉鏍兼ā鏉垮垪锛?3%33%33%锛涚綉鏍兼ā鏉胯锛?3%33%33%锛沵ax-width:300px;}鎺ヤ笅鏉ワ紝鎴戜滑灏嗕负妫嬬洏鍐呯殑鍥惧潡娣诲姞鏍峰紡銆傛垜浠皢搴旂敤涓€涓皬鐨勭櫧鑹茶竟妗嗗苟灏嗘渶灏忓搴﹀拰楂樺害璁剧疆涓?00鍍忕礌銆傛垜浠皢浣跨敤flexbox灏嗗唴瀹瑰眳涓紝骞跺皢justify-content鍜宎lign-items璁剧疆涓哄眳涓€傛垜浠皢缁欏畠涓€涓ぇ瀛椾綋骞跺簲鐢╟ursor:pointer浠ヤ究鐢ㄦ埛鐭ラ亾璇ュ瓧娈垫槸鍙偣鍑荤殑銆?tile{杈规锛?px绾櫧鑹诧紱鏈€灏忓搴︼細100px锛涙渶灏忛珮搴︼細100px锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱瀛椾綋澶у皬锛?0px锛沜ursor:pointer;}鎴戜娇鐢ㄤ袱绉嶄笉鍚岀殑棰滆壊鏉ユ洿濂藉湴鍖哄垎涓や釜鐜╁銆備负姝わ紝鎴戝垱寤轰簡涓や釜瀹炵敤绋嬪簭绫汇€傜帺瀹禭鐨勯鑹叉槸缁胯壊锛岃€岀帺瀹禣鐨勯鑹叉槸钃濊壊銆?playerX{color:#09C372;}.playerO{color:#498AFB;}瀹炵幇浜咼avascript閮ㄥ垎锛屽洜涓烘垜浠湪涓寘鍚簡javascript鏂囦欢銆傝繖鏄繀闇€鐨勶紝鍥犱负鎴戜滑鐨勮剼鏈皢鍦ㄦ祻瑙堝櫒瑙ｆ瀽HTML鏂囨湰涔嬪墠鍔犺浇銆傚鏋滄偍涓嶆兂鍦ㄦ鍑芥暟涓寘瑁呮墍鏈夊唴瀹癸紝璇烽殢鎰忓悜鑴氭湰鏍囩娣诲姞寤惰繜鎴栧皢鑴氭湰鏍囩绉诲姩鍒癰ody.window.addEventListener('DOMContentLoaded',()=>{});棣栧厛锛屾垜浠皢淇濆瓨瀵笵OM鑺傜偣鐨勫紩鐢ㄣ€傛垜浠皢浣跨敤document.querySelectorAll()銆傛垜浠兂瑕佷竴涓暟缁勶紝浣嗘槸杩欎釜鍑芥暟杩斿洖涓€涓狽odeList锛屾墍浠ユ垜浠繀椤讳娇鐢ˋrray.from()銆傛垜浠繕灏嗚幏寰楀鎾斁鍣ㄦ樉绀哄睆銆侀噸缃寜閽拰鎾煶鍛樼殑寮曠敤銆俢onsttiles=Array.from(document.querySelectorAll('.tile'));constplayerDisplay=document.querySelector('.display-player');constresetButton=document.querySelector('#reset');const鎾煶鍛?鏂囨。.querySelector('.announcer');鎺ヤ笅鏉ワ紝鎴戜滑灏嗘坊鍔犳帶鍒舵父鎴忔墍闇€鐨勫叏灞€鍙橀噺銆傛垜浠皢鐢ㄤ竴涓寘鍚節涓┖瀛楃涓茬殑鏁扮粍鏉ュ垵濮嬪寲涓€涓鐩樸€傝繖灏嗕负妫嬬洏涓婄殑姣忎釜鍥惧潡淇濆瓨XabdO鍊笺€傛垜浠皢鏈変竴涓猚urrentPlayer淇濆瓨褰撳墠鍥炲悎鐨勬椿璺冪帺瀹剁殑鏃楀笢銆俰sGameActive鍙橀噺灏嗕繚鎸佷负鐪燂紝鐩村埌鏈変汉鑾疯儨鎴栨父鎴忎互骞冲眬缁撴潫銆傚湪杩欎簺鎯呭喌涓嬶紝鎴戜滑浼氬皢鍏惰缃负false锛屼互渚垮墿浣欑殑鍥惧潡鍦ㄩ噸缃箣鍓嶅浜庨潪娲诲姩鐘舵€併€傛垜浠湁涓変釜甯搁噺浠ｈ〃娓告垙缁撴潫鐘舵€併€傛垜浠娇鐢ㄨ繖浜涘父閲忔潵閬垮厤鎷煎啓閿欒銆傝board=['','','','','','','','',''];璁ヽurrentPlayer='X';璁﹊sGameActive=true;constPLAYERX_WON='PLAYERX_WON';constPLAYERO_WON='PLAYERO_WON';constTIE='TIE';鍦ㄤ笅涓€姝ヤ腑锛屾垜浠皢鍦ㄦ鐩樹笂瀛樺偍鎵€鏈夎幏鑳滀綅缃€傚湪姣忎釜瀛愭暟缁勪腑锛屾垜浠皢瀛樺偍鍙互璧㈠緱姣旇禌鐨勪笁涓綅缃殑绱㈠紩銆傛墍浠ヨ繖涓猍0,1,2]浠ｈ〃绗竴鏉℃按骞崇嚎琚帺瀹跺崰鎹殑鎯呭喌銆傛垜浠皢浣跨敤杩欎釜鏁扮粍鏉ュ喅瀹氭垜浠槸鍚︽湁璧㈠銆?*妫嬬洏鍐呯殑绱㈠紩[0][1][2][3][4][5][6][7][8]*/constwinningConditions=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];鐜板湪鎴戜滑灏嗙紪鍐欎竴浜涘疄鐢ㄥ嚱鏁般€傚湪isValidAction鍑芥暟涓紝鎴戜滑灏嗗喅瀹氱敤鎴锋槸鍚﹁鎵ц鏈夋晥鎿嶄綔銆傚鏋渢ile鐨勫唴閮ㄦ枃鏈槸XorO锛屽垯杩斿洖false锛屽洜涓烘搷浣滄棤鏁堬紝鍚﹀垯tile涓虹┖锛屽洜姝ゆ搷浣滄湁鏁堛€俢onstisValidAction=(tile)=>{if(tile.innerText==='X'||tile.innerText==='O'){杩斿洖鍋囷紱}杩斿洖鐪燂紱}锛涗笅涓€涓晥鐢ㄥ嚱鏁板皢闈炲父绠€鍗曘€傚湪姝ゅ嚱鏁颁腑锛屾垜浠皢鎺ユ敹涓€涓储寮曚綔涓哄弬鏁帮紝骞跺皢妫嬬洏鏁扮粍涓殑鐩稿簲鍏冪礌璁剧疆涓哄綋鍓嶇帺瀹剁殑绗﹀彿銆俢onstupdateBoard=(index)=>{board[index]=currentPlayer;}鎴戜滑灏嗙紪鍐欎竴涓皬鍑芥暟鏉ュ鐞嗙帺瀹剁殑鍙樺寲銆傚湪杩欎釜鍑芥暟涓紝鎴戜滑灏嗛鍏堜粠playerDisplay涓幏鍙栨ā鏉挎枃瀛梡layer${currentPlayer}銆係tring灏嗘牴鎹綋鍓嶆挱鏀惧櫒鍙樹负playerX鎴杙layerO銆傛帴涓嬫潵锛屾垜浠皢浣跨敤涓夊厓琛ㄨ揪寮忔潵鏇存敼褰撳墠鐜╁鐨勫€笺€傚鏋滄槸X锛屽畠灏嗘槸O锛屽惁鍒欏畠灏嗘槸X銆傜幇鍦ㄦ垜浠凡缁忔洿鏀逛簡鐢ㄦ埛鍊硷紝鎴戜滑闇€瑕佹洿鏂皃layerDisplay鐨刬nnerText骞跺簲鐢ㄦ柊鐨勬挱鏀惧櫒绫汇€俢onstchangePlayer=()=>{playerDisplay.classList.remove(`player${currentPlayer}`);褰撳墠鎾斁鍣?褰撳墠鎾斁鍣?=='X'?'O':'X';playerDisplay.innerText=currentPlayer;playerDisplay.classList.add(`player${currentPlayer}`);}鐜板湪鎴戜滑灏嗙紪鍐欏甯冩渶缁堟父鎴忕粨鏋滅殑鎾煶鍛樺嚱鏁般€傚畠灏嗘帴鏀舵畫灞€绫诲瀷骞舵牴鎹粨鏋滄洿鏂版挱闊冲憳DOM鑺傜偣鐨刬nnerText銆傚湪鏈€鍚庝竴琛屼腑锛屾垜浠繀椤诲垹闄ら殣钘忕被锛屽洜涓洪粯璁ゆ儏鍐典笅鎾煶鍛樺湪娓告垙缁撴潫涔嬪墠鏄殣钘忕殑銆俢onstannounce=(type)=>{switch(type){casePLAYERO_WON:announcer.innerHTML='PlayerO璧簡';浼戞伅;casePLAYERX_WON:announcer.innerHTML='PlayerX璧簡';浼戞伅;caseTIE:announcer.innerText='棰嗗甫';}announcer.classList.remove('闅愯棌');};鎺ヤ笅鏉ユ垜浠皢缂栧啓杩欎釜椤圭洰涓渶鏈夎叮鐨勯儴鍒嗕箣涓€鈥斺€旂粨鏋滆瘎浼般€傞鍏堬紝鎴戜滑灏嗗垱寤轰竴涓猺oundWon鍙橀噺骞跺皢鍏跺垵濮嬪寲涓篺alse銆傜劧鍚庢垜浠皢閬嶅巻winConditions鏁扮粍骞舵鏌ユ鐩樹笂鐨勬瘡涓幏鑳滄潯浠躲€備緥濡傦紝鍦ㄧ浜屾杩唬涓紝鎴戜滑灏嗘鏌ヨ繖浜涘€硷細board3銆乥oa鈥嬧€媟d4銆乥oard5銆傛垜浠繕浼氬仛涓€浜涗紭鍖栵紝濡傛灉浠讳綍瀛楁涓虹┖锛屾垜浠皢璋冪敤continue骞惰烦鍒颁笅涓€娆¤凯浠ｏ紝鍥犱负濡傛灉鑾疯儨鏉′欢涓湁绌虹墝锛屾偍灏嗕笉浼氳幏鑳溿€傚鏋滄墍鏈夊瓧娈甸兘鐩哥瓑锛岄偅涔堟垜浠氨鏈変簡璧㈠锛屽洜姝ゆ垜浠皢roundWon璁剧疆涓簍rue骞朵腑鏂璮or寰幆锛屽洜涓轰换浣曡繘涓€姝ョ殑杩唬閮戒細娴垂璁＄畻銆傚惊鐜粨鏉熷悗锛屾垜浠皢妫€鏌oundWon鍙橀噺鐨勫€硷紝濡傛灉涓虹湡锛屾垜浠皢瀹ｅ竷鑾疯儨鑰呭苟灏嗘父鎴忚缃负闈炴椿鍔ㄧ姸鎬併€傚鏋滄病鏈夎耽瀹讹紝鎴戜滑浼氭鏌ユ鐩樹笂鏄惁鏈夌┖鐗岋紝濡傛灉娌℃湁璧㈠涔熸病鏈夌┖鐗岋紝鎴戜滑灏卞甯冨钩灞€銆傚嚱鏁癶andleResultValidation(){璁﹔oundWon=false;for(leti=0;i<=7;i++){constwinCondition=winningConditions[i];}consta=board[winCondition[0]];constb=board[winCondition[1]];constc=board[winCondition[2]];濡傛灉(a===""||b===""||c===""){缁х画;}if(a===b&&b===c){roundWon=true;浼戞伅;}}if(roundWon){announce(currentPlayer==="X"?PLAYERX_WON:PLAYERO_WON);isGameActive=false;杩斿洖;}if(!board.includes(""))announce(TIE);}鎺ヤ笅鏉ユ垜浠皢澶勭悊鐢ㄦ埛鎿嶄綔銆傛鍑芥暟灏嗘帴鏀朵竴涓浘鍧楀拰涓€涓储寮曚綔涓哄弬鏁般€傚綋鐢ㄦ埛鍗曞嚮纾佽创鏃跺皢璋冪敤姝ゅ嚱鏁般€傞鍏堟垜浠渶瑕佹鏌ュ畠鏄惁鏄竴涓湁鏁堢殑鍔ㄤ綔锛屾垜浠繕灏嗘鏌ユ父鎴忓綋鍓嶆槸鍚﹀浜庢椿鍔ㄧ姸鎬併€傚鏋滀袱鑰呴兘涓虹湡锛屾垜浠敤褰撳墠鐜╁鐨勭鍙锋洿鏂板浘鍧楃殑innerText锛屾坊鍔犵浉搴旂殑绫诲苟鏇存柊妫嬬洏鏁扮粍銆傜幇鍦ㄤ竴鍒囬兘宸叉洿鏂帮紝鎴戜滑蹇呴』妫€鏌ユ父鎴忔槸鍚︾粨鏉燂紝鎵€浠ユ垜浠皟鐢╤andleResultValidation()銆傛渶鍚庯紝鎴戜滑蹇呴』璋冪敤changePlayer鏂规硶灏嗗洖鍚堜紶閫掔粰鍙︿竴涓帺瀹躲€俢onstuserAction=(tile,index)=>{if(isValidAction(tile)&&isGameActive){tile.innerText=currentPlayer;tile.classList.add(`player${currentPlayer}`);鏇存柊鏉匡紙绱㈠紩锛夛紱handleResultValidation();鏀瑰彉鐞冨憳锛堬級;}};涓轰簡璁╂父鎴忔甯歌繍琛岋紝鎴戜滑蹇呴』缁欐柟鍧楁坊鍔犱簨浠剁洃鍚櫒銆傛垜浠彲浠ラ€氳繃閬嶅巻鍥惧潡鏁扮粍骞朵负姣忎釜鍥惧潡娣诲姞涓€涓簨浠朵睛鍚櫒鏉ュ畬鎴愭鎿嶄綔銆傦紙涓轰簡鑾峰緱鏇村ソ鐨勬€ц兘锛屾垜浠彧鑳藉湪瀹瑰櫒涓坊鍔犱竴涓簨浠剁洃鍚櫒锛屽苟浣跨敤浜嬩欢鍐掓场鏉ユ崟鑾风埗绾т笂鐨勭摝鐗囩偣鍑伙紝浣嗘垜璁や负杩欏浜庡垵瀛﹁€呮潵璇存洿瀹规槗鐞嗚В銆傦級鐡︾墖銆俧orEach((tile,index)=>{tile.addEventListener('click',()=>userAction(tile,index));});鎴戜滑鍙敊杩囦簡涓€涓姛鑳斤細閲嶇疆娓告垙銆備负姝わ紝鎴戜滑灏嗙紪鍐欎竴涓猺esetBoard鍑芥暟銆傚湪姝ゅ嚱鏁颁腑锛屾垜浠皢妫嬬洏X璁剧疆涓虹敱涔濅釜绌哄瓧绗︿覆缁勬垚锛屽皢娓告垙璁剧疆涓烘椿鍔ㄧ姸鎬侊紝鍒犻櫎鎾煶鍛樺苟灏嗙帺瀹舵敼鍥烇紙鏍规嵁瀹氫箟X鎬绘槸寮€濮嬶級銆傛垜浠繀椤诲仛鐨勬渶鍚庝竴浠朵簨鏄亶鍘嗗浘鍧楀苟灏唅nnerText璁剧疆鍥炵┖瀛楃涓诧紝骞朵粠鍥惧潡涓垹闄や换浣曠壒瀹氫簬鐜╁鐨勭被銆俢onstresetBoard=()=>{board=['','','','','','','','',''];isGameActive=true;鎾煶鍛?classList.add('闅愯棌');if(currentPlayer==='O'){changePlayer();}tiles.forEach(tile=>{tile.innerText='';tile.classList.remove('playerX');tile.classList.remove('playerO');});}鐜板湪鎴戜滑鍙渶瑕佹敞鍐岃繖涓嚱鏁颁綔涓洪噸缃寜閽殑鐐瑰嚮浜嬩欢澶勭悊绋嬪簭銆俽esetButton.addEventListener('鐐瑰嚮',resetBoard);灏辨槸杩欐牱锛屾垜浠湁涓€涓姛鑳介綈鍏ㄧ殑浜曞瓧娓告垙锛屾偍鍙互鍜屾湅鍙嬩竴璧风帺锛岀帺寰楀紑蹇冦€傪煡囨娊绮変笣閫佷功銆奦ue.js妗嗘灦涓嶹eb鍓嶇寮€鍙戜粠鍏ラ棬鍒扮簿閫氥€嬩笅闈㈤摼鎺ュ彲浠ュ弬涓庢娊濂栵細http://wallet.hdcj.zhunzha.com/h5/#/jumpMp?t=5AJ4zAM9SDc鍐欏湪鏈€鍚庣殑浣滆€呭喅蹇冨垱寤轰竴涓湁100涓皬娓告垙鐨勬父鎴忛瓟鍩熺綉绔欙紝鏇存柊杩涘害锛?1/100闀挎湡浠ユ潵涓€鐩村湪鍐欐妧鏈崥瀹紝涓昏鏄€氳繃鎺橀噾锛岃繖鏄垜鍏充簬浣跨敤HTML锛孋SS鍒涘缓涓€涓畝鍗曠殑浜曞瓧娓告垙鐨勫笘瀛?JavaScript銆傚枩娆㈤€氳繃鏂囩珷鍒嗕韩鎶€鏈拰蹇箰銆備綘鍙互璁块棶鎴戠殑鍗氬锛歨ttps://segmentfault.com/u/haiyong浜嗚В鏇村銆傚笇鏈涗綘浠枩娆紒馃槉馃拰娆㈣繋澶у鍦ㄨ瘎璁哄尯鎻愬嚭鑷繁鐨勬剰瑙佸拰寤鸿锛侌煉?/p>

上一篇：微前端框架StartCMS，如何启动框架，startCMS启动教程

下一篇：SAPUI5应用开发教程第37部分-使用Chrome开发者工具控制台面板进行ElementReview试用版

使用HTML、CSS、JavaScript制作一个简单的井字游戏相关文章

最新推荐

猜你喜欢