EN

SONIC PHP

by davidnurdin · Platform
5.0 (1)
▶ Play 💬 Feedback Source 🕘 Versions Edit GitHub
. / site / de / index.html · commit a20d00e
<!doctype html><html lang="de"><head>	<meta charset="utf-8" />	<meta name="viewport" content="width=device-width, initial-scale=1" />	<title>SONIC PHP – das Master-System-Sonic in PHP, kostenlos online spielen</title>	<meta name="description" content="Spiele das Sonic für das Master System kostenlos im Browser, neu in PHP umgesetzt: alle sechs Zonen, die Bosse, die Bonusstufen, Bestzeiten und Rennen gegen Bots. Mit Tastatur, Gamepad oder Touchscreen." />	<link rel="canonical" href="https://{{DOMAIN}}/de/" />	<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="de_DE" />	<meta property="og:site_name" content="SONIC PHP" />	<meta property="og:title" content="SONIC PHP – das Master-System-Sonic, online spielbar" />	<meta property="og:description" content="Das Sonic fürs Master System (1991) neu in PHP: sechs Zonen, Bosse, Bonusstufen und Rennen gegen Bots, kostenlos im Browser." />	<meta property="og:url" content="https://{{DOMAIN}}/de/" />	<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 springt durch Green Hill, neben dem Spiellogo" />	<meta name="twitter:card" content="summary_large_image" />	<meta name="twitter:title" content="SONIC PHP – das Master-System-Sonic, online spielbar" />	<meta name="twitter:description" content="Sechs Zonen, Bosse, Bonusstufen und Rennen gegen Bots, direkt im 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}}/de/#game",				"name": "SONIC PHP",				"alternateName": "Sonic the Hedgehog (Master System) – Remake in PHP",				"url": "https://{{DOMAIN}}/de/",				"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": "Fan-Remake des Master-System-Sonic, in PHP geschrieben und im Browser spielbar: die sechs Zonen mit ihren Bossen, die Bonusstufen, das Ende, Bestzeiten mit Geist und Rennen gegen Bots.",				"genre": ["Jump-and-run", "Action", "Retro"],				"gamePlatform": ["Webbrowser", "Computer", "Mobilgerät"],				"applicationCategory": "Game",				"operatingSystem": "Jeder aktuelle Browser",				"playMode": ["SinglePlayer", "MultiPlayer"],				"numberOfPlayers": {"@type": "QuantitativeValue", "minValue": 1, "maxValue": 1},				"inLanguage": ["de"],				"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": "Muss ich etwas installieren, um zu spielen?",					 "acceptedAnswer": {"@type": "Answer", "text": "Nein: Das Spiel läuft im Browser, am Computer wie am Smartphone. Beim ersten Laden werden etwa 25 MB heruntergeladen (PHP in WebAssembly, die Level, die Grafiken und die Musik), danach ist alles im Cache."}},					{"@type": "Question", "name": "Was ist der Unterschied zur Vollversion?",					 "acceptedAnswer": {"@type": "Answer", "text": "Die Vollversion auf sonic.mimichat.fr bietet zusätzlich Online-Mehrspieler für bis zu 6 Spieler (öffentliche oder private Räume, Chat) und Replays. Diese Version ist dasselbe Spiel auf der JumPHP-Engine, zum Spielen allein oder gegen Bots."}},					{"@type": "Question", "name": "Wie spielt man?",					 "acceptedAnswer": {"@type": "Answer", "text": "Pfeiltasten zum Laufen, Nach-oben-Schauen und Einrollen, Leertaste zum Springen, Eingabetaste für Menüs und Pause, Esc zurück zum Titel. Ein Gamepad funktioniert auch; auf dem Smartphone erscheinen Steuerkreuz und Tasten auf dem Bildschirm."}}				]			}		]	}	</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="Sprachen">		<ul>			<li><a href="../" hreflang="fr" lang="fr">Français</a></li>			<li><a href="../en/" hreflang="en" lang="en">English</a></li>			<li><a href="../es/" hreflang="es" lang="es">Español</a></li>			<li><a href="../de/" hreflang="de" lang="de" aria-current="true">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">Das <strong>Master-System</strong>-Sonic (1991), neu in PHP und kostenlos im Browser spielbar: <strong>alle sechs Zonen, die Bosse, die Bonusstufen</strong> und Rennen gegen Bots.</p>			<div class="actions">				<a class="cta pixel" href="../play/?back=../de/">▶ Spielen</a>				<a class="cta alt" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">Die Vollversion mit Online-Mehrspieler ↗</a>			</div>			<p class="note">Computer, Smartphone oder Gamepad · nichts zu installieren · ohne Anmeldung</p>			<img class="screen" src="../images/level-1.png" width="840" height="426"				alt="Sonic als Kugel neben den Ringen von Green Hill, eine Krabbe im Weg" />		</div>	</header>	<div class="ground"></div>	<main>		<section id="jeu">			<div class="wrap split">				<div>					<h2>Das 8-Bit-Sonic, komplett</h2>					<p>Rennen, springen, Ringe sammeln, Bonus-Monitore zerschlagen und am Ende jedes Akts das Schild erreichen. <strong>Sechs Zonen mit je drei Akten</strong>, ein Boss am Ende jeder Zone, <strong>Bonusstufen</strong> voller Ringe und Federn und das Spielende.</p>					<p>Das Spiel speichert deine <strong>Bestzeiten</strong> und einen <strong>Geist</strong> deines besten Laufs, den du beim nächsten Mal schlagen kannst. In den Optionen: ein CRT-Bildschirmfilter, PAL- oder NTSC-Tempo, Französisch oder Englisch und eine Musik-Jukebox.</p>				</div>				<figure>					<img src="../images/map.png" width="840" height="426" loading="lazy" class="smooth"						alt="Die Inselkarte vor Green Hill mit Sonics Leben" />					<figcaption><b>Die Inselkarte</b> zwischen zwei Zonen.</figcaption>				</figure>			</div>		</section>		<section id="zones">			<div class="wrap">				<h2>Die sechs Zonen</h2>				<p class="lead">Jede Zone hat ihre eigene Kulisse, ihre Fallen und ihren Boss. Screenshots des Spiels, so wie es im Browser läuft.</p>				<div class="grid">					<figure><img src="../images/level-1.png" width="840" height="426" loading="lazy" alt="Green Hill: karierte Hügel, Palmen und Ringe" /><figcaption><b>Green Hill</b> · Akt 1</figcaption></figure>					<figure><img src="../images/level-4.png" width="840" height="426" loading="lazy" alt="Bridge: Klippen und eine Baumstammbrücke über dem Wasser" /><figcaption><b>Bridge</b> · Akt 1</figcaption></figure>					<figure><img src="../images/level-7.png" width="840" height="426" loading="lazy" alt="Jungle: ein Wasserfall mitten im Wald und Plattformen" /><figcaption><b>Jungle</b> · Akt 1</figcaption></figure>					<figure><img src="../images/level-10.png" width="840" height="426" loading="lazy" alt="Labyrinth: behauene grüne Blöcke unter Wasser" /><figcaption><b>Labyrinth</b> · Akt 1</figcaption></figure>					<figure><img src="../images/level-13.png" width="840" height="426" loading="lazy" alt="Scrap Brain: eine Fabrik vor einer Stadt im Sonnenuntergang" /><figcaption><b>Scrap Brain</b> · Akt 1</figcaption></figure>					<figure><img src="../images/level-16.png" width="840" height="426" loading="lazy" alt="Sky Base: blaue Träger in der Nacht" /><figcaption><b>Sky Base</b> · Akt 1</figcaption></figure>					<figure><img src="../images/boss.png" width="609" height="309" loading="lazy" alt="Der Doktor in seiner Flugmaschine über Sonic, am Ende von Green Hill" /><figcaption><b>Der erste Boss</b> · Green Hill, Akt 3</figcaption></figure>					<figure><img src="../images/special.png" width="840" height="426" loading="lazy" alt="Eine Bonusstufe: Sterne, Ringe und Federn" /><figcaption><b>Eine Bonusstufe</b> · Ringe und Federn</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="Ein Rennen zu viert durch Green Hill, die Rangliste oben rechts" />					<figcaption><b>Ein Rennen zu viert</b> gegen drei Bots.</figcaption>				</figure>				<div>					<h2>Gegen die Bots</h2>					<p>Im Modus <b>MULTIPLAYER</b> trittst du gegen 1 bis 4 vom Computer gesteuerte Läufer an (bis zu 5 bei Flagge), in den Zonen des Spiels, mit vier Regeln:</p>					<p><b>Rennen</b>: wer zuerst am Schild ist. <b>Flagge</b>: sie am längsten halten. <b>Ringe</b>: die meisten sammeln. <b>Deathmatch</b>: als Letzter übrig bleiben.</p>					<p>Lust auf echte Gegner? Die gibt es in der <a href="#complete">Vollversion</a>.</p>				</div>			</div>		</section>		<section id="complete">			<div class="wrap">				<div class="full">					<h2>Die Vollversion: sonic.mimichat.fr</h2>					<p>Dieses Spiel stammt von <strong>Sonic PHP</strong>, dessen ursprüngliche Vollversion man auf <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">sonic.mimichat.fr</a> spielt. Sie hat alles, was es hier gibt, und mehr:</p>					<ul>						<li><strong>Online-Mehrspieler für bis zu 6 Spieler</strong> in Rennen, Flagge, Ringen oder Deathmatch;</li>						<li>öffentliche Räume oder private mit einem 4-Buchstaben-Code; freie Plätze übernehmen Bots;</li>						<li>Chat in den Räumen und im Spiel;</li>						<li><strong>Replays</strong> jeder Partie;</li>						<li>eine Desktop-Version (natives PHP), die in dieselben Räume wie die Browser kommt.</li>					</ul>					<a class="cta pixel" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">Online spielen ↗</a>				</div>			</div>		</section>		<section id="commandes">			<div class="wrap">				<h2>Steuerung</h2>				<div class="cards">					<div class="card">						<h3>Tastatur</h3>						<p><kbd>←</kbd> <kbd>→</kbd> laufen<br />							<kbd>↑</kbd> nach oben schauen, <kbd>↓</kbd> einrollen<br />							<kbd>Leertaste</kbd> springen<br />							<kbd>Eingabe</kbd> Menüs und Pause<br />							<kbd>Esc</kbd> zurück zum Titel</p>					</div>					<div class="card">						<h3>Gamepad</h3>						<p>Steuerkreuz oder Stick zum Laufen, <b>A</b>, <b>B</b>, <b>X</b> oder <b>Y</b> zum Springen, <b>Start</b> für Menüs und Pause, <b>Select</b> zurück zum Titel.</p>					</div>					<div class="card">						<h3>Smartphone</h3>						<p>Links ein Steuerkreuz zum Laufen; rechts <b>JUMP</b> zum Springen und <b>ROLL</b> für die Kugel, <b>START</b> für die Pause und <b>MENU</b> für den Titel. Halte das Smartphone quer.</p>					</div>				</div>				<p style="margin-top: 28px; text-align: center"><a class="cta pixel" href="../play/?back=../de/">▶ Jetzt spielen</a></p>			</div>		</section>		<section id="fabrication">			<div class="wrap split">				<div>					<h2>So wurde es gemacht</h2>					<p><strong>Sonic PHP</strong> ist komplett in PHP geschrieben: Physik, Objekte, Gegner, Bosse, Kamera und Bots. Die Level, die Grafiken und ihre Farbzyklen wurden aus dem Original-Modul dekodiert, und die Musik entstand, indem das Z80-Soundprogramm des Spiels in einem Emulator lief.</p>					<p>Hier ist das Spiel auf die <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a>-Engine portiert: Derselbe Code läuft in einem Fenster am Computer und im Browser, wo PHP zu <strong>WebAssembly</strong> kompiliert ist. Die Spiellogik ist die originale; nur Anzeige, Ton, Steuerung und Speicherstände laufen über JumPHP.</p>					<p>Der Code: <a href="https://github.com/davidnurdin/sonic-jumphp" target="_blank" rel="noopener">sonic-jumphp</a> (diese Version) und <a href="https://github.com/davidnurdin/sonicGamePhp" target="_blank" rel="noopener">sonicGamePhp</a> (die Vollversion).</p>				</div>				<figure>					<img src="../images/title.png" width="840" height="426" loading="lazy" class="smooth"						alt="Der Titelbildschirm mit Logo und dem Menü START, MULTIPLAYER, OPTIONS, BEST TIMES" />					<figcaption><b>Der Titelbildschirm</b> und seine Menüs.</figcaption>				</figure>			</div>		</section>		<section id="questions">			<div class="wrap">				<h2>Fragen</h2>				<details>					<summary>Muss ich etwas installieren?</summary>					<p>Nein: Das Spiel läuft im Browser, am Computer wie am Smartphone. Beim ersten Laden werden etwa 25 MB heruntergeladen (PHP in WebAssembly, die Level, die Grafiken und die Musik), danach ist alles im Cache.</p>				</details>				<details>					<summary>Was ist der Unterschied zur Vollversion?</summary>					<p>Die <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">Vollversion</a> bietet zusätzlich Online-Mehrspieler für bis zu 6 Spieler, Räume, Chat und Replays. Diese hier ist dasselbe Spiel auf JumPHP, zum Spielen allein oder gegen Bots.</p>				</details>				<details>					<summary>Werden meine Zeiten gespeichert?</summary>					<p>Ja: Bestzeiten, Geister und Optionen bleiben in deinem Browser.</p>				</details>				<details>					<summary>Kann man auch außerhalb des Browsers spielen?</summary>					<p>Ja, mit JumPHP und Docker: <code>bin/jumphp run sonic</code> öffnet das Spiel in einem Fenster, mit Ton. Siehe das <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>Fan-Remake, kostenlos und werbefrei, gemacht mit <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a>.</p>			<p>Sonic the Hedgehog © SEGA 1991; Master-System-Version entwickelt von Ancient. Dieses Projekt steht in keiner Verbindung zu SEGA oder Ancient; die Figuren, Grafiken, Level und die Musik gehören ihren Urhebern.</p>		</div>	</footer></body></html>