<html lang="zh-TW"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圈圈叉叉遊戲</title>
<style type="text/css" nonce="">.advertisment, .adban, .ads_box, .listad, .ad_wrapper, .right_ad, .adslist, .nav_ad, .small-ads, .custom-ad, #slider-ad, .adarea, .full-ad, .ads_div, .ADBAR, .addiv, #side-ad, .a_xsfl, .left-ads, .ads-content, .ads-inline, a[href^="https://go.xxxjmp.com"], .post-ads, .a_mu, .ads-left, .adWrapper, .showads, .menu-ads, .adside, .ad_caption, .main_ad, .advertorial, .adhesion:not(body), .module-ads, .AdCenter, #topbannerad, #head_ad, .ad_left, #AD_Top, .ads-list, .adslot, .adace-slot-wrapper, .adsBlock, .gadContainer, .ad-icon, .adsense-wrapper, .ad_right, #advertContainer, #outbrain_widget_0, .adbutton, #fwdevpDiv0, .ad_block, [href^="https://ad.admitad.com/"], .has-fixed-bottom-ad, .container-ads, .adsense-container, .ad-bar, .mobile-ad, .adplacement, .ad-big, .js-sidebar-ads, .ADLeader, .sticky-ad, .quads-location, .ad_468, #google_ads, .m-ad, .AdHeader, .ad-position, a[href*="/?aff="][target="_blank"], .block-sponsor, .ad-title, .adpic, #adLink1, #ads-banner, .label-ad, iframe[width="600"][height="90"], a[target="_blank"] > img[src*="hitv.com"], .adrow, .adstop, .TopBannerAd, #top_wide_ad, .ad-list-item, #ads-wrapper, a[href^="https://ndt5.net/"], #adDiv, .adtag, #related_ads, #adsensewide, .is-sponsored, .adtop, #advert-box, .main-ads, .button-ad, .adverttext, .adshome, .iframeAd, .adLeft, .greyAd, #footer-ads, .adver, #ad-overlay, .full-width-ad, #centerads, .home-ad, .ADwidget, .ads-section, img[width="240px"][height="400px"], #ad_big, .ad_unit, .pcgg, .ad-one, .top-ad-wrapper, .adLink, #ad_leader, AMP-AD, .ctm_ad, [href^="http://www.mypillow.com/"] > img, .w-adsninja-video-player, .ad728x90, #top-ad, .adv_img, .ad-row, display-ad-component, .ads-desktop, .ad-root, .ad-point, [href^="https://mypillow.com/"] > img, .ads-right, .adActive, .display-ad, #content-left-ad, .ad-tag, .sidebar-ad:not(.adsbygoogle), img[width="468"][height="60"], .ad-above-footer, .ad-top, .ipsAd, .RMss1, .adclass, .AdsBox, .m1-header-ad, .ad-160-600, .adbox2, .adthrive-video-player, .column-ad, #rightAd, .widget-ad-image, #top_ads, #rightad, #right_ads, .companion-ads, #ad-1, #ad-2, .page_ad, .ad-popup, .ad_main, .ad_title, .adUnit, .header-advert, .ad_marker, .ad-button, #container-ad, .adright, #ad_global_above_footer, #ad_1, #ad_2, #ad_3, #ad_4, #ad_8, #ads1, #sidebar-ad, .ad-zone:not(.textads), .a_pr, #ads-right, .ff-ads, #headerAd, .AdSense, .article_ad, .adChoicesLogo, .ad__item, #ad-lead, .AdBar, .body-top-ads, .AdBox, #ad_top, #top-ad-unit, .ADFooter, .ima-ad-container, #post-ad, #dnn_adSky, .wp.a_t, .widget-advads-ad-widget, .top-banner-ad, .pc_acmsd, #topAds, *:not(body) > a[href^="https://html-load.com/content"], .textad, .top-ads, .featuredAds, #TopAd, .adcard, #adbar, .adResult, #hp-store-ad, #ads_content, .Zi_ad_a_H, #adbox, #adsContainer, div[data-adunit], .footer-ad, .sponsored-article, .footer_ads, .ads_right, .videos-ad, .adthrive-content, .ad-frame, .vertical-ad, .fixed_ad, #adframe:not(frameset), .b-header-banner, .ad_center, #gAds, a[href*=".umeng.com"]:not([href="http://www.umeng.com/"]) > img, #mplayer-embed, .textAds, a[href*="/cpro."], [data-ad-width], .is-ad, iframe[width="728"][height="90"], #sky_advert, .ad-source, a[href^="https://ad.doubleclick.net/"], #adspace, .module_single_ads, a[href*="/cpro/"], .a_ssk_cn, .ads-title, .ac-widget-placeholder, .adcenter, #sitefocus.focus, .ad_middle, .ad-entity-container, #show_ads, *:not(body) > a[href^="https://content-loader.com/content"], .ad-slot, .ads-by-google, [data-adblockkey], #googlead, .ProductAd { display: none!important; }
.avp-p-wrapper, .region-ad-top, .ad-placeholder:not(#filter_ads_by_classname):not(#detect_ad_empire):not(#detect):not(.adsbox), .ad-element, .ad-slider, a[href^="https://tm-offers.gamingadult.com/"], #ad-rotator, .adholder2, .ads_header, .iframe-ad, .google-ad, .ad-spot, .advBox, div[class^="ADTOPLB_"], #adModal, .Flagrow-Ads-under-header, .node-ad, div[id^="ezoic-pub-ad-"], .ad_box, .ad_btn, .adlink, #article_ad, .adsense_wrapper, .adtitle, .adlist, .advertSlider, .anyClipWrapper, #ad-bigsize, .download-ad, a > img[src*=".sinaimg."][src$=".gif"][style*="width:960"], .ad_div, .ads-item, .ad-area:not(.text-ad), .vertical-ads, .top-ad, .ad-content-area, #mainAd, .ad-content, .ad-outside, #adWrap, #ad_middle, #ads-text, amp-ad, .topAd, iframe[width="240"][height="400"], #kfivtwin, .cardAd, #ad-target, #leaderboard-ad, .connatix-wrapper, #adtop, .side-ad, .ad-stickyhero--standard, .ad_item, [data-ad-manager-id], .ads-mobile, #leaderboard.ad, .pagead, #sidebar_ad_1, .ad_img, .adsBanner, .adtable, .main_adv, #google-ad, #reklama, .adhead, .ad_container, .ads_single_center, .text_ads_2, .advert_area, .head_ad, .header-ad, iframe[width="200"][height="240"], .ad_frame, .banner-468x60, .ADInfo, .oas-container, ins.adsbygoogle[data-ad-client], .m_acmsd, .adsText, .bl > .gg, .con_ad, .adunit, .advert-container, .top-banners, [href^="https://zstacklife.com/"] img, .adhide, #stickyads, .sidebar-ads, .ad-footer, .adsbyvli, #adBanner1, .mntl-leaderboard-spacer, [id^="div-gpt-ad"], #top_ad, .txp_ad_center, *:not(body) > a[href^="https://07c225f3.online/content"], .adthrive, .ads_wrapper, .widget_ui_ads, .adsbygoogle-noablate, .sponsor_post, .ad-body, .wrapper-ad, .content_ads, .publicidade, #bottom_ads, .google-ads, .ads-core-placer, .display_ad, .adItem, #adsense-bottom, #showads, a[href^="https://natour.naughtyamerica.com/track/"], .ad_top, .adsense-block, .ad-unit:not(.textads), .ggbox, .AdContainer, [data-ad-name], #footer-banner, .ad-text, .ad-center, .c-ads, .ad-holder, .chitika-ad, #leftad, #top_box > a[onclick^="javascript"], #ad_small, .ads-bg, .banners_block, .banner-ad, .banner-728x90, .ad-heading, .ad-section, .sponsor_image, .ad-stickyhero-enable-mobile, .ad-bg, .after-post-ad, #SponsoredLinks, .a_pt, iframe[width="468"][height="60"], #footer_ad_modules, .ad-wrapper, .advert2, .adverts, .logo-ad, #ad_link, #container_ad, .adace-slot, .ad-enabled, .right-ad, .bottom_ad_block, .ads-box, #adcontainer, .AdsSlot, #googleAD2, .ad300, .ad336, #ads-left, .plainAd, .innerBanner, .ads-header, .adv_bg, [href^="https://www.herbanomic.com/"] > img, .wppaszone, #googleAds, .ad_wrap, div[aria-label="Ads"], .ads-image, .ad_space, [data-ad-module], .ez-video-wrap, #adlabel, #ads_top, .large-advert, .adwidget, #banner-ad, .ad728, .adzone, .advert-block, .sponsorad, .adscenter, .ad-inner, #ad_left_top, #ad_block, .skyscraper.ad, .ad-card, .block-ad, .ad-links, .ad-box:not(#ad-banner):not(:empty), #mini-ad, a > img[width="980"][src*=".sinaimg."], .midAd, .ad-cover, .rightAd, #adContainer, .ad_slot, div[id^="crt-"][style], img[width="600"][height="90"], .rightad, #AdHeader, .adslot_1, .ad-250, #GoogleAd2, .adv-banner, .ad-zone-container, #adsbox, [class^="s2nPlayer"], .ad_banner, .ad-grid, .advert-detail, #horizontal-ad, .article-advert, div[data-ad-targeting], [href^="https://mystore.com/"] > img, #google-ads, .skinAd, .ad_spot, .ad-current, .ad-stickyhero, .mainAd, .adsList, .a_fr, #adv-text, .advertiser, #ad_close, #taboola-below-article-1, [href^="https://mypatriotsupply.com/"] > img, .adWrap, .adArea, .td-a-rec, .promoAd, [name^="google_ads_iframe"], .ad-post, .Adsense, .bottom_ad, .module_ad, .ads-row, .gg-box, .ad-s, .cnx-player-wrapper, #divAd, .ad-lead, .header-ad-row, .single_ad, div[id^="div-gpt-"], .advert-wrapper, .adBox, .video-ad-container { display: none!important; }
.ad_1, .ad_2, .ad_r, [data-advadstrackid], .nativead, .post-ad, .ad_bottom, .adv-box, .ads1, .ads2, .p-ad, #ad-wrapper, .adrect, #adFrame, .ad-label, .largeAd, .googleAd, #AD_160, #headerTopAd, #ad_banner, #page_ad, .adRight, #gg1, #ad-ads, .googlead, .ads-loaded, .adBlock, #adright, .google_ad, a[href*=".com?aff="], .advtop, .section-ads, #ads-header, #adwrapper, #perm_ad, .ad_global_header, .boxAds, .video_ad, #adbannerdiv, #topAd, .adVertical, .googleads, a > img[width="960"][src*=".alicdn.com/"], .ad-banner-container, .adImg, .c-ad, .top_ad, #adIframe, #advertise, iframe[src^="//ad.a-ads.com/"], .product-ad, .video-ads, .adplaceholder, #adlayer, .middlead, #homead, .topads, #videoAd, A[href="https://s.click.taobao.com/cTAwFvu"], [href^="http://mypillow.com/"] > img, .advads-widget, .adunit-container, a[href^="https://pubads.g.doubleclick.net/"], .ad_content, html[class^="img_"][amp4ads=""][i-amphtml-layout=""][i-amphtml-no-boilerplate=""][amp-version="2502032353000"], .left_ad, .side_ad, #sidebar_ads, img[width="240"][height="400"], #adclose, .adspace, .scad, .pcd_ad, .ad-hero, .ad_body, .adHolder, .ad-widget, #adcontainer1, #mod_ad, iframe[width="100%"][height="120"]:not([src*="bandcamp.com"]), [href^="https://noqreport.com/"] > img, .l-ad, #ad_container, .inline-ad, .adsbottombox, #ads-menu, .sponsor-wrap, .player-news > .news-list, .sponsor-area, .adContent, .gallery-ad, .sponsoredItem, .small_ad, .addarea, .adMiddle, .ad-sidebar, .header_ad, #googlead2, .adRow, .ad-med-rec, .adsTop, [data-ad-cls], .page-ad, #ad_topslot, a[href^="https://www.sheetmusicplus.com/"][href*="?aff_id="], .sidebaradbox, .smallads, .blogAd, #prerollAd, #search_ad, .block-simpleads, .headerads, .adTop, #adTower, .adv-top, [href^="https://www.mypatriotsupply.com/"] > img, .Textads, .gpt-ad, ins.adsbygoogle[data-ad-slot], .product-ads, #ad-side, .ad-block, #bottomAd, .ad-click, .ad-card-container, .trc-content-sponsored, #bottomad, .adscontainer, .adsninja-ad-zone, .google_ads, #ad-carousel, .adwords, div[id^="ad_position_"], #ad-top, .hlol_ad, a[href^="http://www.upupoo.com"], #ad-slot, iframe[width="100%"][height="90"], .adcomment, #inner-top-ads, .gridlove-ad, #adContent, [href^="https://www.restoro.com/"], .ads-banner, .sidebar_advert, .advert_list, [href^="https://www.mypillow.com/"] > img, .Text-Advertising, #header_ad, .ads_container:not(.text-ad), .contentAds, .ads-card, .advertisement-block, .ads_ad_box, .ad-main, #ad-p3, .tile-ad, a > img[width="960"][src*=".sinaimg."], .adText, .banner-ad-container, .postad, .reklama, div[id^="dfp-ad-"], .adsleft, .ad-padding, .ad_bg, .ad-notice, img[width="728"][height="90"], .adsizewrapper, .adSense, .adsbar, .ad-bottom, .sidebar-ads-container, .ad-wrap:not(#google_ads_iframe_checktag), .box_ads, .ads.widget, #sponsorText { display: none!important; }
</style>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: linear-gradient(135deg, #6366f1, #a855f7);
font-family: 'Microsoft JhengHei', sans-serif;
min-height: 100vh;
}
.cell {
transition: all 0.3s ease;
}
.cell:hover:not(.marked) {
background-color: rgba(255, 255, 255, 0.2);
}
.marked {
pointer-events: none;
}
.win-line {
position: absolute;
background-color: #fcd34d;
z-index: 10;
transition: transform 0.5s ease;
}
.horizontal {
height: 10px;
width: 90%;
left: 5%;
transform: scaleX(0);
}
.vertical {
width: 10px;
height: 90%;
top: 5%;
transform: scaleY(0);
}
.diagonal-1 {
height: 10px;
width: 125%;
left: -12.5%;
top: calc(50% - 5px);
transform: scaleX(0) rotate(45deg);
}
.diagonal-2 {
height: 10px;
width: 125%;
left: -12.5%;
top: calc(50% - 5px);
transform: scaleX(0) rotate(-45deg);
}
.show-line {
transform: scaleX(1) !important;
}
.show-line.vertical {
transform: scaleY(1) !important;
}
.show-line.diagonal-1 {
transform: scaleX(1) rotate(45deg) !important;
}
.show-line.diagonal-2 {
transform: scaleX(1) rotate(-45deg) !important;
}
.code-modal {
max-height: 80vh;
overflow-y: auto;
}
@keyframes pop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.pop-animation {
animation: pop 0.3s forwards;
}
</style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.bottom-4{bottom:1rem}.right-4{right:1rem}.z-50{z-index:50}.mx-4{margin-left:1rem;margin-right:1rem}.mb-4{margin-bottom:1rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.h-5{height:1.25rem}.h-6{height:1.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.border-4{border-width:4px}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-opacity-90{--tw-bg-opacity:0.9}.p-2{padding:0.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163 / var(--tw-text-opacity, 1))}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}</style></head>
<body class="flex flex-col items-center justify-center p-4">
<div class="bg-white bg-opacity-90 rounded-xl shadow-2xl p-6 max-w-md w-full">
<h1 class="text-3xl font-bold text-center text-indigo-800 mb-4">圈圈叉叉遊戲</h1>
<div class="text-center mb-4">
<div class="flex justify-center items-center space-x-4">
<div class="flex items-center">
<div class="w-6 h-6 rounded-full border-4 border-indigo-600 mr-2"></div>
<span class="player-o font-bold text-indigo-600">玩家 O</span>
</div>
<div class="flex items-center">
<div class="text-rose-600 font-bold text-2xl mr-2">✕</div>
<span class="player-x font-bold text-gray-400">玩家 X</span>
</div>
</div>
<div class="mt-2 text-lg font-bold status-message">輪到 <span class="text-indigo-600">O</span> 下棋</div>
</div>
<div class="relative board w-full aspect-square bg-indigo-100 rounded-lg overflow-hidden">
<!-- 遊戲格線 -->
<div class="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-2 p-2">
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer" data-index="0"></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="1" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="2" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="3" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="4" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="5" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer" data-index="6"></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer pop-animation" data-index="7" style=""></div>
<div class="cell bg-white rounded-md flex items-center justify-center text-5xl font-bold cursor-pointer" data-index="8"></div>
</div>
<!-- 勝利線 -->
<div class="win-line horizontal" style="top: 16.7%"></div>
<div class="win-line horizontal" style="top: 50%"></div>
<div class="win-line horizontal" style="top: 83.3%"></div>
<div class="win-line vertical" style="left: 16.7%"></div>
<div class="win-line vertical" style="left: 50%"></div>
<div class="win-line vertical" style="left: 83.3%"></div>
<div class="win-line diagonal-1"></div>
<div class="win-line diagonal-2"></div>
</div>
<div class="mt-4 flex justify-center">
<button class="reset-btn bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-full shadow-md transition-all">重新開始</button>
</div>
</div>
<!-- 開發人員按鈕 -->
<button id="dev-button" class="fixed bottom-4 right-4 bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full shadow-lg flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
開發人員
</button>
<!-- 程式碼彈出視窗 -->
<div id="code-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="code-modal bg-white rounded-lg shadow-xl p-6 max-w-4xl w-full mx-4">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-gray-800">完整程式碼</h2>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="bg-gray-100 p-4 rounded-lg">
<pre id="code-content" class="text-sm overflow-x-auto"></pre>
</div>
<div class="mt-4 flex justify-end">
<button id="copy-code" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
複製程式碼
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cells = document.querySelectorAll('.cell');
const statusMessage = document.querySelector('.status-message');
const resetBtn = document.querySelector('.reset-btn');
const playerO = document.querySelector('.player-o');
const playerX = document.querySelector('.player-x');
const winLines = document.querySelectorAll('.win-line');
let currentPlayer = 'O';
let gameBoard = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;
const winPatterns = [
[0, 1, 2, 'horizontal', 0], // 第一行
[3, 4, 5, 'horizontal', 1], // 第二行
[6, 7, 8, 'horizontal', 2], // 第三行
[0, 3, 6, 'vertical', 0], // 第一列
[1, 4, 7, 'vertical', 1], // 第二列
[2, 5, 8, 'vertical', 2], // 第三列
[0, 4, 8, 'diagonal-1', 0], // 左上到右下
[2, 4, 6, 'diagonal-2', 0] // 右上到左下
];
// 初始化遊戲
function initGame() {
gameBoard = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
currentPlayer = 'O';
statusMessage.innerHTML = `輪到 <span class="text-indigo-600">O</span> 下棋`;
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('marked');
cell.style.color = '';
});
// 隱藏所有勝利線
winLines.forEach(line => {
line.classList.remove('show-line');
});
updatePlayerHighlight();
}
// 更新玩家高亮
function updatePlayerHighlight() {
if (currentPlayer === 'O') {
playerO.classList.add('text-indigo-600');
playerO.classList.remove('text-gray-400');
playerX.classList.add('text-gray-400');
playerX.classList.remove('text-rose-600');
} else {
playerO.classList.add('text-gray-400');
playerO.classList.remove('text-indigo-600');
playerX.classList.add('text-rose-600');
playerX.classList.remove('text-gray-400');
}
}
// 處理格子點擊
function handleCellClick(e) {
const cell = e.target;
const index = parseInt(cell.getAttribute('data-index'));
if (gameBoard[index] !== '' || !gameActive) return;
// 更新遊戲狀態
gameBoard[index] = currentPlayer;
// 更新UI
cell.textContent = currentPlayer;
cell.classList.add('marked', 'pop-animation');
cell.style.color = currentPlayer === 'O' ? '#4f46e5' : '#e11d48';
// 檢查遊戲結果
if (checkWin()) {
statusMessage.innerHTML = `<span class="${currentPlayer === 'O' ? 'text-indigo-600' : 'text-rose-600'}">${currentPlayer}</span> 獲勝！`;
gameActive = false;
return;
}
if (checkDraw()) {
statusMessage.textContent = '遊戲平局！';
gameActive = false;
return;
}
// 切換玩家
currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
statusMessage.innerHTML = `輪到 <span class="${currentPlayer === 'O' ? 'text-indigo-600' : 'text-rose-600'}">${currentPlayer}</span> 下棋`;
updatePlayerHighlight();
}
// 檢查勝利
function checkWin() {
for (let i = 0; i < winPatterns.length; i++) {
const [a, b, c, lineType, lineIndex] = winPatterns[i];
if (
gameBoard[a] !== '' &&
gameBoard[a] === gameBoard[b] &&
gameBoard[a] === gameBoard[c]
) {
// 顯示勝利線
const lineSelector = `.${lineType}`;
const winLine = document.querySelectorAll(lineSelector)[lineIndex];
winLine.classList.add('show-line');
return true;
}
}
return false;
}
// 檢查平局
function checkDraw() {
return !gameBoard.includes('');
}
// 事件監聽
cells.forEach(cell => {
cell.addEventListener('click', handleCellClick);
});
resetBtn.addEventListener('click', initGame);
// 初始化遊戲
initGame();
// 開發人員按鈕功能
const devButton = document.getElementById('dev-button');
const codeModal = document.getElementById('code-modal');
const closeModal = document.getElementById('close-modal');
const codeContent = document.getElementById('code-content');
const copyCodeBtn = document.getElementById('copy-code');
devButton.addEventListener('click', () => {
// 獲取當前頁面的HTML代碼
const htmlContent = document.documentElement.outerHTML;
// 顯示在模態框中
codeContent.textContent = htmlContent;
codeModal.classList.remove('hidden');
});
closeModal.addEventListener('click', () => {
codeModal.classList.add('hidden');
});
copyCodeBtn.addEventListener('click', () => {
// 複製代碼到剪貼板
navigator.clipboard.writeText(codeContent.textContent)
.then(() => {
const originalText = copyCodeBtn.textContent;
copyCodeBtn.textContent = '已複製！';
setTimeout(() => {
copyCodeBtn.textContent = originalText;
}, 2000);
})
.catch(err => {
console.error('複製失敗:', err);
alert('複製失敗，請手動選擇並複製代碼。');
});
});
// 點擊模態框外部關閉
codeModal.addEventListener('click', (e) => {
if (e.target === codeModal) {
codeModal.classList.add('hidden');
}
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'943cccf626334a01',t:'MTc0NzkyMjAxNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe>
</body></html>