{"id":506,"date":"2025-11-09T03:25:39","date_gmt":"2025-11-09T03:25:39","guid":{"rendered":"https:\/\/learndeeplytw.com\/?p=506"},"modified":"2025-12-29T04:15:14","modified_gmt":"2025-12-29T04:15:14","slug":"binary-digits","status":"publish","type":"post","link":"https:\/\/learndeeplytw.com\/zh_tw\/binary-digits\/","title":{"rendered":"\u5225\u6025\u8457\u6559\u7b97\u8853\uff01\u8b93\u5b69\u5b50\u81ea\u5df1\u7834\u89e3\u300c\u4e8c\u9032\u4f4d\u300d(binary digits)\u7684\u9ede\u6578\u5bc6\u78bc"},"content":{"rendered":"\n<figure class=\"wp-embed-aspect-4-3 wp-has-aspect-ratio wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Unplugged: The show. Part 2: Binary - Counting\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/Pz7dLWvi2w0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"\">\u4e8c\u9032\u4f4d\u662f\u96fb\u8166\u79d1\u5b78\u7684\u57fa\u77f3\uff0c\u4f46\u5c0d\u5b69\u5b50\u4f86\u8aaa\uff0c\u5b83\u5f80\u5f80\u53ea\u662f\u4e00\u5806\u67af\u71e5\u7684 0 \u548c 1\u3002\u9019\u4efd\u5e38\u898b\u7684\u300c\u9ede\u6578\u5361\u300d\u6559\u6750\uff08Binary Cards\uff09\u975e\u5e38\u68d2\uff0c\u4f46\u5f88\u591a\u8001\u5e2b\u6703\u4e0d\u5c0f\u5fc3\u628a\u5b83\u8b8a\u6210\u6578\u5b78\u8ab2\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"378\" loading=\"lazy\" src=\"https:\/\/learndeeplytw.com\/wp-content\/uploads\/2025\/11\/binarydots-kid.png\" alt=\"\" class=\"wp-image-508\" style=\"width:495px;height:auto\" srcset=\"https:\/\/learndeeplytw.com\/wp-content\/uploads\/2025\/11\/binarydots-kid.png 882w, https:\/\/learndeeplytw.com\/wp-content\/uploads\/2025\/11\/binarydots-kid-300x129.png 300w, https:\/\/learndeeplytw.com\/wp-content\/uploads\/2025\/11\/binarydots-kid-768x329.png 768w, https:\/\/learndeeplytw.com\/wp-content\/uploads\/2025\/11\/binarydots-kid-18x8.png 18w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/figure>\n\n\n\n<p class=\"\">\u300c\u9019\u5f35\u662f1\uff0c\u9019\u5f35\u662f2\uff0c\u9019\u662f4&#8230;\u597d\uff0c\u73fe\u5728\u6e4a\u51fa 5 \u7d66\u6211\u770b\u3002\u300d\u9019\u7a2e\u6559\u6cd5\u96d6\u7136\u6709\u6548\u7387\uff0c\u4f46\u932f\u5931\u4e86\u57f9\u990a\u5b69\u5b50\u89c0\u5bdf\u6a21\u5f0f\uff08Pattern Recognition\uff09\u8207\u62bd\u8c61\u5316\uff08Abstraction\uff09\u601d\u7dad\u7684\u6a5f\u6703\u3002<\/p>\n\n\n\n<p class=\"\">\u8b93\u6211\u5011\u904b\u7528\u300c\u5efa\u69cb\u5f0f\u63d0\u554f\u300d\uff0c\u5c07\u9019\u500b\u6d3b\u52d5\u91cd\u65b0\u8a2d\u8a08\u6210\u4e00\u5834\u89e3\u78bc\u904a\u6232\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e00\u968e\u6bb5\uff1a\u767c\u73fe\u6578\u5217\u6a21\u5f0f (Discovering the Pattern)<\/h3>\n\n\n\n<p class=\"\">\u5728\u767c\u4e0b\u6240\u6709\u5361\u7247\u4e4b\u524d\uff0c\u5148\u53ea\u62ff\u51fa\u4e00\u5f35\u300c1\u9ede\u300d\u7684\u5361\u7247\uff0c\u7136\u5f8c\u662f\u300c2\u9ede\u300d\u7684\u5361\u7247\u3002<\/p>\n\n\n\n<p class=\"\"><strong>\u2705 \u5efa\u69cb\u5f0f\u63a2\u7a76\uff08\u9810\u6e2c\u8207\u89c0\u5bdf\uff09\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\"><strong>\u5c55\u793a<\/strong>\uff1a\u5148\u62ff\u51fa 1\u9ede\u5361\uff0c\u518d\u62ff\u51fa 2\u9ede\u5361\u3002<\/li>\n\n\n\n<li class=\"\"><strong>\u63d0\u554f<\/strong>\uff1a\u300c\u89c0\u5bdf\u4e00\u4e0b\u9019\u5169\u5f35\u5361\uff0c\u4f60\u89ba\u5f97\u4e0b\u4e00\u5f35\u5361\u7247\u6703\u6709\u5e7e\u500b\u9ede\uff1f\u300d<\/li>\n\n\n\n<li class=\"\"><strong>\u8046\u807d\u5b78\u751f\u60f3\u6cd5<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li class=\"\"><em>\u5b78\u751fA<\/em>\uff1a\u300c3 \u9ede\uff01\u300d\uff08\u56e0\u70ba 1, 2, 3&#8230;\uff09<\/li>\n\n\n\n<li class=\"\"><em>\u5b78\u751fB<\/em>\uff1a\u300c4 \u9ede\uff01\u300d\uff08\u56e0\u70ba\u52a0\u500d\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>\u63ed\u66c9\u8207\u4fee\u6b63<\/strong>\uff1a\u62ff\u51fa 4\u9ede\u5361\u3002\n<ul class=\"wp-block-list\">\n<li class=\"\">\u5c0d\u731c 3 \u9ede\u7684\u5b78\u751f\uff1a\u300c\u4f60\u7684\u731c\u6e2c\u5f88\u5408\u7406\uff0c\u6211\u5011\u901a\u5e38\u662f\u9019\u6a23\u6578\u6578\u7684\u3002\u4f46\u770b\u770b\u9019\u5f35\u662f4\uff0c\u4f60\u89ba\u5f97\u9019\u5f35\u5361\u7247\u7684\u898f\u5247\u8ddf\u5e73\u5e38\u6578\u6578\u54ea\u88e1\u4e0d\u4e00\u6a23\uff1f\u300d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>\u518d\u6b21\u9810\u6e2c<\/strong>\uff1a\u300c\u597d\uff0c\u65e2\u7136\u662f 1, 2, 4&#8230; \u4f60\u80fd\u756b\u51fa\u4e0b\u4e00\u5f35\u5361\u7247\u9577\u4ec0\u9ebc\u6a23\u5b50\u55ce\uff1f\u300d\uff08\u8b93\u5b69\u5b50\u62ff\u7b46\u756b\u756b\u770b\uff0c\u9019\u6bd4\u53e3\u982d\u56de\u7b54\u66f4\u80fd\u5448\u73fe\u601d\u7dad\uff09\u3002<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e8c\u968e\u6bb5\uff1a\u9650\u5236\u8207\u5275\u9020 (Constraint &amp; Construction)<\/h3>\n\n\n\n<p class=\"\">\u73fe\u5728\u5b69\u5b50\u624b\u4e0a\u6709\u4e94\u5f35\u5361\u7247\u4e86\uff081, 2, 4, 8, 16\uff09\u3002<\/p>\n\n\n\n<p class=\"\"><strong>\u2705 \u5efa\u69cb\u5f0f\u63a2\u7a76\uff08\u554f\u984c\u5c0e\u5411\uff09\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>\u8001\u5e2b<\/strong>\uff1a\u300c\u6211\u5011\u73fe\u5728\u9047\u5230\u4e00\u500b\u9ebb\u7169\u3002\u6211\u60f3\u8cb7\u4e00\u500b&nbsp;<strong>6\u5143<\/strong>&nbsp;\u7684\u7cd6\u679c\uff0c\u4f46\u6211\u624b\u4e0a\u53ea\u6709\u9019\u4e9b\u5947\u602a\u9762\u984d\u7684\u786c\u5e63\uff08\u5361\u7247\uff09\u3002\u6211\u4e0d\u80fd\u627e\u9322\uff0c\u4e5f\u4e0d\u80fd\u628a\u5361\u7247\u6495\u4e00\u534a\u3002\u4f60\u80fd\u5e6b\u6211\u60f3\u8fa6\u6cd5\u6e4a\u51fa\u525b\u597d 6 \u5143\u55ce\uff1f\u300d<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>\u89c0\u5bdf\u5b69\u5b50\u7684\u5617\u8a66<\/strong>\uff1a\u5b69\u5b50\u53ef\u80fd\u6703\u8a66\u5716\u628a 8 \u7ffb\u51fa\u4f86\uff0c\u7136\u5f8c\u767c\u73fe\u592a\u591a\u4e86\uff1b\u6216\u8005\u770b\u8457 1 \u548c 2 \u767c\u5446\u3002<\/li>\n\n\n\n<li class=\"\"><strong>\u5f15\u5c0e\u63d0\u554f<\/strong>\uff08\u7576\u5b69\u5b50\u5361\u4f4f\u6642\uff09\uff1a\n<ul class=\"wp-block-list\">\n<li class=\"\">\u300c\u9019\u5f35 8 \u9ede\u7684\u5361\u7247\u5c0d\u6e4a\u51fa 6 \u9ede\u6709\u5e6b\u52a9\u55ce\uff1f\u9084\u662f\u5b83\u592a\u5927\u4e86\uff1f\u300d<\/li>\n\n\n\n<li class=\"\">\u300c\u5982\u679c\u6700\u5927\u7684\u90a3\u5f35\u4e0d\u80fd\u7528\uff0c\u90a3\u6211\u5011\u9084\u5269\u4e0b\u54ea\u4e9b\uff1f\u300d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>\u9032\u968e\u6311\u6230<\/strong>\uff1a\u300c\u4f60\u6709\u6c92\u6709\u8fa6\u6cd5\u6e4a\u51fa&nbsp;<strong>13<\/strong>\uff1f\u6216\u662f&nbsp;<strong>20<\/strong>\uff1f\u6709\u6c92\u6709\u54ea\u500b\u6578\u5b57\u662f\u9019\u4e9b\u5361\u7247\u6e4a\u4e0d\u51fa\u4f86\u7684\uff1f\u300d\uff08\u9019\u500b\u554f\u984c\u975e\u5e38\u91cd\u8981\uff0c\u80fd\u5f15\u5c0e\u5b69\u5b50\u767c\u73fe\u4e8c\u9032\u4f4d\u53ef\u4ee5\u8868\u793a\u7bc4\u570d\u5167\u7684\u6240\u6709\u6574\u6578\uff09\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e09\u968e\u6bb5\uff1a\u7b26\u865f\u7684\u8a95\u751f (From Physical to Abstract)<\/h3>\n\n\n\n<p class=\"\">\u9019\u662f\u6700\u95dc\u9375\u7684\u4e00\u6b65\uff1a\u5982\u4f55\u5f15\u5165 0 \u548c 1\uff1f<\/p>\n\n\n\n<p class=\"\"><strong>\u2705 \u5efa\u69cb\u5f0f\u63a2\u7a76\uff08\u7de8\u78bc\u6e9d\u901a\uff09\uff1a<\/strong><\/p>\n\n\n\n<p class=\"\"><strong>\u60c5\u5883\u8a2d\u8a08<\/strong>\uff1a\u8b93\u5b69\u5b50\u5728\u6559\u5ba4\u7684\u4e00\u7aef\u6392\u597d\u5361\u7247\uff08\u4f8b\u5982\u6e4a\u51fa 9 -&gt; 8\u9ede\u958b\u30014\u9ede\u84cb\u30012\u9ede\u84cb\u30011\u9ede\u958b\uff09\u3002\u8001\u5e2b\u7ad9\u5728\u6559\u5ba4\u53e6\u4e00\u7aef\uff0c\u80cc\u5c0d\u8457\u5361\u7247\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\"><strong>\u63d0\u51fa\u56f0\u96e3<\/strong>\uff1a\u300c\u6211\u60f3\u628a\u4f60\u5011\u73fe\u5728\u6392\u51fa\u4f86\u7684\u6578\u5b57\u8a18\u4e0b\u4f86\uff0c\u4f46\u6211\u770b\u4e0d\u5230\u3002\u4f60\u5011\u80fd\u4e0d\u80fd\u7528<strong>\u6700\u7c21\u55ae\u3001\u6700\u77ed\u7684\u65b9\u5f0f<\/strong>\u5927\u8072\u544a\u8a34\u6211\uff0c\u54ea\u5f35\u5361\u7247\u662f\u958b\u7684\uff0c\u54ea\u5f35\u662f\u95dc\u7684\uff1f\u300d<\/li>\n\n\n\n<li class=\"\"><strong>\u5617\u8a66\u6e9d\u901a<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li class=\"\">\u5b78\u751f\u53ef\u80fd\u6703\u558a\uff1a\u300c\u7b2c\u4e00\u5f35\u958b\uff0c\u7b2c\u4e8c\u5f35\u95dc\uff0c\u7b2c\u4e09\u5f35\u95dc\uff0c\u7b2c\u56db\u5f35\u958b\uff01\u300d<\/li>\n\n\n\n<li class=\"\">\u8001\u5e2b\uff1a\u300c\u6709\u6c92\u6709\u66f4\u77ed\u7684\u4ee3\u865f\uff1f\u300d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>\u9054\u6210\u5354\u8b70\uff08Protocol\uff09<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li class=\"\">\u5b78\u751f\uff1a\u300c\u958b\u3001\u95dc\u3001\u95dc\u3001\u958b\uff1f\u300d<\/li>\n\n\n\n<li class=\"\">\u8001\u5e2b\uff1a\u300c\u9084\u53ef\u4ee5\u66f4\u77ed\u55ce\uff1f\u7528\u5beb\u7684\u5462\uff1f\u300d<\/li>\n\n\n\n<li class=\"\">\u5f15\u5c0e\u5b78\u751f\u767c\u73fe\u53ef\u4ee5\u7528\u7b26\u865f\uff08O\/X, \u9ad8\/\u4f4e, \u6216\u662f&nbsp;<strong>1\/0<\/strong>\uff09\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>\u9023\u7d50\u6982\u5ff5<\/strong>\uff1a\u300c\u6c92\u932f\uff01\u4f60\u5011\u525b\u525b\u767c\u660e\u7684\u9019\u500b\u300e\u7528 1 \u4ee3\u8868\u6709\uff0c\u7528 0 \u4ee3\u8868\u6c92\u6709\u300f\u7684\u65b9\u6cd5\uff0c\u6b63\u597d\u5c31\u662f\u96fb\u8166\u96d6\u7136\u6c92\u6709\u773c\u775b\uff0c\u537b\u80fd\u7d00\u9304\u6578\u5b57\u7684\u65b9\u6cd5\uff01\u300d<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u6559\u5b78\u89c0\u5bdf\u91cd\u9ede\u8868<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\u89c0\u5bdf\u9ede<\/td><td>\u8f03\u7121\u6548\u7684\u53cd\u61c9 (Less Effective)<\/td><td>\u8f03\u6709\u6548\u7684\u5f15\u5c0e (More Effective)<\/td><\/tr><tr><td><strong>\u7576\u5b78\u751f\u731c\u932f\u4e0b\u4e00\u5f35\u5361\u7247\u6642<\/strong><\/td><td>\u300c\u4e0d\u5c0d\uff0c\u9019\u5f35\u662f4\u3002\u4f60\u770b\uff0c\u5b83\u662f\u524d\u4e00\u5f35\u7684\u5169\u500d\u3002\u300d\uff08\u76f4\u63a5\u7cfe\u6b63\uff09<\/td><td>\u300c\u4f60\u89ba\u5f97\u662f 3\uff1f\u8aaa\u8aaa\u770b\u70ba\u4ec0\u9ebc\u4f60\u89ba\u5f97\u662f 3\uff1f\u300d\uff08\u63a2\u7a76\u908f\u8f2f\uff09<br>\uff08\u62ff\u51fa4\u4e4b\u5f8c\uff09\u300c\u54a6\uff0c\u8ddf\u6211\u5011\u60f3\u7684\u4e0d\u4e00\u6a23\uff0c\u70ba\u4ec0\u9ebc\u6703\u8b8a\u6210 4 \u5462\uff1f\u9019\u8ddf\u524d\u9762\u7684 1 \u548c 2 \u6709\u4ec0\u9ebc\u95dc\u4fc2\uff1f\u300d<\/td><\/tr><tr><td><strong>\u7576\u5b78\u751f\u5728\u6e4a\u6578\u5b57\u6642<\/strong><\/td><td>\u300c\u4f60\u9700\u8981\u4e00\u5f35 8 \u548c\u4e00\u5f35 2\u3002\u300d\uff08\u7d66\u7b54\u6848\uff09<\/td><td>\u300c\u4f60\u73fe\u5728\u6e4a\u51fa\u4f86\u7684\u662f\u591a\u5c11\uff1f\uff08\u5047\u8a2d\u662f10\uff09\u6bd4\u6211\u5011\u8981\u7684 13 \u591a\u9084\u662f\u5c11\uff1f\u5982\u679c\u8981\u8b8a\u591a\u4e00\u9ede\uff0c\u8a72\u7ffb\u958b\u54ea\u5f35\uff1f\u300d<\/td><\/tr><tr><td><strong>\u5f15\u5165 0 \u8207 1 \u6642<\/strong><\/td><td>\u300c\u9019\u662f\u898f\u5247\uff0c\u80cc\u8d77\u4f86\u3002\u300d<\/td><td>\u300c\u5982\u679c\u53ea\u80fd\u7528\u5169\u500b\u7b26\u865f\u4f86\u5beb\u65e5\u8a18\uff0c\u7d00\u9304\u5361\u7247\u7684\u72c0\u614b\uff0c\u4f60\u6703\u9078\u54ea\u5169\u500b\u7b26\u865f\uff1f\u300d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u7d50\u8ad6<\/h3>\n\n\n\n<p class=\"\">\u900f\u904e\u9019\u7bc7\u6587\u7ae0\u7684\u65b9\u6cd5\uff0c\u6211\u5011\u4e0d\u662f\u5728\u300c\u6559\u300d\u4e8c\u9032\u4f4d\uff0c\u800c\u662f\u5728\u5f15\u5c0e\u5b69\u5b50\u300c\u767c\u660e\u300d\u4e8c\u9032\u4f4d\u7cfb\u7d71\u3002<\/p>\n\n\n\n<p class=\"\">\u7576\u5b69\u5b50\u7d93\u904e\u300c\u9810\u6e2c\u5361\u7247\u9ede\u6578\u300d\u2192\u300c\u89e3\u6c7a\u6e4a\u6578\u5b57\u96e3\u984c\u300d\u2192\u300c\u767c\u660e\u7c21\u5beb\u7b26\u865f\u300d\u9019\u4e09\u500b\u904e\u7a0b\uff0c\u4ed6\u5011\u5c0d\u6559\u6750\u6700\u5f8c\u90a3\u500b\u516c\u5f0f&nbsp;0 1 0 0 1 = 9&nbsp;\u7684\u7406\u89e3\uff0c\u5c07\u4e0d\u518d\u662f\u6b7b\u80cc\u516c\u5f0f\uff0c\u800c\u662f\u5145\u6eff\u4e86\u300c\u539f\u4f86\u5982\u6b64\u300d\u7684\u9813\u609f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Try it<\/h3>\n\n\n\n<!-- \n    WORDPRESS EMBED INSTRUCTIONS:\n    1. Copy all the code below.\n    2. In WordPress, add a \"Custom HTML\" block.\n    3. Paste the code.\n    4. Save\/Publish.\n-->\n<div id=\"binary-game-wrapper\" style=\"width: 750px; max-width: 100%; overflow: hidden;\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;700&#038;family=Share+Tech+Mono&#038;display=swap\"\n        rel=\"stylesheet\">\n    <script>\n        tailwind.config = {\n            corePlugins: {\n                preflight: false, \/\/ Disable global reset to protect WordPress styles\n            },\n            prefix: 'tw-', \/\/ Prefix to avoid class conflicts\n            theme: {\n                extend: {\n                    fontFamily: {\n                        mono: [\"'JetBrains Mono'\", \"monospace\"],\n                        display: [\"'Share Tech Mono'\", \"monospace\"],\n                    },\n                    colors: {\n                        bg: \"#000000\",\n                        panel: \"#111217\",\n                        border: \"#22252b\",\n                        text: \"#c7d0d9\",\n                        neon: \"#57f287\",\n                        alert: \"#f2495c\",\n                        warn: \"#ff9830\",\n                        info: \"#73bf69\",\n                    },\n                    boxShadow: {\n                        'neon': '0 0 5px rgba(87, 242, 135, 0.5), 0 0 10px rgba(87, 242, 135, 0.3)',\n                    }\n                },\n            },\n        }\n    <\/script>\n    <style>\n        \/* Scoped Styles for the Game Container *\/\n        #binary-game-root {\n            background-color: #000000;\n            color: #c7d0d9;\n            font-family: 'JetBrains Mono', monospace;\n            line-height: 1.5;\n        }\n\n        #binary-game-root * {\n            box-sizing: border-box;\n        }\n\n        #binary-game-root .text-glow {\n            text-shadow: 0 0 10px rgba(87, 242, 135, 0.5);\n        }\n\n        #binary-game-root .scanline {\n            background: linear-gradient(to bottom,\n                    rgba(255, 255, 255, 0),\n                    rgba(255, 255, 255, 0) 50%,\n                    rgba(0, 0, 0, 0.2) 50%,\n                    rgba(0, 0, 0, 0.2));\n            background-size: 100% 4px;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            pointer-events: none;\n            z-index: 50;\n            opacity: 0.15;\n        }\n\n        \/* Custom Scrollbar scoped *\/\n        #binary-game-root ::-webkit-scrollbar {\n            width: 4px;\n            height: 4px;\n        }\n\n        #binary-game-root ::-webkit-scrollbar-track {\n            background: #111217;\n        }\n\n        #binary-game-root ::-webkit-scrollbar-thumb {\n            background: #22252b;\n            border-radius: 2px;\n        }\n\n        #binary-game-root ::-webkit-scrollbar-thumb:hover {\n            background: #57f287;\n        }\n\n        \/* Flip Card Styles *\/\n        #binary-game-root .card-perspective {\n            perspective: 1000px;\n        }\n\n        #binary-game-root .card-inner {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            transition: transform 0.6s;\n            transform-style: preserve-3d;\n        }\n\n        #binary-game-root .card-flipped .card-inner {\n            transform: rotateY(180deg);\n        }\n\n        #binary-game-root .card-face {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 2px solid #57f287;\n            background-color: #000000;\n            box-shadow: 0 0 5px rgba(87, 242, 135, 0.5), 0 0 10px rgba(87, 242, 135, 0.3);\n        }\n\n        #binary-game-root .card-back {\n            background-color: #111217;\n            border-color: #22252b;\n            box-shadow: none;\n            transform: rotateY(180deg);\n        }\n    <\/style>\n\n    <div id=\"binary-game-root\"\n        class=\"tw-relative tw-w-full tw-min-h-[600px] tw-p-2 sm:tw-p-4 tw-rounded-lg tw-overflow-hidden tw-text-sm sm:tw-text-base\">\n        <div class=\"scanline\"><\/div>\n\n        <!-- Top Bar -->\n        <header class=\"tw-flex tw-justify-between tw-items-center tw-mb-4 tw-border-b tw-border-border tw-pb-2\">\n            <div class=\"tw-flex tw-items-center tw-gap-2\">\n                <div\n                    class=\"tw-w-2 tw-h-2 sm:tw-w-3 sm:tw-h-3 tw-bg-neon tw-rounded-full tw-animate-pulse tw-shadow-neon\">\n                <\/div>\n                <h1 id=\"appTitle\"\n                    class=\"tw-text-neon tw-font-display tw-text-lg sm:tw-text-xl tw-tracking-widest tw-truncate\">\u4e8c\u9032\u4f4d\u5100\u8868\u677f\n                    v1.0<\/h1>\n            <\/div>\n            <div class=\"tw-flex tw-gap-4 tw-text-base tw-shrink-0\">\n                <button id=\"langZh\" onclick=\"window.binaryGame.switchLanguage('zh')\"\n                    class=\"tw-px-4 tw-py-2 tw-border-2 tw-border-neon tw-text-neon tw-bg-black tw-transition-colors\">\u4e2d\u6587<\/button>\n                <button id=\"langEn\" onclick=\"window.binaryGame.switchLanguage('en')\"\n                    class=\"tw-px-4 tw-py-2 tw-border-2 tw-border-gray-800 tw-text-gray-500 tw-bg-black hover:tw-border-gray-600 hover:tw-text-gray-400 tw-transition-colors\">EN<\/button>\n            <\/div>\n        <\/header>\n\n        <!-- Dashboard Grid -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-2 sm:tw-gap-4\">\n\n            <!-- Left Column: Stats & Target -->\n            <div class=\"lg:tw-col-span-4 tw-space-y-2 sm:tw-space-y-4\">\n                <!-- System Stats Panel -->\n                <div class=\"tw-bg-panel tw-border tw-border-border tw-rounded-sm tw-p-3 sm:tw-p-4\">\n                    <h2 id=\"sessionStats\"\n                        class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-uppercase tw-mb-3 tw-flex tw-items-center tw-gap-2\">\n                        <svg class=\"tw-w-3 tw-h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\">\n                            <\/path>\n                        <\/svg>\n                        \u5de5\u4f5c\u968e\u6bb5\u7d71\u8a08\n                    <\/h2>\n                    <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 sm:tw-gap-4\">\n                        <div>\n                            <div id=\"levelLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-400\">\u95dc\u5361<\/div>\n                            <div id=\"level\" class=\"tw-text-xl sm:tw-text-2xl tw-font-display tw-text-white\">1<\/div>\n                        <\/div>\n                        <div>\n                            <div id=\"scoreLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-400\">\u5f97\u5206<\/div>\n                            <div id=\"score\" class=\"tw-text-xl sm:tw-text-2xl tw-font-display tw-text-neon\">0<\/div>\n                        <\/div>\n                        <div>\n                            <div id=\"uptimeLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-400\">\u904b\u884c\u6642\u9593<\/div>\n                            <div id=\"uptime\" class=\"tw-text-xs sm:tw-text-sm tw-font-mono tw-text-white\">00:00:00<\/div>\n                        <\/div>\n                        <div>\n                            <div id=\"statusLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-400\">\u7cfb\u7d71\u72c0\u614b<\/div>\n                            <div id=\"statusValue\" class=\"tw-text-xs sm:tw-text-sm tw-font-mono tw-text-neon\">\u6b63\u5e38<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Target Panel -->\n                <div\n                    class=\"tw-bg-panel tw-border tw-border-border tw-rounded-sm tw-p-3 sm:tw-p-4 tw-relative tw-overflow-hidden\">\n                    <div class=\"tw-absolute tw-top-0 tw-right-0 tw-p-2 tw-opacity-10\">\n                        <svg class=\"tw-w-12 tw-h-12 sm:tw-w-16 sm:tw-h-16 tw-text-neon\" fill=\"currentColor\"\n                            viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h2 id=\"targetLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-uppercase tw-mb-2\">\u76ee\u6a19\u6578\u503c\n                    <\/h2>\n                    <div class=\"tw-flex tw-items-end tw-gap-2\">\n                        <span id=\"targetNumber\"\n                            class=\"tw-text-4xl sm:tw-text-5xl tw-font-display tw-text-neon text-glow\">5<\/span>\n                        <span id=\"decimalLabel\" class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-mb-2\">\u5341\u9032\u4f4d<\/span>\n                    <\/div>\n\n                    <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-border\">\n                        <h2 id=\"currentLabel\"\n                            class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-uppercase tw-mb-1\">\u7576\u524d\u7e3d\u548c<\/h2>\n                        <div class=\"tw-flex tw-justify-between tw-items-center\">\n                            <span id=\"currentValue\"\n                                class=\"tw-text-2xl sm:tw-text-3xl tw-font-display tw-text-white\">0<\/span>\n                            <div id=\"diffIndicator\"\n                                class=\"tw-text-[10px] sm:tw-text-xs tw-px-2 tw-py-1 tw-rounded tw-bg-gray-800 tw-text-gray-400\">\n                                \u5dee\u503c: -5<\/div>\n                        <\/div>\n                        <!-- Progress Bar -->\n                        <div class=\"tw-w-full tw-h-1 tw-bg-gray-800 tw-mt-2 tw-rounded-full tw-overflow-hidden\">\n                            <div id=\"progressBar\" class=\"tw-h-full tw-bg-neon tw-transition-all tw-duration-300 tw-w-0\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right Column: Bit Registers (Cards) -->\n            <div class=\"lg:tw-col-span-8 tw-space-y-2 sm:tw-space-y-4\">\n                <div\n                    class=\"tw-bg-panel tw-border tw-border-border tw-rounded-sm tw-p-3 sm:tw-p-4 tw-h-full tw-flex tw-flex-col\">\n                    <h2\n                        class=\"tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-uppercase tw-mb-4 tw-flex tw-items-center tw-justify-between\">\n                        <span id=\"bitRegisters\">\u4f4d\u5143\u66ab\u5b58\u5668<\/span>\n                        <span id=\"binaryResult\" class=\"tw-font-mono tw-text-neon tw-text-xs sm:tw-text-sm\">11111 =\n                            31<\/span>\n                    <\/h2>\n\n                    <!-- Registers Container -->\n                    <div id=\"cardsContainer\"\n                        class=\"tw-flex-1 tw-flex tw-flex-nowrap tw-justify-center tw-items-center tw-gap-1 sm:tw-gap-4 tw-content-center tw-py-4 sm:tw-py-8 tw-overflow-x-auto sm:tw-overflow-visible tw-px-2\">\n                        <!-- Registers injected here -->\n                    <\/div>\n\n                    <!-- Tutorial \/ Log -->\n                    <div id=\"consolePanel\"\n                        class=\"tw-mt-auto tw-bg-black tw-border tw-border-border tw-p-2 tw-font-mono tw-text-[10px] sm:tw-text-xs tw-h-24 sm:tw-h-32 tw-overflow-y-auto tw-font-thin\">\n                        <div id=\"systemLog\" class=\"tw-text-gray-500 tw-border-b tw-border-gray-800 tw-pb-1 tw-mb-1\">\u7cfb\u7d71\u65e5\u8a8c\n                        <\/div>\n                        <div id=\"logContent\" class=\"tw-space-y-1\">\n                            <div class=\"tw-text-neon\">> \u7cfb\u7d71\u521d\u59cb\u5316\u5b8c\u6210&#8230;<\/div>\n                            <div class=\"tw-text-gray-400\">> \u7b49\u5f85\u8f38\u5165&#8230;<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Controls Footer -->\n        <div class=\"tw-mt-4 tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-2 sm:tw-gap-4\">\n            <button onclick=\"window.binaryGame.checkAnswer()\" id=\"submitBtn\"\n                class=\"tw-bg-neon\/10 tw-border tw-border-neon tw-text-neon hover:tw-bg-neon hover:tw-text-black tw-p-3 tw-font-bold tw-tracking-wider tw-transition-all tw-uppercase tw-flex tw-items-center tw-justify-center tw-gap-2 tw-group tw-text-sm sm:tw-text-base\">\n                <span>[ \u57f7\u884c ]<\/span>\n                <span class=\"group-hover:tw-translate-x-1 tw-transition-transform\">\u2192<\/span>\n            <\/button>\n            <button onclick=\"window.binaryGame.nextLevel()\" id=\"nextBtn\"\n                class=\"tw-hidden tw-bg-info\/10 tw-border tw-border-info tw-text-info hover:tw-bg-info hover:tw-text-black tw-p-3 tw-font-bold tw-tracking-wider tw-transition-all tw-uppercase tw-text-sm sm:tw-text-base\">\n                [ \u4e0b\u4e00\u95dc ]\n            <\/button>\n            <button onclick=\"window.binaryGame.resetCards()\" id=\"resetBtn\"\n                class=\"tw-bg-panel tw-border tw-border-border tw-text-gray-400 hover:tw-border-white hover:tw-text-white tw-p-3 tw-font-bold tw-tracking-wider tw-transition-all tw-uppercase tw-text-sm sm:tw-text-base\">\n                [ \u91cd\u7f6e ]\n            <\/button>\n            <button onclick=\"window.binaryGame.endGame()\" id=\"quitBtn\"\n                class=\"tw-bg-alert\/10 tw-border tw-border-alert tw-text-alert hover:tw-bg-alert hover:tw-text-black tw-p-3 tw-font-bold tw-tracking-wider tw-transition-all tw-uppercase tw-text-sm sm:tw-text-base\">\n                [ \u7d42\u6b62 ]\n            <\/button>\n        <\/div>\n\n        <!-- Modal Overlay -->\n        <div id=\"gameOver\"\n            class=\"tw-fixed tw-inset-0 tw-bg-black\/90 tw-z-50 tw-hidden tw-flex tw-items-center tw-justify-center tw-backdrop-blur-sm tw-p-4\"\n            style=\"position: absolute;\">\n            <div\n                class=\"tw-bg-panel tw-border tw-border-neon tw-p-6 sm:tw-p-8 tw-max-w-md tw-w-full tw-shadow-neon tw-relative\">\n                <div class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-1 tw-bg-neon\"><\/div>\n                <h2 id=\"gameOverTitle\"\n                    class=\"tw-text-2xl sm:tw-text-3xl tw-font-display tw-text-neon tw-mb-6 tw-text-center text-glow\">\n                    \u5de5\u4f5c\u968e\u6bb5\u5df2\u7d42\u6b62<\/h2>\n\n                <div class=\"tw-space-y-4 tw-font-mono tw-text-xs sm:tw-text-sm tw-mb-8\">\n                    <div class=\"tw-flex tw-justify-between tw-border-b tw-border-gray-800 tw-pb-2\">\n                        <span id=\"finalLevelLabel\" class=\"tw-text-gray-500\">\u5b8c\u6210\u95dc\u5361<\/span>\n                        <span id=\"finalLevel\" class=\"tw-text-white\">0<\/span>\n                    <\/div>\n                    <div class=\"tw-flex tw-justify-between tw-border-b tw-border-gray-800 tw-pb-2\">\n                        <span id=\"finalScoreLabel\" class=\"tw-text-gray-500\">\u7e3d\u5f97\u5206<\/span>\n                        <span id=\"finalScore\" class=\"tw-text-neon\">0<\/span>\n                    <\/div>\n                    <div class=\"tw-flex tw-justify-between tw-border-b tw-border-gray-800 tw-pb-2\">\n                        <span id=\"correctLabel\" class=\"tw-text-gray-500\">\u6b63\u78ba\u64cd\u4f5c<\/span>\n                        <span id=\"correctAnswers\" class=\"tw-text-white\">0<\/span>\n                    <\/div>\n                    <div class=\"tw-flex tw-justify-between\">\n                        <span id=\"accuracyLabel\" class=\"tw-text-gray-500\">\u6548\u7387<\/span>\n                        <span id=\"accuracy\" class=\"tw-text-white\">0%<\/span>\n                    <\/div>\n                <\/div>\n\n                <button onclick=\"window.binaryGame.restartGame()\" id=\"restartBtn\"\n                    class=\"tw-w-full tw-bg-neon tw-text-black tw-font-bold tw-py-3 hover:tw-bg-white tw-transition-colors tw-uppercase tw-tracking-widest tw-text-sm sm:tw-text-base\">\n                    [ \u91cd\u555f\u7cfb\u7d71 ]\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Encapsulate game logic in a namespace to avoid global conflicts\n        window.binaryGame = (function () {\n            const cardValues = [16, 8, 4, 2, 1];\n            let currentTarget = 5;\n            let currentLevel = 1;\n            let currentScore = 0;\n            let cardStates = [true, true, true, true, true];\n            let correctCount = 0;\n            let totalAttempts = 0;\n            let currentLang = 'zh';\n            let levelCompleted = false;\n            let startTime = Date.now();\n\n            \/\/ Update Uptime\n            setInterval(() => {\n                const diff = Math.floor((Date.now() - startTime) \/ 1000);\n                const h = Math.floor(diff \/ 3600).toString().padStart(2, '0');\n                const m = Math.floor((diff % 3600) \/ 60).toString().padStart(2, '0');\n                const s = (diff % 60).toString().padStart(2, '0');\n                const el = document.getElementById('uptime');\n                if (el) el.textContent = `${h}:${m}:${s}`;\n            }, 1000);\n\n            function log(msg, type = 'info') {\n                const logPanel = document.getElementById('logContent');\n                if (!logPanel) return;\n                const entry = document.createElement('div');\n                const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });\n                entry.textContent = `[${timestamp}] ${msg}`;\n\n                if (type === 'error') entry.className = 'tw-text-alert';\n                else if (type === 'success') entry.className = 'tw-text-neon';\n                else entry.className = 'tw-text-gray-400';\n\n                logPanel.prepend(entry);\n            }\n\n            const i18n = {\n                zh: {\n                    appTitle: '\u4e8c\u9032\u4f4d\u5100\u8868\u677f v1.0',\n                    sessionStats: '\u5de5\u4f5c\u968e\u6bb5\u7d71\u8a08',\n                    levelLabel: '\u95dc\u5361',\n                    scoreLabel: '\u5f97\u5206',\n                    uptimeLabel: '\u904b\u884c\u6642\u9593',\n                    statusLabel: '\u7cfb\u7d71\u72c0\u614b',\n                    statusValue: '\u6b63\u5e38',\n                    statusError: '\u7570\u5e38',\n                    targetLabel: '\u76ee\u6a19\u6578\u503c',\n                    decimalLabel: '\u5341\u9032\u4f4d',\n                    currentLabel: '\u7576\u524d\u7e3d\u548c',\n                    diffPrefix: '\u5dee\u503c',\n                    bitRegisters: '\u4f4d\u5143\u66ab\u5b58\u5668',\n                    systemLog: '\u7cfb\u7d71\u65e5\u8a8c',\n                    valPrefix: '\u4f4d\u503c',\n                    submitBtn: '[ \u57f7\u884c ]',\n                    resetBtn: '[ \u91cd\u7f6e ]',\n                    nextBtn: '[ \u4e0b\u4e00\u95dc ]',\n                    quitBtn: '[ \u7d42\u6b62 ]',\n                    gameOverTitle: '\u5de5\u4f5c\u968e\u6bb5\u5df2\u7d42\u6b62',\n                    finalLevelLabel: '\u5b8c\u6210\u95dc\u5361',\n                    finalScoreLabel: '\u7e3d\u5f97\u5206',\n                    correctLabel: '\u6b63\u78ba\u64cd\u4f5c',\n                    accuracyLabel: '\u6548\u7387',\n                    restartBtn: '[ \u91cd\u555f\u7cfb\u7d71 ]',\n                    correct: '\u64cd\u4f5c\u6210\u529f\u3002\u76ee\u6a19\u9054\u6210\u3002',\n                    incorrect: '\u932f\u8aa4\uff1a\u6578\u503c\u4e0d\u7b26\u3002\u9810\u671f {target}\uff0c\u5be6\u969b {current}\u3002',\n                    logNewTarget: '\u65b0\u76ee\u6a19\u5df2\u8a2d\u5b9a: {target}',\n                    logReset: '\u66ab\u5b58\u5668\u5df2\u91cd\u7f6e',\n                    logLevel: '\u95dc\u5361 {level} \u5df2\u555f\u52d5',\n                    logTerminated: '\u4f7f\u7528\u8005\u7d42\u6b62\u4e86\u5de5\u4f5c\u968e\u6bb5',\n                    tutorial: [\n                        '\u521d\u59cb\u5316\u6559\u5b78\u5e8f\u5217...',\n                        '\u2022 \u5207\u63db\u66ab\u5b58\u5668 [\u4f4d\u5143] \u4ee5\u4fee\u6539\u7e3d\u548c',\n                        '\u2022 \u4f4d\u5143\u503c\uff1a16, 8, 4, 2, 1',\n                        '\u2022 \u5339\u914d\u76ee\u6a19\u6578\u503c\u4ee5\u7e7c\u7e8c',\n                        '\u7cfb\u7d71\u5c31\u7dd2\u3002'\n                    ]\n                },\n                en: {\n                    appTitle: 'BINARY_DIGITS_v1.0',\n                    sessionStats: 'SESSION_STATS',\n                    levelLabel: 'LEVEL',\n                    scoreLabel: 'SCORE',\n                    uptimeLabel: 'UPTIME',\n                    statusLabel: 'STATUS',\n                    statusValue: 'ACTIVE',\n                    statusError: 'ERROR',\n                    targetLabel: 'TARGET_VALUE',\n                    decimalLabel: 'DECIMAL',\n                    currentLabel: 'CURRENT_SUM',\n                    diffPrefix: 'DIFF',\n                    bitRegisters: 'BIT_REGISTERS',\n                    systemLog: 'SYSTEM_LOG',\n                    valPrefix: 'VAL',\n                    submitBtn: '[ EXECUTE ]',\n                    resetBtn: '[ RESET ]',\n                    nextBtn: '[ NEXT_LEVEL ]',\n                    quitBtn: '[ TERMINATE ]',\n                    gameOverTitle: 'SESSION_TERMINATED',\n                    finalLevelLabel: 'LEVELS_CLEARED',\n                    finalScoreLabel: 'TOTAL_SCORE',\n                    correctLabel: 'CORRECT_OPS',\n                    accuracyLabel: 'EFFICIENCY',\n                    restartBtn: '[ REBOOT_SYSTEM ]',\n                    correct: 'OPERATION SUCCESSFUL. TARGET MATCHED.',\n                    incorrect: 'ERROR: VALUE MISMATCH. EXPECTED {target}, GOT {current}.',\n                    logNewTarget: 'NEW TARGET SET: {target}',\n                    logReset: 'REGISTERS RESET',\n                    logLevel: 'LEVEL {level} INITIATED',\n                    logTerminated: 'SESSION TERMINATED BY USER',\n                    tutorial: [\n                        'INITIALIZING TUTORIAL SEQUENCE...',\n                        '\u2022 TOGGLE REGISTERS [BITS] TO MODIFY SUM',\n                        '\u2022 BIT VALUES: 16, 8, 4, 2, 1',\n                        '\u2022 MATCH TARGET VALUE TO PROCEED',\n                        'SYSTEM READY.'\n                    ]\n                }\n            };\n\n            function switchLanguage(lang) {\n                currentLang = lang;\n\n                const btnZh = document.getElementById('langZh');\n                const btnEn = document.getElementById('langEn');\n\n                if (lang === 'zh') {\n                    btnZh.className = \"tw-px-4 tw-py-2 tw-border-2 tw-border-neon tw-text-neon tw-bg-black tw-transition-colors\";\n                    btnEn.className = \"tw-px-4 tw-py-2 tw-border-2 tw-border-gray-800 tw-text-gray-500 tw-bg-black hover:tw-border-gray-600 hover:tw-text-gray-400 tw-transition-colors\";\n                } else {\n                    btnEn.className = \"tw-px-4 tw-py-2 tw-border-2 tw-border-neon tw-text-neon tw-bg-black tw-transition-colors\";\n                    btnZh.className = \"tw-px-4 tw-py-2 tw-border-2 tw-border-gray-800 tw-text-gray-500 tw-bg-black hover:tw-border-gray-600 hover:tw-text-gray-400 tw-transition-colors\";\n                }\n\n                const t = i18n[lang];\n\n                document.getElementById('appTitle').textContent = t.appTitle;\n                document.getElementById('sessionStats').innerHTML = `<svg class=\"tw-w-3 tw-h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"><\/path><\/svg> ${t.sessionStats}`;\n                document.getElementById('levelLabel').textContent = t.levelLabel;\n                document.getElementById('scoreLabel').textContent = t.scoreLabel;\n                document.getElementById('uptimeLabel').textContent = t.uptimeLabel;\n                document.getElementById('statusLabel').textContent = t.statusLabel;\n                const statusEl = document.getElementById('statusValue');\n                if (statusEl.classList.contains('tw-text-alert')) {\n                    statusEl.textContent = t.statusError;\n                } else {\n                    statusEl.textContent = t.statusValue;\n                }\n\n                document.getElementById('targetLabel').textContent = t.targetLabel;\n                document.getElementById('decimalLabel').textContent = t.decimalLabel;\n                document.getElementById('currentLabel').textContent = t.currentLabel;\n                document.getElementById('bitRegisters').textContent = t.bitRegisters;\n                document.getElementById('systemLog').textContent = t.systemLog;\n\n                document.querySelector('#submitBtn span').textContent = t.submitBtn;\n                document.getElementById('nextBtn').textContent = t.nextBtn;\n                document.getElementById('resetBtn').textContent = t.resetBtn;\n                document.getElementById('quitBtn').textContent = t.quitBtn;\n\n                document.getElementById('gameOverTitle').textContent = t.gameOverTitle;\n                document.getElementById('finalLevelLabel').textContent = t.finalLevelLabel;\n                document.getElementById('finalScoreLabel').textContent = t.finalScoreLabel;\n                document.getElementById('correctLabel').textContent = t.correctLabel;\n                document.getElementById('accuracyLabel').textContent = t.accuracyLabel;\n                document.getElementById('restartBtn').textContent = t.restartBtn;\n\n                createCards();\n                updateCurrentValue();\n            }\n\n            function createCards() {\n                const container = document.getElementById('cardsContainer');\n                container.innerHTML = '';\n\n                cardValues.forEach((value, index) => {\n                    const register = document.createElement('div');\n                    register.className = 'tw-flex tw-flex-col tw-items-center tw-gap-1 tw-group tw-cursor-pointer';\n                    register.onclick = () => toggleCard(index);\n\n                    \/\/ Card Container (Perspective)\n                    const cardBox = document.createElement('div');\n                    cardBox.id = `card-box-${index}`;\n                    cardBox.className = 'card-perspective tw-w-14 tw-h-20 sm:tw-w-16 sm:tw-h-24 tw-relative';\n\n                    \/\/ Card Inner (Transform)\n                    const cardInner = document.createElement('div');\n                    cardInner.id = `card-inner-${index}`;\n                    cardInner.className = 'card-inner';\n\n                    \/\/ Front Face (With Dots)\n                    const cardFront = document.createElement('div');\n                    cardFront.className = 'card-face card-front tw-flex-col tw-p-2';\n\n                    \/\/ Dots Container\n                    const dotsContainer = document.createElement('div');\n\n                    \/\/ Determine grid columns based on value\n                    let gridCols = 'tw-grid-cols-1';\n                    if (value === 4 || value === 8) {\n                        gridCols = 'tw-grid-cols-2';\n                    } else if (value === 16) {\n                        gridCols = 'tw-grid-cols-4';\n                    }\n\n                    dotsContainer.className = `tw-grid ${gridCols} tw-gap-1 tw-justify-items-center tw-content-center tw-w-full tw-h-full`;\n\n                    for (let i = 0; i < value; i++) {\n                        const dot = document.createElement('div');\n                        dot.className = 'tw-w-1.5 tw-h-1.5 sm:tw-w-2 sm:tw-h-2 tw-rounded-full tw-bg-neon';\n                        dotsContainer.appendChild(dot);\n                    }\n                    cardFront.appendChild(dotsContainer);\n\n                    \/\/ Back Face (Empty\/Off)\n                    const cardBack = document.createElement('div');\n                    cardBack.className = 'card-face card-back';\n\n                    \/\/ Assemble\n                    cardInner.appendChild(cardFront);\n                    cardInner.appendChild(cardBack);\n                    cardBox.appendChild(cardInner);\n\n                    const valueLabel = document.createElement('div');\n                    valueLabel.className = 'tw-text-[10px] sm:tw-text-xs tw-text-gray-500 tw-font-mono';\n                    valueLabel.textContent = `${i18n[currentLang].valPrefix}:${value}`;\n\n                    register.appendChild(valueLabel);\n                    register.appendChild(cardBox);\n                    container.appendChild(register);\n\n                    updateCardVisuals(index);\n                });\n            }\n\n            function updateCardVisuals(index) {\n                const cardBox = document.getElementById(`card-box-${index}`);\n\n                \/\/ If state is true (1), show front (dots). If false (0), show back (empty).\n                \/\/ Logic: \"Flipped\" usually means showing the back. \n                \/\/ Here, let's say:\n                \/\/ State 1 (Active) -> Show Front (Dots) -> No Flip Class\n                \/\/ State 0 (Inactive) -> Show Back (Empty) -> Add Flip Class\n\n                if (cardStates[index]) {\n                    cardBox.classList.remove('card-flipped');\n                } else {\n                    cardBox.classList.add('card-flipped');\n                }\n            }\n\n            function toggleCard(index) {\n                cardStates[index] = !cardStates[index];\n                updateCardVisuals(index);\n                updateCurrentValue();\n                updateBinaryResult();\n            }\n\n            function updateCurrentValue() {\n                const current = cardStates.reduce((sum, state, index) => {\n                    return sum + (state ? cardValues[index] : 0);\n                }, 0);\n                document.getElementById('currentValue').textContent = current;\n\n                const diff = current - currentTarget;\n                const diffEl = document.getElementById('diffIndicator');\n                const progressEl = document.getElementById('progressBar');\n                const prefix = i18n[currentLang].diffPrefix;\n\n                if (diff === 0) {\n                    diffEl.textContent = 'MATCH';\n                    diffEl.className = 'tw-text-[10px] sm:tw-text-xs tw-px-2 tw-py-1 tw-rounded tw-bg-neon tw-text-black tw-font-bold';\n                    progressEl.className = 'tw-h-full tw-bg-neon tw-transition-all tw-duration-300 tw-w-full';\n                } else {\n                    diffEl.textContent = `${prefix}: ${diff > 0 ? '+' : ''}${diff}`;\n                    diffEl.className = diff > 0 ? 'tw-text-[10px] sm:tw-text-xs tw-px-2 tw-py-1 tw-rounded tw-bg-warn tw-text-black' : 'tw-text-[10px] sm:tw-text-xs tw-px-2 tw-py-1 tw-rounded tw-bg-gray-800 tw-text-gray-400';\n\n                    const percent = Math.min(100, Math.max(0, (current \/ (currentTarget * 1.5)) * 100));\n                    progressEl.style.width = `${percent}%`;\n                    progressEl.className = diff > 0 ? 'tw-h-full tw-bg-warn tw-transition-all tw-duration-300' : 'tw-h-full tw-bg-gray-600 tw-transition-all tw-duration-300';\n                }\n            }\n\n            function updateBinaryResult() {\n                const binaryString = cardStates.map(state => state ? '1' : '0').join('');\n                const decimalValue = cardStates.reduce((sum, state, index) => {\n                    return sum + (state ? cardValues[index] : 0);\n                }, 0);\n                document.getElementById('binaryResult').textContent = `${binaryString} = ${decimalValue}`;\n            }\n\n            function generateTarget() {\n                const maxValue = Math.min(10 + currentLevel * 3, 31);\n                const minValue = Math.max(1, currentLevel - 1);\n                currentTarget = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;\n                document.getElementById('targetNumber').textContent = currentTarget;\n                log(i18n[currentLang].logNewTarget.replace('{target}', currentTarget));\n            }\n\n            function setStatus(type) {\n                const statusEl = document.getElementById('statusValue');\n                if (type === 'error') {\n                    statusEl.textContent = i18n[currentLang].statusError;\n                    statusEl.className = 'tw-text-xs sm:tw-text-sm tw-font-mono tw-text-alert';\n                } else {\n                    statusEl.textContent = i18n[currentLang].statusValue;\n                    statusEl.className = 'tw-text-xs sm:tw-text-sm tw-font-mono tw-text-neon';\n                }\n            }\n\n            function checkAnswer() {\n                const current = cardStates.reduce((sum, state, index) => {\n                    return sum + (state ? cardValues[index] : 0);\n                }, 0);\n\n                const nextBtn = document.getElementById('nextBtn');\n                const submitBtn = document.getElementById('submitBtn');\n                totalAttempts++;\n\n                if (current === currentTarget) {\n                    log(i18n[currentLang].correct, 'success');\n\n                    if (!levelCompleted) {\n                        currentScore += 10 * currentLevel;\n                        correctCount++;\n                        levelCompleted = true;\n                    }\n\n                    setStatus('normal');\n                    updateDisplay();\n                    nextBtn.classList.remove('tw-hidden');\n                    submitBtn.classList.add('tw-hidden');\n                } else {\n                    setStatus('error');\n                    const msg = i18n[currentLang].incorrect\n                        .replace('{current}', current)\n                        .replace('{target}', currentTarget);\n                    log(msg, 'error');\n                }\n            }\n\n            function resetCards() {\n                cardStates = [true, true, true, true, true];\n                cardValues.forEach((_, index) => {\n                    updateCardVisuals(index);\n                });\n                updateCurrentValue();\n                updateBinaryResult();\n                setStatus('normal');\n                log(i18n[currentLang].logReset, 'info');\n            }\n\n            function nextLevel() {\n                currentLevel++;\n                levelCompleted = false;\n                resetCards();\n                generateTarget();\n                updateDisplay();\n                setStatus('normal');\n                document.getElementById('nextBtn').classList.add('tw-hidden');\n                document.getElementById('submitBtn').classList.remove('tw-hidden');\n                log(i18n[currentLang].logLevel.replace('{level}', currentLevel), 'info');\n            }\n\n            function updateDisplay() {\n                document.getElementById('level').textContent = currentLevel;\n                document.getElementById('score').textContent = currentScore;\n            }\n\n            function endGame() {\n                document.getElementById('finalLevel').textContent = currentLevel;\n                document.getElementById('finalScore').textContent = currentScore;\n                document.getElementById('correctAnswers').textContent = correctCount;\n\n                const accuracyRate = totalAttempts > 0 ? Math.round((correctCount \/ totalAttempts) * 100) : 0;\n                document.getElementById('accuracy').textContent = accuracyRate + '%';\n\n                const modal = document.getElementById('gameOver');\n                modal.classList.remove('tw-hidden');\n                log(i18n[currentLang].logTerminated, 'warn');\n            }\n\n            function restartGame() {\n                currentLevel = 1;\n                currentScore = 0;\n                correctCount = 0;\n                totalAttempts = 0;\n                levelCompleted = false;\n                startTime = Date.now();\n\n                const modal = document.getElementById('gameOver');\n                modal.classList.add('tw-hidden');\n\n                resetCards();\n                generateTarget();\n                updateDisplay();\n                document.getElementById('nextBtn').classList.add('tw-hidden');\n                document.getElementById('submitBtn').classList.remove('tw-hidden');\n\n                document.getElementById('logContent').innerHTML = '';\n                i18n[currentLang].tutorial.forEach(line => log(line));\n            }\n\n            function initGame() {\n                createCards();\n                generateTarget();\n                updateDisplay();\n                i18n[currentLang].tutorial.forEach(line => log(line));\n            }\n\n            \/\/ Expose public methods\n            return {\n                initGame,\n                switchLanguage,\n                checkAnswer,\n                nextLevel,\n                resetCards,\n                endGame,\n                restartGame\n            };\n        })();\n\n        \/\/ Start the game\n        window.binaryGame.initGame();\n    <\/script>\n<\/div>\n\n\n\n<p class=\"\">\u53c3\u8003\u4f86\u6e90\uff1a<a href=\"https:\/\/www.csunplugged.org\/en\/topics\/binary-numbers\/\" target=\"_blank\" rel=\"noopener\">csunplugged binary-numbers<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u4e8c\u9032\u4f4d\u662f\u96fb\u8166\u79d1\u5b78\u7684\u57fa\u77f3\uff0c\u4f46\u5c0d\u5b69\u5b50\u4f86\u8aaa\uff0c\u5b83\u5f80\u5f80\u53ea\u662f\u4e00\u5806\u67af\u71e5\u7684 0 \u548c 1\u3002\u9019\u4efd\u5e38\u898b\u7684\u300c\u9ede\u6578\u5361\u300d\u6559\u6750\uff08Binary [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[9,17],"tags":[13,26,12,11,24],"class_list":["post-506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cs-unplugged","category-representing-information","tag-13","tag-26","tag-12","tag-11","tag-24"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/posts\/506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/comments?post=506"}],"version-history":[{"count":20,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/posts\/506\/revisions"}],"predecessor-version":[{"id":881,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/posts\/506\/revisions\/881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/media\/510"}],"wp:attachment":[{"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/media?parent=506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/categories?post=506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learndeeplytw.com\/zh_tw\/wp-json\/wp\/v2\/tags?post=506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}