PL

SONIC PHP

autor: davidnurdin · Platformówki
5,0 (1)
▶ Graj 💬 Opinie Kod źródłowy 🕘 Wersje Edytuj GitHub
. / site / en / index.html · commit a20d00e
<!doctype html><html lang="en"><head>	<meta charset="utf-8" />	<meta name="viewport" content="width=device-width, initial-scale=1" />	<title>SONIC PHP – the Master System Sonic in PHP, play it free online</title>	<meta name="description" content="Play the Master System Sonic for free in your browser, remade in PHP: all six zones, the bosses, the special stages, best times and races against bots. Keyboard, gamepad or touch screen." />	<link rel="canonical" href="https://{{DOMAIN}}/en/" />	<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="#00aaff" />	<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="en_US" />	<meta property="og:site_name" content="SONIC PHP" />	<meta property="og:title" content="SONIC PHP – the Master System Sonic, playable online" />	<meta property="og:description" content="The Master System Sonic (1991) remade in PHP: six zones, bosses, special stages and races against bots, free in your browser." />	<meta property="og:url" content="https://{{DOMAIN}}/en/" />	<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="Sonic jumping through Green Hill, next to the game logo" />	<meta name="twitter:card" content="summary_large_image" />	<meta name="twitter:title" content="SONIC PHP – the Master System Sonic, playable online" />	<meta name="twitter:description" content="Six zones, bosses, special stages and races against bots, right in your browser." />	<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}}/en/#game",				"name": "SONIC PHP",				"alternateName": "Sonic the Hedgehog (Master System) – PHP remake",				"url": "https://{{DOMAIN}}/en/",				"image": "https://{{DOMAIN}}/images/og.png",				"screenshot": [					"https://{{DOMAIN}}/images/level-1.png",					"https://{{DOMAIN}}/images/level-7.png",					"https://{{DOMAIN}}/images/special.png",					"https://{{DOMAIN}}/images/versus.png"				],				"description": "A fan remake of the Master System Sonic, written in PHP and playable in the browser: the six zones and their bosses, the special stages, the ending, best times with a ghost, and races against bots.",				"genre": ["Platformer", "Action", "Retro"],				"gamePlatform": ["Web browser", "Computer", "Mobile"],				"applicationCategory": "Game",				"operatingSystem": "Any modern browser",				"playMode": ["SinglePlayer", "MultiPlayer"],				"numberOfPlayers": {"@type": "QuantitativeValue", "minValue": 1, "maxValue": 1},				"inLanguage": ["en"],				"isAccessibleForFree": true,				"offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR", "availability": "https://schema.org/InStock"},				"codeRepository": "https://github.com/davidnurdin/sonic-jumphp",				"sameAs": "https://sonic.mimichat.fr/",				"potentialAction": {"@type": "PlayAction", "target": "https://{{DOMAIN}}/play/"}			},			{				"@type": "FAQPage",				"mainEntity": [					{"@type": "Question", "name": "Do I need to install anything to play?",					 "acceptedAnswer": {"@type": "Answer", "text": "No: the game runs in your browser, on a computer or a phone. The first load downloads about 25 MB (PHP in WebAssembly, the levels, graphics and music), then everything is cached."}},					{"@type": "Question", "name": "How is it different from the full version?",					 "acceptedAnswer": {"@type": "Answer", "text": "The full version, at sonic.mimichat.fr, adds online multiplayer for up to 6 players (public or private rooms, chat) and replays. This version is the same game ported to the JumPHP engine, to play alone or against bots."}},					{"@type": "Question", "name": "How do you play?",					 "acceptedAnswer": {"@type": "Answer", "text": "Arrow keys to run, look up and roll into a ball, Space to jump, Enter for menus and pause, Esc to go back to the title. A gamepad works too; on a phone, a d-pad and buttons appear on screen."}}				]			}		]	}	</script>	<style>		:root {			--sky: #00aaff;			--night: #000055;			--night-deep: #00002a;			--ink: #f2f6ff;			--muted: #b4c4f0;			--panel: #0a1470;			--line: #2a3fb0;			--yellow: #ffd800;			--red: #e00000;			--cyan: #55ffff;			--blue: #0055ff;			--earth: #ffaa00;			--earth-dark: #aa5500;			--grass: #00aa00;		}		* { box-sizing: border-box; }		html { scroll-behavior: smooth; }		body {			margin: 0;			background: var(--night-deep);			background-image: linear-gradient(180deg, var(--night) 0, var(--night-deep) 1400px);			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; }		img.smooth { image-rendering: auto; }		a { color: var(--cyan); }		.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; }		/* the ground of Green Hill: grass over a checkerboard */		.ground { height: 30px; border-top: 6px solid var(--grass); background: conic-gradient(var(--earth) 25%, var(--earth-dark) 0 50%, var(--earth) 0 75%, var(--earth-dark) 0) 0 0 / 24px 24px; }		header.hero { padding: 40px 0 48px; text-align: center; background: linear-gradient(180deg, #0088ee 0, var(--sky) 55%, #55ccff 100%); }		.hero h1 { font-size: clamp(38px, 8vw, 72px); line-height: 1.05; margin: 0; color: var(--yellow); text-shadow: 4px 4px 0 var(--blue), 8px 8px 0 #00226a; }		.hero .sub { margin: 16px auto 0; max-width: 700px; font-size: clamp(17px, 2.2vw, 20px); color: #fff; text-shadow: 0 2px 0 #0050a0; }		.actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; }		.cta { display: inline-block; padding: 18px 34px; background: var(--yellow); color: #111; text-decoration: none; font-weight: 800; font-size: 22px; border: 4px solid #111; 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); }		.cta.alt { background: #fff; font-size: 17px; padding: 14px 22px; box-shadow: 6px 6px 0 var(--blue); align-self: center; }		.cta.alt:hover, .cta.alt:focus-visible { box-shadow: 8px 8px 0 var(--blue); }		.hero .note { margin-top: 18px; font-size: 14px; color: #ecf8ff; text-shadow: 0 1px 0 #0050a0; }		.hero .screen { margin: 36px auto 0; width: 100%; max-width: 840px; border: 6px solid #111; box-shadow: 0 0 0 4px #fff, 0 20px 50px rgba(0, 0, 40, .45); }		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; } }		.full { background: linear-gradient(135deg, #10207e, #000a40); border: 3px solid var(--yellow); box-shadow: 8px 8px 0 var(--red); padding: 26px; }		.full ul { margin: 0 0 18px; padding-left: 20px; }		.full li { margin: 4px 0; }		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 { background: var(--night-deep); border-bottom: 2px solid var(--line); padding: 8px 0; }		nav.langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }		nav.langs a { display: block; padding: 3px 9px; font-size: 14px; line-height: 1.5; color: var(--muted); text-decoration: none; border: 2px solid transparent; }		nav.langs a:hover, nav.langs a:focus-visible { color: var(--ink); border-color: var(--line); }		nav.langs a[aria-current="true"] { color: #111; background: var(--yellow); font-weight: 700; }	</style></head><body>	<nav class="langs" aria-label="Languages">		<ul>			<li><a href="../" hreflang="fr" lang="fr">Français</a></li>			<li><a href="../en/" hreflang="en" lang="en" aria-current="true">English</a></li>			<li><a href="../es/" hreflang="es" lang="es">Español</a></li>			<li><a href="../de/" hreflang="de" lang="de">Deutsch</a></li>			<li><a href="../it/" hreflang="it" lang="it">Italiano</a></li>			<li><a href="../pt/" hreflang="pt" lang="pt">Português</a></li>			<li><a href="../nl/" hreflang="nl" lang="nl">Nederlands</a></li>			<li><a href="../pl/" hreflang="pl" lang="pl">Polski</a></li>			<li><a href="../ru/" hreflang="ru" lang="ru">Русский</a></li>			<li><a href="../uk/" hreflang="uk" lang="uk">Українська</a></li>			<li><a href="../tr/" hreflang="tr" lang="tr">Türkçe</a></li>			<li><a href="../ja/" hreflang="ja" lang="ja">日本語</a></li>			<li><a href="../zh/" hreflang="zh" lang="zh">中文</a></li>			<li><a href="../ko/" hreflang="ko" lang="ko">한국어</a></li>		</ul>	</nav>	<header class="hero">		<div class="wrap">			<h1 class="pixel">Sonic PHP</h1>			<p class="sub">The <strong>Master System</strong> Sonic (1991), remade in PHP and playable for free in your browser: <strong>all six zones, the bosses, the special stages</strong>, and races against bots.</p>			<div class="actions">				<a class="cta pixel" href="../play/?back=../en/">▶ Play</a>				<a class="cta alt" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">The full version, with online multiplayer ↗</a>			</div>			<p class="note">Computer, phone or gamepad · nothing to install · no sign-up</p>			<img class="screen" src="../images/level-1.png" width="840" height="426"				alt="Sonic rolled into a ball near the rings of Green Hill, a crab in his way" />		</div>	</header>	<div class="ground"></div>	<main>		<section id="jeu">			<div class="wrap split">				<div>					<h2>The 8-bit Sonic, the whole game</h2>					<p>Run, jump, grab rings, smash the bonus monitors and reach the signpost at the end of each act. <strong>Six zones of three acts</strong>, a boss at the end of every zone, <strong>special stages</strong> full of rings and springs, and the ending.</p>					<p>The game keeps your <strong>best times</strong> and a <strong>ghost</strong> of your best run, to beat next time. Options include a CRT screen filter, PAL or NTSC speed, French or English, and a music jukebox.</p>				</div>				<figure>					<img src="../images/map.png" width="840" height="426" loading="lazy" class="smooth"						alt="The island map before Green Hill, with Sonic's lives" />					<figcaption><b>The island map</b>, between two zones.</figcaption>				</figure>			</div>		</section>		<section id="zones">			<div class="wrap">				<h2>The six zones</h2>				<p class="lead">Every zone has its own scenery, traps and boss. Screenshots of the game as it runs in the browser.</p>				<div class="grid">					<figure><img src="../images/level-1.png" width="840" height="426" loading="lazy" alt="Green Hill: checkered hills, palm trees and rings" /><figcaption><b>Green Hill</b> · act 1</figcaption></figure>					<figure><img src="../images/level-4.png" width="840" height="426" loading="lazy" alt="Bridge: cliffs and a log bridge over the water" /><figcaption><b>Bridge</b> · act 1</figcaption></figure>					<figure><img src="../images/level-7.png" width="840" height="426" loading="lazy" alt="Jungle: a waterfall in the middle of the forest, and platforms" /><figcaption><b>Jungle</b> · act 1</figcaption></figure>					<figure><img src="../images/level-10.png" width="840" height="426" loading="lazy" alt="Labyrinth: carved green blocks, underwater" /><figcaption><b>Labyrinth</b> · act 1</figcaption></figure>					<figure><img src="../images/level-13.png" width="840" height="426" loading="lazy" alt="Scrap Brain: a factory in front of a city at sunset" /><figcaption><b>Scrap Brain</b> · act 1</figcaption></figure>					<figure><img src="../images/level-16.png" width="840" height="426" loading="lazy" alt="Sky Base: blue girders in the night" /><figcaption><b>Sky Base</b> · act 1</figcaption></figure>					<figure><img src="../images/boss.png" width="609" height="309" loading="lazy" alt="The doctor in his flying machine above Sonic, at the end of Green Hill" /><figcaption><b>The first boss</b> · Green Hill, act 3</figcaption></figure>					<figure><img src="../images/special.png" width="840" height="426" loading="lazy" alt="A special stage: stars, rings and springs" /><figcaption><b>A special stage</b> · rings and springs</figcaption></figure>				</div>			</div>		</section>		<section id="versus">			<div class="wrap split">				<figure>					<img src="../images/versus.png" width="840" height="426" loading="lazy" class="smooth"						alt="A four-player race through Green Hill, the ranking at the top right" />					<figcaption><b>A four-player race</b> against three bots.</figcaption>				</figure>				<div>					<h2>Against the bots</h2>					<p>In <b>MULTIPLAYER</b>, face 1 to 4 computer-controlled runners (up to 5 for flag), in the game's zones, with four rules:</p>					<p><b>Race</b>: first to the signpost. <b>Flag</b>: hold it the longest. <b>Rings</b>: collect the most. <b>Deathmatch</b>: be the last one standing.</p>					<p>Want to face real players? That is in the <a href="#complete">full version</a>.</p>				</div>			</div>		</section>		<section id="complete">			<div class="wrap">				<div class="full">					<h2>The full version: sonic.mimichat.fr</h2>					<p>This game comes from <strong>Sonic PHP</strong>, whose original, complete version is played at <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">sonic.mimichat.fr</a>. It has everything you see here, and more:</p>					<ul>						<li><strong>online multiplayer for up to 6 players</strong>, in race, flag, rings or deathmatch;</li>						<li>public rooms, or private ones with a 4-letter code; empty seats are filled by bots;</li>						<li>chat in the lobbies and in game;</li>						<li><strong>replays</strong> of every match;</li>						<li>a desktop version (native PHP) that joins the same rooms as the browsers.</li>					</ul>					<a class="cta pixel" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">Play online ↗</a>				</div>			</div>		</section>		<section id="commandes">			<div class="wrap">				<h2>Controls</h2>				<div class="cards">					<div class="card">						<h3>Keyboard</h3>						<p><kbd>←</kbd> <kbd>→</kbd> run<br />							<kbd>↑</kbd> look up, <kbd>↓</kbd> roll into a ball<br />							<kbd>Space</kbd> jump<br />							<kbd>Enter</kbd> menus and pause<br />							<kbd>Esc</kbd> back to the title</p>					</div>					<div class="card">						<h3>Gamepad</h3>						<p>D-pad or stick to run, <b>A</b>, <b>B</b>, <b>X</b> or <b>Y</b> to jump, <b>Start</b> for menus and pause, <b>Select</b> to go back to the title.</p>					</div>					<div class="card">						<h3>Phone</h3>						<p>A d-pad on the left to run; on the right <b>JUMP</b> to jump and <b>ROLL</b> for the ball, <b>START</b> to pause and <b>MENU</b> for the title. Hold your phone in landscape.</p>					</div>				</div>				<p style="margin-top: 28px; text-align: center"><a class="cta pixel" href="../play/?back=../en/">▶ Play now</a></p>			</div>		</section>		<section id="fabrication">			<div class="wrap split">				<div>					<h2>How it was made</h2>					<p><strong>Sonic PHP</strong> is written entirely in PHP: physics, objects, enemies, bosses, camera and bots. The levels, graphics and their colour cycles were decoded from the original cartridge, and the music was rendered by running the game's Z80 sound program in an emulator.</p>					<p>Here, the game is ported to the <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a> engine: the same code runs in a window on a computer and in the browser, where PHP is compiled to <strong>WebAssembly</strong>. The game logic is the original; only display, sound, controls and saves go through JumPHP.</p>					<p>The code: <a href="https://github.com/davidnurdin/sonic-jumphp" target="_blank" rel="noopener">sonic-jumphp</a> (this version) and <a href="https://github.com/davidnurdin/sonicGamePhp" target="_blank" rel="noopener">sonicGamePhp</a> (the full version).</p>				</div>				<figure>					<img src="../images/title.png" width="840" height="426" loading="lazy" class="smooth"						alt="The title screen, with the logo and the START, MULTIPLAYER, OPTIONS, BEST TIMES menu" />					<figcaption><b>The title screen</b> and its menus.</figcaption>				</figure>			</div>		</section>		<section id="questions">			<div class="wrap">				<h2>Questions</h2>				<details>					<summary>Do I need to install anything?</summary>					<p>No: the game runs in your browser, on a computer or a phone. The first load downloads about 25 MB (PHP in WebAssembly, the levels, graphics and music), then everything is cached.</p>				</details>				<details>					<summary>How is it different from the full version?</summary>					<p>The <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">full version</a> adds online multiplayer for up to 6 players, rooms, chat and replays. This one is the same game ported to JumPHP, to play alone or against bots.</p>				</details>				<details>					<summary>Are my times saved?</summary>					<p>Yes: best times, ghosts and options stay in your browser.</p>				</details>				<details>					<summary>Can I play outside the browser?</summary>					<p>Yes, with JumPHP and Docker: <code>bin/jumphp run sonic</code> opens the game in a window, with sound. See the <a href="https://github.com/davidnurdin/sonic-jumphp" target="_blank" rel="noopener">GitHub repository</a>.</p>				</details>			</div>		</section>	</main>	<div class="ground"></div>	<footer>		<div class="wrap">			<p>A free fan remake without ads, made with <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a>.</p>			<p>Sonic the Hedgehog © SEGA 1991; Master System version developed by Ancient. This project is not affiliated with SEGA or Ancient; the characters, graphics, levels and music belong to their authors.</p>		</div>	</footer></body></html>