<div class="g-meta" style="display:none">12 &#x6708; 9 &#x65E5;&#x8D77;&#xFF0C;&#x9032;&#x5165;&#x98DF;&#x8086;&#x3001;&#x6232;&#x9662;&#x3001;&#x7F8E;&#x5BB9;&#x9662;&#x3001;GYM&#x3001;&#x4E3B;&#x984C;&#x516C;&#x5712;&#x3001;&#x6309;&#x6469;&#x9662;&#xFF0C;&#x5168;&#x90E8;&#x5F37;&#x5236;&#x4F7F;&#x7528;&#x300C;&#x5B89;&#x5FC3;&#x51FA;&#x884C;&#x300D;&#x3002;&#x561F;&#x561F;&#x561F;&#x561F;&#x2026;&#x2026;Welcome to &#x561F;&#x78BC;&#x4E4B;&#x57CE;&#xFF01;</div><style>
.g-body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  color: #444;
}
.g-kicker {
  text-align: center;
  margin-bottom: 20px;
}
.g-kicker .g-inner {
  display: inline;
  padding: 0 2px 5px 2px;
  border-bottom: 1px solid #d3d3d3;
}
.g-header .g-headline {
  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 700;
  margin: 0 auto 25px auto;
  font-size: 32px;
  line-height: 1.8;
  max-width: 720px;
}
.g-subhed {
  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 700;
  margin: 60px auto 25px auto;
  font-size: 24px;
  max-width: 600px;
}
.g-text {
  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  max-width: 600px;
  margin: 16px auto;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}
