JA

RAINBOW ISLANDS

作者:davidnurdin · リメイク
5.0 (1)
▶ 遊ぶ 💬 フィードバック ソース 🕘 バージョン 編集 GitHub
games/rainbow-island / site / ko / index.html · commit 572589f
<!doctype html><html lang="ko"><head>	<meta charset="utf-8" />	<meta name="viewport" content="width=device-width, initial-scale=1" />	<title>Rainbow Islands CPC 온라인 무료 플레이 – 브라우저에서 즐기는 PHP 리메이크</title>	<meta name="description" content="Amstrad CPC판 Rainbow Islands를 브라우저에서 무료로 플레이하세요. 7개의 섬, 28라운드, 보스, 무지개, 오리지널 음악을 JumPHP로 PHP에 리메이크했습니다. 키보드, 게임패드, 터치스크린 지원." />	<link rel="canonical" href="https://{{DOMAIN}}/ko/" />	<link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/" />	<link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/" />	<link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/" />	<link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/" />	<link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/" />	<link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/" />	<link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/" />	<link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/" />	<link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/" />	<link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/" />	<link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/" />	<link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/" />	<link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/" />	<link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/" />	<link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/" />	<meta name="robots" content="index, follow, max-image-preview:large" />	<meta name="theme-color" content="#1a3c8c" />	<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png" />	<link rel="apple-touch-icon" href="../images/apple-touch-icon.png" />	<meta property="og:type" content="website" />	<meta property="og:locale" content="ko_KR" />	<meta property="og:site_name" content="Rainbow Islands CPC" />	<meta property="og:title" content="Rainbow Islands (Amstrad CPC) – 온라인 플레이" />	<meta property="og:description" content="PHP로 리메이크한 CPC판 Rainbow Islands. 오리지널 그래픽과 음악 그대로, 7개의 섬과 28라운드를 브라우저에서 무료로." />	<meta property="og:url" content="https://{{DOMAIN}}/ko/" />	<meta property="og:image" content="https://{{DOMAIN}}/images/og.png" />	<meta property="og:image:width" content="1200" />	<meta property="og:image:height" content="630" />	<meta property="og:image:alt" content="Amstrad CPC판 Rainbow Islands의 로딩 화면, 네 개의 무지개 사이" />	<meta name="twitter:card" content="summary_large_image" />	<meta name="twitter:title" content="Rainbow Islands (Amstrad CPC) – 온라인 플레이" />	<meta name="twitter:description" content="7개의 섬, 28라운드, 보스, 오리지널 음악을 브라우저에서." />	<meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png" />	<script type="application/ld+json">	{		"@context": "https://schema.org",		"@graph": [			{				"@type": "VideoGame",				"@id": "https://{{DOMAIN}}/ko/#game",				"name": "Rainbow Islands (Amstrad CPC) – PHP 리메이크",				"alternateName": "Rainbow Islands CPC",				"url": "https://{{DOMAIN}}/ko/",				"image": "https://{{DOMAIN}}/images/og.png",				"screenshot": [					"https://{{DOMAIN}}/images/round-1.png",					"https://{{DOMAIN}}/images/round-10.png",					"https://{{DOMAIN}}/images/boss-28.png"				],				"description": "Amstrad CPC판 Rainbow Islands를 브라우저에서 즐길 수 있게 만든 리메이크: 7개의 섬, 28라운드, 보스, 무지개, 차오르는 물, 오리지널 그래픽과 음악.",				"genre": ["플랫폼", "아케이드", "레트로"],				"gamePlatform": ["웹 브라우저", "컴퓨터", "모바일"],				"applicationCategory": "Game",				"operatingSystem": "최신 브라우저",				"playMode": "SinglePlayer",				"numberOfPlayers": {"@type": "QuantitativeValue", "value": 1},				"inLanguage": "ko",				"isAccessibleForFree": true,				"offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR", "availability": "https://schema.org/InStock"},				"codeRepository": "https://github.com/davidnurdin/rainbow-island",				"potentialAction": {"@type": "PlayAction", "target": "https://{{DOMAIN}}/play/"}			},			{				"@type": "FAQPage",				"mainEntity": [					{"@type": "Question", "name": "플레이하려면 설치해야 하나요?",					 "acceptedAnswer": {"@type": "Answer", "text": "아니요. 게임은 브라우저에서 실행되며 컴퓨터와 스마트폰 모두 가능합니다. 처음 로딩할 때 약 10MB를 내려받고, 이후에는 모두 캐시됩니다."}},					{"@type": "Question", "name": "어떻게 플레이하나요?",					 "acceptedAnswer": {"@type": "Answer", "text": "방향키로 이동, 위쪽 또는 Z로 점프, 스페이스 또는 X로 무지개 발사, P 또는 Esc로 일시정지. 게임패드도 지원하며, 스마트폰에서는 왼쪽 엄지 아래에 조이스틱이 나타납니다."}},					{"@type": "Question", "name": "오리지널 게임인가요?",					 "acceptedAnswer": {"@type": "Answer", "text": "리메이크입니다. 프로그램은 PHP로 다시 작성했지만, 맵, 스프라이트, 폰트, 로딩 화면, 음악, 효과음은 1989년 Amstrad CPC 디스크에서 가져온 것입니다."}}				]			}		]	}	</script>	<style>		:root {			--sky: #1a3c8c;			--sky-deep: #0b1840;			--ink: #f4f1e8;			--muted: #b9c3e6;			--panel: #10265e;			--line: #2d4fa8;			--yellow: #ffd23f;			--red: #e8382f;			--cyan: #3fd0ff;			--rainbow: linear-gradient(90deg, #c4161c, #f26a1b, #ffd23f, #3fbf3f, #1f8fff, #6a2fd0, #b02fb0);		}		* { box-sizing: border-box; }		html { scroll-behavior: smooth; }		body {			margin: 0;			background: var(--sky-deep);			background-image: linear-gradient(180deg, var(--sky) 0, var(--sky-deep) 900px);			color: var(--ink);			font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;		}		img { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; display: block; }		a { color: var(--yellow); }		.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }		.pixel { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }		.stripe { height: 8px; background: var(--rainbow); }		header.hero { padding: 40px 0 56px; text-align: center; }		.hero .arc { width: 192px; margin: 0 auto 8px; }		.hero h1 { font-size: clamp(30px, 6vw, 58px); line-height: 1.1; margin: 0; color: var(--yellow); text-shadow: 4px 4px 0 var(--red); }		.hero .sub { margin: 14px auto 0; max-width: 680px; font-size: clamp(17px, 2.2vw, 20px); color: var(--ink); }		.cta { display: inline-block; margin-top: 28px; padding: 18px 34px; background: var(--yellow); color: #1a1a1a; text-decoration: none; font-weight: 800; font-size: 22px; border: 4px solid #1a1a1a; box-shadow: 6px 6px 0 var(--red); transition: transform .08s; }		.cta:hover, .cta:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--red); }		.hero .note { margin-top: 14px; font-size: 14px; color: var(--muted); }		.hero .screen { margin: 40px auto 0; width: 100%; max-width: 768px; border: 6px solid #000; box-shadow: 0 0 0 4px var(--line), 0 20px 50px rgba(0, 0, 0, .5); }		section { padding: 56px 0; }		section + section { border-top: 2px solid var(--line); }		h2 { font-size: clamp(22px, 3.4vw, 32px); margin: 0 0 18px; color: var(--yellow); }		h3 { margin: 0 0 6px; font-size: 18px; color: var(--cyan); }		p { margin: 0 0 14px; }		.lead { color: var(--muted); max-width: 760px; }		.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }		figure { margin: 0; background: #000; border: 4px solid #000; box-shadow: 0 0 0 3px var(--line); }		figcaption { background: var(--panel); padding: 8px 12px; font-size: 14px; color: var(--muted); }		figcaption b { color: var(--ink); }		.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }		.card { background: var(--panel); border: 3px solid var(--line); padding: 18px; }		kbd { display: inline-block; min-width: 1.8em; padding: 1px 7px; background: var(--ink); color: #111; border-radius: 3px; border-bottom: 3px solid #888; font: 600 14px/1.5 ui-monospace, monospace; text-align: center; }		.split { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; align-items: center; }		@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }		details { background: var(--panel); border: 3px solid var(--line); padding: 14px 18px; margin-bottom: 12px; }		summary { cursor: pointer; font-weight: 700; }		details p { margin: 10px 0 0; color: var(--muted); }		footer { padding: 32px 0 48px; font-size: 14px; color: var(--muted); text-align: center; }		footer p { margin: 6px 0; }			nav.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 10px 16px; font-size: 14px; line-height: 1.4; background: var(--sky-deep); }		nav.langs a { color: var(--muted); text-decoration: none; padding: 2px 4px; }		nav.langs a:hover, nav.langs a:focus-visible { color: var(--yellow); text-decoration: underline; }		nav.langs a[aria-current] { color: var(--yellow); font-weight: 700; }	</style></head><body>	<div class="stripe"></div>	<nav class="langs" aria-label="언어">		<a href="../" hreflang="fr" lang="fr">Français</a>		<a href="../en/" hreflang="en" lang="en">English</a>		<a href="../es/" hreflang="es" lang="es">Español</a>		<a href="../de/" hreflang="de" lang="de">Deutsch</a>		<a href="../it/" hreflang="it" lang="it">Italiano</a>		<a href="../pt/" hreflang="pt" lang="pt">Português</a>		<a href="../nl/" hreflang="nl" lang="nl">Nederlands</a>		<a href="../pl/" hreflang="pl" lang="pl">Polski</a>		<a href="../ru/" hreflang="ru" lang="ru">Русский</a>		<a href="../uk/" hreflang="uk" lang="uk">Українська</a>		<a href="../tr/" hreflang="tr" lang="tr">Türkçe</a>		<a href="../ja/" hreflang="ja" lang="ja">日本語</a>		<a href="../zh/" hreflang="zh" lang="zh">中文</a>		<a href="../ko/" hreflang="ko" lang="ko" aria-current="true">한국어</a>	</nav>	<header class="hero">		<div class="wrap">			<img class="arc" src="../images/rainbow.png" width="192" height="128" alt="" />			<h1 class="pixel">Rainbow Islands</h1>			<p class="sub"><strong>Amstrad CPC</strong>의 Rainbow Islands(1989)를 PHP로 리메이크해 브라우저에서 무료로 즐길 수 있습니다. <strong>오리지널 그래픽과 음악</strong> 그대로.</p>			<a class="cta pixel" href="../play/?back=../ko/">▶ 플레이</a>			<p class="note">컴퓨터, 스마트폰, 게임패드 · 설치 불필요 · 가입 불필요</p>			<img class="screen" src="../images/round-1.png" width="512" height="352"				alt="첫 번째 섬의 성탑 사이에 선 버브, 눈앞에 무지개를 쏘고 있다" />		</div>	</header>	<main>		<section id="jeu">			<div class="wrap split">				<div>					<h2>물이 차오르기 전에 올라가라</h2>					<p>뒤에서 바다가 차오르는 동안 버브는 각 라운드 꼭대기의 <b>G</b> 표지판까지 올라가야 합니다. 무기는 <strong>무지개</strong>. 적을 기절시키고, 다리와 계단이 되어 주며, 점프한 뒤 그 위에 착지하면 부서져 떨어지면서 깔린 적을 다이아몬드로 바꿉니다.</p>					<p><strong>7개의 섬, 28라운드</strong>, 섬마다 마지막에 나오는 보스, 과일, 보너스, <em>HURRY!</em> 경고, 컨티뉴 화면, 그리고 엔딩.</p>				</div>				<figure>					<img src="../images/loading.png" width="640" height="400" loading="lazy"						alt="Amstrad CPC판 Rainbow Islands의 오리지널 로딩 화면" />					<figcaption>1989년 디스크의 <b>로딩 화면</b> 그대로.</figcaption>				</figure>			</div>		</section>		<section id="iles">			<div class="wrap">				<h2>일곱 개의 섬</h2>				<p class="lead">섬마다 색깔도, 적도, 보스도 다릅니다. 브라우저에서 실행 중인 게임 화면입니다.</p>				<div class="grid">					<figure><img src="../images/round-1.png" width="512" height="352" loading="lazy" alt="라운드 1, Insect Island: 성과 깃발들" /><figcaption><b>Insect Island</b> · 라운드 1</figcaption></figure>					<figure><img src="../images/round-6.png" width="512" height="352" loading="lazy" alt="라운드 6, Combat Island: 주황색 배경 위의 분홍색 블록, 두 개의 무지개" /><figcaption><b>Combat Island</b> · 라운드 6</figcaption></figure>					<figure><img src="../images/round-10.png" width="512" height="352" loading="lazy" alt="라운드 10, Monster Island: 밤의 유령 저택" /><figcaption><b>Monster Island</b> · 라운드 10</figcaption></figure>					<figure><img src="../images/round-15.png" width="512" height="352" loading="lazy" alt="라운드 15, Toy Island: 하늘에 떠 있는 주사위와 트럼프 카드" /><figcaption><b>Toy Island</b> · 라운드 15</figcaption></figure>					<figure><img src="../images/round-19.png" width="512" height="352" loading="lazy" alt="라운드 19, Doh's Island: 벽돌깨기 게임 같은 벽돌" /><figcaption><b>Doh's Island</b> · 라운드 19</figcaption></figure>					<figure><img src="../images/round-26.png" width="512" height="352" loading="lazy" alt="라운드 26, Dragon Island: 붉은 벽돌 벽" /><figcaption><b>Dragon Island</b> · 라운드 26</figcaption></figure>					<figure><img src="../images/boss-4.png" width="512" height="352" loading="lazy" alt="첫 번째 섬의 보스, 거대한 거미" /><figcaption><b>첫 번째 보스</b> · 라운드 4</figcaption></figure>					<figure><img src="../images/boss-28.png" width="512" height="352" loading="lazy" alt="드래곤, 게임의 마지막 보스" /><figcaption><b>마지막 보스</b> · 라운드 28</figcaption></figure>				</div>			</div>		</section>		<section id="commandes">			<div class="wrap">				<h2>조작법</2>>				<div class="cards">					<div class="card">						<h3>키보드</3>>						<p><kbd>←</kbd> <kbd>→</kbd> 이동<br />							<kbd>↑</kbd> 또는 <kbd>Z</kbd> 점프<br />							<kbd>스페이스</kbd> 또는 <kbd>X</kbd> 무지개<br />							<kbd>P</kbd> 또는 <kbd>Esc</kbd> 일시정지</p>					</div>					<div class="card">						<h3>게임패드</3>>						<p>스틱 또는 십자키로 이동, <b>A</b>로 점프, <b>X</b> 또는 <b>B</b>로 무지개, <b>Start</b>로 일시정지. 게임 전이나 도중에 연결하세요.</p>					</div>					<div class="card">						<h3>스마트폰</3>>						<p>화면 왼쪽 절반 어디에서나 왼쪽 엄지 아래에 조이스틱이 나타나며, 오른쪽에는 <b>JUMP</b>와 <b>RAINBOW</b> 버튼이 있습니다. 스마트폰은 가로로 잡으세요.</p>					</div>				</div>				<p style="margin-top: 28px; text-align: center"><a class="cta pixel" href="../play/?back=../ko/">▶ 지금 플레이</a></p>			</div>		</section>		<section id="remake">			<div class="wrap split">				<div>					<h2>이 리메이크는 이렇게 만들었습니다</h2>					<p>아무것도 새로 그리지 않았습니다. 원본 디스크를 화면 없는 <strong>Amstrad CPC 에뮬레이터</strong>에서 실행해 메모리 쓰기와 연주된 음을 모두 기록했고, 28라운드의 맵, 타일, 스프라이트, 폰트, 팔레트, 음악, 효과음을 거기서 추출했습니다.</p>					<p>그런 다음 읽기 쉬운 <strong>PHP</strong>와 <a href="https://github.com/davidnurdin/jumPhp">JumPHP</a> 엔진으로 게임을 다시 작성했습니다. 같은 코드가 데스크톱 창에서도, PHP를 <strong>WebAssembly</strong>로 컴파일한 브라우저에서도 실행됩니다.</p>					<p>추출 도구는 <a href="https://github.com/davidnurdin/dsk2jumphp">dsk2jumphp</a>에, 게임 코드는 <a href="https://github.com/davidnurdin/rainbow-island">rainbow-island</a>에 공개되어 있습니다.</p>				</div>				<figure>					<img src="../images/title.png" width="512" height="352" loading="lazy"						alt="CPC 오리지널 폰트를 쓴 타이틀 화면" />					<figcaption><b>타이틀 화면</b>. 디스크에서 추출한 CPC 폰트를 사용했습니다.</figcaption>				</figure>			</div>		</section>		<section id="questions">			<div class="wrap">				<h2>자주 묻는 질문</2>>				<details>					<summary>설치해야 하나요?</summary>					<p>아니요. 게임은 브라우저에서 실행되며 컴퓨터와 스마트폰 모두 가능합니다. 처음 로딩할 때 약 10MB(WebAssembly용 PHP와 게임)를 내려받고, 이후에는 모두 캐시됩니다.</p>				</details>				<details>					<summary>오리지널 게임인가요?</summary>					<p>리메이크입니다. 프로그램은 PHP로 다시 작성했지만, 맵, 스프라이트, 폰트, 로딩 화면, 음악, 효과음은 1989년 Amstrad CPC 디스크에서 가져온 것입니다.</p>				</details>				<details>					<summary>점수가 저장되나요?</summary>					<p>최고 점수와 설정(볼륨, 언어)은 브라우저에 저장됩니다.</p>				</details>				<details>					<summary>브라우저 밖에서도 플레이할 수 있나요?</summary>					<p>네. 소스 코드와 Docker가 있으면 <code>bin/jumphp run rainbow-island</code>로 게임을 소리와 함께 창으로 열 수 있습니다. <a href="https://github.com/davidnurdin/rainbow-island">GitHub 저장소</a>를 참고하세요.</p>				</details>			</div>		</section>	</main>	<div class="stripe"></div>	<footer>		<div class="wrap">			<p>광고 없는 무료 팬 리메이크, <a href="https://github.com/davidnurdin/jumPhp">JumPHP</a>로 제작.</p>			<p>Rainbow Islands © Taito Corporation 1987, Amstrad CPC판 © Graftgold 1989(Ocean 발매). 이 프로젝트는 위 회사들과 무관하며, 그래픽과 음악은 각 제작자에게 귀속됩니다.</p>		</div>	</footer></body></html>