<!doctype html><html lang="ja"><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}}/ja/" /> <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="ja_JP" /> <meta property="og:site_name" content="Rainbow Islands CPC" /> <meta property="og:title" content="Rainbow Islands (Amstrad CPC) – オンラインでプレイ" /> <meta property="og:description" content="CPC版Rainbow IslandsをPHPでリメイク。オリジナルのグラフィックと音楽で、7つの島と28ラウンドをブラウザで無料プレイ。" /> <meta property="og:url" content="https://{{DOMAIN}}/ja/" /> <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のロード画面。4本のレインボーの間に表示" /> <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}}/ja/#game", "name": "Rainbow Islands (Amstrad CPC) – PHPリメイク", "alternateName": "Rainbow Islands CPC", "url": "https://{{DOMAIN}}/ja/", "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": ["Webブラウザ", "パソコン", "モバイル"], "applicationCategory": "Game", "operatingSystem": "最新のブラウザ", "playMode": "SinglePlayer", "numberOfPlayers": {"@type": "QuantitativeValue", "value": 1}, "inLanguage": "ja", "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" aria-current="true">日本語</a> <a href="../zh/" hreflang="zh" lang="zh">中文</a> <a href="../ko/" hreflang="ko" lang="ko">한국어</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=../ja/">▶ プレイ</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>7つの島</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：オレンジの背景にピンクのブロック、2本のレインボー" /><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=../ja/">▶ 今すぐプレイ</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>