.g-bold {
  font-weight: 700;
}
.g-graphic {
  margin: 25px auto;
}
.g-graphic-text {
  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.g-image {
  margin: 35px auto;
}
.g-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.g-image .g-credit {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  color: #999;
  display: block;
}
.g-refer {
  border: 1px solid #ececec;
  border-radius: 5px;
  background: rgba(253, 232, 0, 0.05);
  padding: 10px 20px;
  max-width: 460px;
  margin: 35px auto;
}
.g-refer .g-text {
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}
.g-refer .g-text:first-child {
  margin-bottom: 5px;
  font-weight: 700;
}
.g-refer .g-bullet:before {
  content: "•";
  position: absolute;
  margin-left: -10px;
}
.g-break {
  margin: 50px auto;
  text-align: center;
}
.g-break em {
  margin-right: 40px;
  text-align: center;
}
.g-break em:last-child {
  margin-right: 0;
}
.cover-image-wrapper.mobile,
.author-wrapper {
  display: none !important;
}
.g-promo {
  max-width: 600px;
  margin: 25px auto;
  padding: 25px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.g-promo a {
  color: #444;
  text-decoration: none;
  transition: opacity 0.2s;
}
.g-promo a:hover {
  opacity: 0.6;
}
.g-promo .g-promo-asset-cont,
.g-promo .g-promo-text-cont {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
@media screen and (min-width: 600px) {
  .g-promo .g-promo-asset-cont {
    width: calc(68% - 10px);
  }
}
@media screen and (min-width: 600px) {
  .g-promo .g-promo-text-cont {
    width: calc(32% - 10px);
  }
}
.g-promo .g-promo-text-cont {
  margin-right: 10px;
}
.g-promo .g-promo-tag {
  font-weight: 700;
  margin-bottom: 3px;
}
.g-promo .g-promo-hed {
  font-weight: 700;
  margin-bottom: 10px;
}
@media screen and (min-width: 460px) {
  .g-promo .g-promo-hed {
    max-width: none;
  }
}
.g-promo .g-promo-text {
  margin-bottom: 10px;
  font-size: 15px;
  padding: 0 16px;
}
@media screen and (min-width: 460px) {
  .g-promo .g-promo-text {
    padding: 0;
  }
}
.g-promo .g-youtube-cont {
  width: 100%;
  padding-bottom: 56%;
  position: relative;
}
.g-promo .g-youtube-cont iframe {
  position: absolute;
  top: 0;
  left: 0;
}
.g-promo .g-img-cont img {
  width: 100%;
}
.g-promo .g-mobile-hed {
  display: inline;
}
@media screen and (min-width: 460px) {
  .g-promo .g-mobile-hed {
    display: none;
  }
}
.g-promo .g-desktop-hed {
  display: none;
}
@media screen and (min-width: 460px) {
  .g-promo .g-desktop-hed {
    display: block;
  }
}
.g-note {
  font-size: 13px;
  text-align: center;
  color: #999;
}
html,
body {
  background: #00ac4e;
  margin: 0;
  padding: 0;
}
.g-body {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  top: 28px;
}
@media screen and (max-width: 1199px) {
  .g-body {
    height: calc(100% - 60px);
  }
}
@media screen and (max-width: 600px) {
  .g-body {
    top: 33px;
  }
}
.g-body video {
  user-select: none;
  pointer-events: none;
}
.g-body .g-gameover,
.g-body .g-start-button {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}
.g-body .g-gameover img,
.g-body .g-start-button img {
  padding-top: 40vh;
}
.g-body .g-gameover.g-active,
.g-body .g-start-button.g-active {
  display: block;
  z-index: 100;
}
.g-body .g-gameover img:last-child {
  padding-top: 0;
}
.g-body .g-start-button {
  z-index: 11;
}
.g-body .g-start-button:hover {
  cursor: pointer;
}
.g-body .g-start-button .g-instructions {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.g-body .g-start-button .g-instructions img {
  width: 100%;
  padding-top: 0;
}
.g-body .g-start-button .g-instructions .g-img-cont {
  border: 1px solid #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  width: 90%;
  left: 5%;
  padding-top: 0;
  position: absolute;
  bottom: 20px;
}
.g-body .g-start-button .g-instructions .g-i-each {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33%;
  height: 100%;
}
.g-body .g-start-button .g-instructions .g-i-1 {
  left: 33%;
}
.g-body .g-start-button .g-instructions .g-i-2 {
  left: 66%;
}
.g-body .g-score {
  position: absolute;
  top: 20px;
  left: 20px;
}
.g-body .g-score .g-s {
  color: #fff;
}
.g-body .g-score .g-s img {
  width: 66px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}
.g-body .g-score .g-n {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  color: #ffdb4b;
  font-weight: 700;
  font-size: 20px;
}
.g-body .g-body-inner {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  width: calc(100% - 15px);
  height: calc(100% - 40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.g-body .g-main {
  width: 80%;
}
.g-body img {
  width: 100%;
}
.g-body .g-door {
  width: 50px;
  margin: 5px auto 10px auto;
  z-index: 4;
  background: #00ac4e;
  height: 80px;
}
.g-body .g-man {
  width: 45px;
  position: absolute;
  bottom: 0;
}
.g-body .g-overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.g-body .g-shot {
  fill: #ffd617;
}
.g-body .g-dootsound {
  display: none;
}
.g-body .g-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.g-body .g-buttons img {
  width: 100%;
  padding-top: 0;
}
.g-body .g-buttons .g-img-cont {
  border: 1px solid #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  width: 90%;
  left: 5%;
  padding-top: 0;
  position: absolute;
  bottom: 20px;
}
.g-body .g-buttons .g-button {
  position: absolute;
  width: 25%;
  height: 100%;
}
.g-body .g-buttons .g-shoot {
  left: auto;
  right: 10px;
}
.g-body .g-buttons .g-right {
  left: 25%;
}
#article_details_top_banner_desktop,
.ArticleDetail_article--specialLayout__Z5ois header,
.ArticleTags_root__22wDE,
.LikeCoinButton_likeCoinButton__11znt,
.ArticleDetailSpecialLayout_articleDetail__relatedArticlesContainer__1Rlzq,
.ArticleDetail_pageFlip__2JpX2,
.ArticleDetail_bottomAd__1pMho,
.HeaderSubNav_headerSubNav__3_UCL,
.Footer_footer__1_KSh,
.ArticleDetail_postCommentButtonContainer__PoXtv {
  display: none;
}
@media screen and (max-width: 1199px) {
  .ArticleDetail_articleShareWidget__1M_8z {
    top: auto;
    position: fixed;
    width: 100%;
    left: 0;
  }
}
.ArticleDetail_articleShareWidget--specialLayout__FO5Oh {
  padding-top: 100px;
}
</style>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=VT323&amp;display=swap" rel="stylesheet">

<div class="g-body">

	<div class="g-body-inner">
		<div class="g-score">
			<div class="g-s"><img src="https://interactive.thestandnews.com/2021/11/leavehome/score.png?fcygvuhbj"><div class="g-n">0</div></div>
		</div>
		<div class="g-door"><img src="https://interactive.thestandnews.com/2021/11/leavehome/door.png?ghvjb"></div>
		<div class="g-main"></div>
		<div class="g-man"><img src="https://interactive.thestandnews.com/2021/11/leavehome/man.png?ghvjb"></div>
		<div class="g-overlay-svg"></div>
		<div class="g-gameover">
			<img src="https://interactive.thestandnews.com/2021/11/leavehome/gameover.png?ghvjb">
			<img class="g-replay" src="https://interactive.thestandnews.com/2021/11/leavehome/replay.png?ghvjb">
		</div>
		<div class="g-start-button g-active">
			<img src="https://interactive.thestandnews.com/2021/11/leavehome/start.png?ghvjb">
		</div>
		<video class="g-dootsound" playsinline src="https://interactive.thestandnews.com/2021/11/leavehome/doot_1.mp4"></video>
		<div class="g-buttons">
			<div class="g-button g-left" data-id="left">
				<div class="g-img-cont"><img src="https://interactive.thestandnews.com/2021/11/leavehome/left.png?ghvjb"></div>
			</div>
			<div class="g-button g-right" data-id="right">
				<div class="g-img-cont"><img src="https://interactive.thestandnews.com/2021/11/leavehome/right.png?ghvjb"></div>
			</div>
			<div class="g-button g-shoot" data-id="shoot">
				<div class="g-img-cont"><img src="https://interactive.thestandnews.com/2021/11/leavehome/shoot.png?ghvjb"></div>
			</div>
		</div>
	</div>
</div>

<script src="https://interactive.thestandnews.com/scripts/d3_.js"></script>

12 月 9 日起，進入食肆、戲院、美容院、GYM、主題公園、按摩院，全部強制使用「安心出行」。嘟嘟嘟嘟……Welcome to 嘟碼之城！.g-body {  margin: 0 auto;  padding: 0;  width: 100%;  font-family: PingFang HK, Noto Sans TC, -apple-system, BlinkMacSystemFont,…

【小遊戲】嘟碼之城

相關文章

發表意見