IT

SONIC PHP

di davidnurdin · Piattaforme
5,0 (1)
▶ Gioca 💬 Opinioni Sorgenti 🕘 Versioni Modifica GitHub
. / site / nl / index.html · commit a20d00e
<!doctype html><html lang="nl"><head>	<meta charset="utf-8" />	<meta name="viewport" content="width=device-width, initial-scale=1" />	<title>SONIC PHP – de Master System-Sonic in PHP, gratis online spelen</title>	<meta name="description" content="Speel de Sonic van de Master System gratis in je browser, opnieuw gemaakt in PHP: alle zes zones, de eindbazen, de bonusrondes, beste tijden en races tegen bots. Met toetsenbord, gamepad of touchscreen." />	<link rel="canonical" href="https://{{DOMAIN}}/nl/" />	<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="nl_NL" />	<meta property="og:site_name" content="SONIC PHP" />	<meta property="og:title" content="SONIC PHP – de Master System-Sonic, online speelbaar" />	<meta property="og:description" content="De Sonic van de Master System (1991) opnieuw gemaakt in PHP: zes zones, eindbazen, bonusrondes en races tegen bots, gratis in de browser." />	<meta property="og:url" content="https://{{DOMAIN}}/nl/" />	<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 door Green Hill, naast het logo van het spel" />	<meta name="twitter:card" content="summary_large_image" />	<meta name="twitter:title" content="SONIC PHP – de Master System-Sonic, online speelbaar" />	<meta name="twitter:description" content="Zes zones, eindbazen, bonusrondes en races tegen bots, in de 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}}/nl/#game",				"name": "SONIC PHP",				"alternateName": "Sonic the Hedgehog (Master System) – remake in PHP",				"url": "https://{{DOMAIN}}/nl/",				"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": "Een fanremake van de Sonic van de Master System, geschreven in PHP en speelbaar in de browser: de zes zones en hun eindbazen, de bonusrondes, het einde, beste tijden met een spook en races tegen bots.",				"genre": ["Platformspel", "Actie", "Retro"],				"gamePlatform": ["Webbrowser", "Computer", "Mobiel"],				"applicationCategory": "Game",				"operatingSystem": "Elke recente browser",				"playMode": ["SinglePlayer", "MultiPlayer"],				"numberOfPlayers": {"@type": "QuantitativeValue", "minValue": 1, "maxValue": 1},				"inLanguage": ["nl"],				"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": "Moet ik iets installeren om te spelen?",					 "acceptedAnswer": {"@type": "Answer", "text": "Nee: het spel draait in de browser, op een computer of een telefoon. De eerste keer wordt ongeveer 25 MB gedownload (PHP in WebAssembly, de levels, de graphics en de muziek), daarna zit alles in de cache."}},					{"@type": "Question", "name": "Wat is het verschil met de volledige versie?",					 "acceptedAnswer": {"@type": "Answer", "text": "De volledige versie, op sonic.mimichat.fr, voegt online multiplayer voor maximaal 6 spelers toe (openbare of privékamers, chat) en replays. Deze versie is hetzelfde spel, overgezet naar de JumPHP-engine, om alleen of tegen bots te spelen."}},					{"@type": "Question", "name": "Hoe speel je?",					 "acceptedAnswer": {"@type": "Answer", "text": "Pijltjestoetsen om te rennen, omhoog te kijken en tot een bal te rollen, spatiebalk om te springen, Enter voor menu's en pauze, Esc om terug te gaan naar het titelscherm. Een gamepad werkt ook; op een telefoon verschijnen een richtingskruis en knoppen op het scherm."}}				]			}		]	}	</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="Talen">		<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">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" aria-current="true">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">De <strong>Master System</strong>-Sonic (1991), opnieuw gemaakt in PHP en gratis speelbaar in de browser: <strong>alle zes zones, de eindbazen, de bonusrondes</strong> en races tegen bots.</p>			<div class="actions">				<a class="cta pixel" href="../play/?back=../nl/">▶ Spelen</a>				<a class="cta alt" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">De volledige versie, met online multiplayer ↗</a>			</div>			<p class="note">Computer, telefoon of gamepad · niets te installeren · geen account nodig</p>			<img class="screen" src="../images/level-1.png" width="840" height="426"				alt="Sonic als bal bij de ringen van Green Hill, met een krab in de weg" />		</div>	</header>	<div class="ground"></div>	<main>		<section id="jeu">			<div class="wrap split">				<div>					<h2>De 8-bit-Sonic, helemaal</h2>					<p>Rennen, springen, ringen pakken, bonusmonitors kapotslaan en aan het bord komen aan het einde van elk act. <strong>Zes zones van drie acts</strong>, een eindbaas aan het eind van elke zone, <strong>bonusrondes</strong> vol ringen en veren en het einde van het spel.</p>					<p>Het spel bewaart je <strong>beste tijden</strong> en een <strong>spook</strong> van je beste race, om de volgende keer te verslaan. In de opties: een CRT-schermfilter, PAL- of NTSC-snelheid, Frans of Engels en een jukebox met de muziek.</p>				</div>				<figure>					<img src="../images/map.png" width="840" height="426" loading="lazy" class="smooth"						alt="De eilandkaart voor Green Hill, met de levens van Sonic" />					<figcaption><b>De eilandkaart</b>, tussen twee zones.</figcaption>				</figure>			</div>		</section>		<section id="zones">			<div class="wrap">				<h2>De zes zones</h2>				<p class="lead">Elke zone heeft eigen decors, valstrikken en een eigen eindbaas. Schermafbeeldingen van het spel zoals het in de browser draait.</p>				<div class="grid">					<figure><img src="../images/level-1.png" width="840" height="426" loading="lazy" alt="Green Hill: geblokte heuvels, palmbomen en ringen" /><figcaption><b>Green Hill</b> · act 1</figcaption></figure>					<figure><img src="../images/level-4.png" width="840" height="426" loading="lazy" alt="Bridge: kliffen en een boomstammenbrug over het water" /><figcaption><b>Bridge</b> · act 1</figcaption></figure>					<figure><img src="../images/level-7.png" width="840" height="426" loading="lazy" alt="Jungle: een waterval midden in het bos en platforms" /><figcaption><b>Jungle</b> · act 1</figcaption></figure>					<figure><img src="../images/level-10.png" width="840" height="426" loading="lazy" alt="Labyrinth: uitgehouwen groene blokken, onder water" /><figcaption><b>Labyrinth</b> · act 1</figcaption></figure>					<figure><img src="../images/level-13.png" width="840" height="426" loading="lazy" alt="Scrap Brain: een fabriek voor een stad bij zonsondergang" /><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: blauwe balken in de nacht" /><figcaption><b>Sky Base</b> · act 1</figcaption></figure>					<figure><img src="../images/boss.png" width="609" height="309" loading="lazy" alt="De dokter in zijn vliegmachine boven Sonic, aan het einde van Green Hill" /><figcaption><b>De eerste eindbaas</b> · Green Hill, act 3</figcaption></figure>					<figure><img src="../images/special.png" width="840" height="426" loading="lazy" alt="Een bonusronde: sterren, ringen en veren" /><figcaption><b>Een bonusronde</b> · ringen en veren</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="Een race met vier spelers door Green Hill, de ranglijst rechtsboven" />					<figcaption><b>Een race met vier</b> tegen drie bots.</figcaption>				</figure>				<div>					<h2>Tegen de bots</h2>					<p>In <b>MULTIPLAYER</b> neem je het op tegen 1 tot 4 door de computer bestuurde renners (maximaal 5 bij de vlag), in de zones van het spel, met vier regels:</p>					<p><b>Race</b>: als eerste bij het bord. <b>Vlag</b>: hem het langst vasthouden. <b>Ringen</b>: de meeste verzamelen. <b>Deathmatch</b>: als laatste overblijven.</p>					<p>Zin om het tegen echte spelers op te nemen? Dat kan in de <a href="#complete">volledige versie</a>.</p>				</div>			</div>		</section>		<section id="complete">			<div class="wrap">				<div class="full">					<h2>De volledige versie: sonic.mimichat.fr</h2>					<p>Dit spel komt van <strong>Sonic PHP</strong>, waarvan de oorspronkelijke, volledige versie wordt gespeeld op <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">sonic.mimichat.fr</a>. Die heeft alles wat je hier ziet, en meer:</p>					<ul>						<li><strong>online multiplayer voor maximaal 6 spelers</strong>, in race, vlag, ringen of deathmatch;</li>						<li>openbare kamers, of privékamers met een code van 4 letters; lege plekken worden door bots ingenomen;</li>						<li>chat in de kamers en tijdens het spel;</li>						<li><strong>replays</strong> van elke partij;</li>						<li>een desktopversie (native PHP) die in dezelfde kamers komt als de browsers.</li>					</ul>					<a class="cta pixel" href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">Online spelen ↗</a>				</div>			</div>		</section>		<section id="commandes">			<div class="wrap">				<h2>Besturing</h2>				<div class="cards">					<div class="card">						<h3>Toetsenbord</h3>						<p><kbd>←</kbd> <kbd>→</kbd> rennen<br />							<kbd>↑</kbd> omhoog kijken, <kbd>↓</kbd> tot een bal rollen<br />							<kbd>Spatie</kbd> springen<br />							<kbd>Enter</kbd> menu's en pauze<br />							<kbd>Esc</kbd> terug naar het titelscherm</p>					</div>					<div class="card">						<h3>Gamepad</h3>						<p>Richtingskruis of stick om te rennen, <b>A</b>, <b>B</b>, <b>X</b> of <b>Y</b> om te springen, <b>Start</b> voor menu's en pauze, <b>Select</b> om terug te gaan naar het titelscherm.</p>					</div>					<div class="card">						<h3>Telefoon</h3>						<p>Links een richtingskruis om te rennen; rechts <b>JUMP</b> om te springen en <b>ROLL</b> voor de bal, <b>START</b> voor pauze en <b>MENU</b> voor het titelscherm. Houd de telefoon horizontaal.</p>					</div>				</div>				<p style="margin-top: 28px; text-align: center"><a class="cta pixel" href="../play/?back=../nl/">▶ Nu spelen</a></p>			</div>		</section>		<section id="fabrication">			<div class="wrap split">				<div>					<h2>Hoe het is gemaakt</h2>					<p><strong>Sonic PHP</strong> is helemaal in PHP geschreven: de natuurkunde, de objecten, de vijanden, de eindbazen, de camera en de bots. De levels, de graphics en hun kleurcycli zijn gedecodeerd uit de originele cartridge, en de muziek is gemaakt door het Z80-geluidsprogramma van het spel in een emulator te laten draaien.</p>					<p>Hier is het spel overgezet naar de <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a>-engine: dezelfde code draait in een venster op een computer en in de browser, waar PHP naar <strong>WebAssembly</strong> is gecompileerd. De spellogica is die van het origineel; alleen beeld, geluid, besturing en savegames lopen via JumPHP.</p>					<p>De code: <a href="https://github.com/davidnurdin/sonic-jumphp" target="_blank" rel="noopener">sonic-jumphp</a> (deze versie) en <a href="https://github.com/davidnurdin/sonicGamePhp" target="_blank" rel="noopener">sonicGamePhp</a> (de volledige versie).</p>				</div>				<figure>					<img src="../images/title.png" width="840" height="426" loading="lazy" class="smooth"						alt="Het titelscherm, met het logo en het menu START, MULTIPLAYER, OPTIONS, BEST TIMES" />					<figcaption><b>Het titelscherm</b> en de menu's.</figcaption>				</figure>			</div>		</section>		<section id="questions">			<div class="wrap">				<h2>Vragen</h2>				<details>					<summary>Moet ik iets installeren?</summary>					<p>Nee: het spel draait in de browser, op een computer of een telefoon. De eerste keer wordt ongeveer 25 MB gedownload (PHP in WebAssembly, de levels, de graphics en de muziek), daarna zit alles in de cache.</p>				</details>				<details>					<summary>Wat is het verschil met de volledige versie?</summary>					<p>De <a href="https://sonic.mimichat.fr/" target="_blank" rel="noopener">volledige versie</a> voegt online multiplayer voor maximaal 6 spelers, kamers, chat en replays toe. Deze is hetzelfde spel, overgezet naar JumPHP, om alleen of tegen bots te spelen.</p>				</details>				<details>					<summary>Worden mijn tijden bewaard?</summary>					<p>Ja: beste tijden, spoken en opties blijven in je browser.</p>				</details>				<details>					<summary>Kun je ook buiten de browser spelen?</summary>					<p>Ja, met JumPHP en Docker: <code>bin/jumphp run sonic</code> opent het spel in een venster, met geluid. Zie de <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>Een gratis fanremake zonder reclame, gemaakt met <a href="https://github.com/davidnurdin/jumPhp" target="_blank" rel="noopener">JumPHP</a>.</p>			<p>Sonic the Hedgehog © SEGA 1991; Master System-versie ontwikkeld door Ancient. Dit project is niet verbonden aan SEGA of Ancient; de personages, graphics, levels en muziek zijn eigendom van hun makers.</p>		</div>	</footer></body></html>