KO

SAPIENS

davidnurdin 제작 · 리메이크
5.0 (1)
▶ 플레이 💬 후기 소스 🕘 버전 편집 GitHub
. / site / en / index.html · commit 6bc6915
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>SAPIENS — A Hundred Thousand Years Ago… | Play Online</title><meta name="description" content="SAPIENS, the prehistoric adventure game by Didier and Olivier Guillion (1986), playable again in your browser, on desktop and on mobile. Survive, hunt, bargain with the tribes and become chief of the Nimble Feet."><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="theme-color" content="#1b120b"><meta property="og:type" content="website"><meta property="og:title" content="SAPIENS — A Hundred Thousand Years Ago…"><meta property="og:description" content="The 1986 prehistoric adventure game, ported to PHP and playable in your browser."><meta property="og:url" content="https://{{DOMAIN}}/en/"><meta property="og:locale" content="en_US"><meta property="og:image" content="https://{{DOMAIN}}/img/og.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="SAPIENS — A Hundred Thousand Years Ago…"><meta name="twitter:description" content="The 1986 prehistoric adventure game, ported to PHP and playable in your browser."><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%231b120b'/%3E%3Cpath d='M20 50 L32 12 L44 50 Z' fill='%23d9822b'/%3E%3Cpath d='M28 50 L32 30 L36 50 Z' fill='%23f2c14e'/%3E%3C/svg%3E"><script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoGame","name":"SAPIENS","url":"https://{{DOMAIN}}/en/","description":"SAPIENS, the prehistoric adventure game by Didier and Olivier Guillion (1986), playable again in your browser, on desktop and on mobile. Survive, hunt, bargain with the tribes and become chief of the Nimble Feet.","author":[{"@type":"Person","name":"Didier Guillion"},{"@type":"Person","name":"Olivier Guillion"}],"datePublished":"1986","genre":["Adventure","Survival"],"gamePlatform":["Web browser","Mobile"],"inLanguage":"en","image":"https://{{DOMAIN}}/img/og.png","isAccessibleForFree":true,"license":"https://www.gnu.org/licenses/gpl-3.0.html"}</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Alegreya+Sans:wght@400;700&display=swap" rel="stylesheet"><style>:root {  --night: #1b120b;  --rock: #3a2a1d;  --rock2: #4d3826;  --ochre: #d9822b;  --ochre-light: #f2c14e;  --blood: #9e2f1c;  --charcoal: #120c08;  --bone: #f1e4c8;  --bone-dim: #cdbb98;}* { box-sizing: border-box; }html { scroll-behavior: smooth; }body {  margin: 0;  background: var(--night);  color: var(--bone);  font: 18px/1.6 "Alegreya Sans", system-ui, sans-serif;}a { color: var(--ochre-light); }h1, h2, h3 { font-family: "Uncial Antiqua", Georgia, serif; font-weight: 400; letter-spacing: .02em; }/* --- the cave wall --- */.cave {  position: relative;  min-height: 100svh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  text-align: center;  padding: 48px 16px 64px;  overflow: hidden;  background:    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(242,193,78,.18), transparent 70%),    radial-gradient(ellipse at 20% 20%, var(--rock2), transparent 55%),    radial-gradient(ellipse at 80% 70%, #4a3220, transparent 60%),    linear-gradient(160deg, var(--rock) 0%, #2b1e14 55%, var(--charcoal) 100%);}.cave::before {  /* the grain of the rock */  content: "";  position: absolute;  inset: 0;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");  mix-blend-mode: multiply;  opacity: .8;  pointer-events: none;}.paintings {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  opacity: .55;  pointer-events: none;}.torch {  position: absolute;  inset: 0;  background: radial-gradient(circle at 50% 100%, rgba(255,160,60,.25), transparent 55%);  animation: flicker 3.2s infinite ease-in-out;  pointer-events: none;}@keyframes flicker {  0%, 100% { opacity: .85; }  20% { opacity: 1; }  45% { opacity: .7; }  60% { opacity: .95; }  80% { opacity: .78; }}.cave > *:not(.paintings):not(.torch) { position: relative; }.era { color: var(--ochre-light); letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; margin: 0 0 8px; }.title {  margin: 0;  font-size: clamp(3.2rem, 14vw, 8rem);  line-height: 1;  color: var(--ochre);  text-shadow: 3px 3px 0 var(--blood), 0 0 30px rgba(217,130,43,.35);}.tagline { font-size: clamp(1.1rem, 3.5vw, 1.5rem); max-width: 34em; margin: 18px auto 30px; color: var(--bone); }.play {  display: inline-block;  padding: 18px 46px;  font: 1.6rem "Uncial Antiqua", Georgia, serif;  color: var(--charcoal);  text-decoration: none;  background: linear-gradient(145deg, #e9b863, var(--ochre) 55%, #a85d1c);  clip-path: polygon(6% 0, 94% 4%, 100% 48%, 95% 100%, 5% 96%, 0 52%);  box-shadow: 0 8px 0 #6b3a12;  transition: transform .15s, filter .15s;}.play:hover, .play:focus-visible { transform: translateY(-2px) scale(1.03); filter: brightness(1.1); }.hint { margin-top: 16px; font-size: .95rem; color: var(--bone-dim); }main { max-width: 1060px; margin: 0 auto; padding: 0 16px; }section { padding: 56px 0 8px; }h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--ochre-light); margin: 0 0 18px; }h2::after {  content: "";  display: block;  width: 120px;  height: 6px;  margin-top: 6px;  background: repeating-linear-gradient(90deg, var(--blood) 0 14px, transparent 14px 20px);  border-radius: 3px;}.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }figure { margin: 0; background: var(--rock); border: 3px solid #5a4029; border-radius: 6px; overflow: hidden; }figure img { display: block; width: 100%; height: auto; image-rendering: pixelated; aspect-ratio: 8 / 5; object-fit: cover; }figcaption { padding: 10px 14px; color: var(--bone-dim); font-size: .95rem; }.tribes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }.tribe { background: linear-gradient(160deg, var(--rock2), var(--rock)); padding: 18px; border-radius: 8px; border-left: 6px solid var(--ochre); }.tribe h3 { margin: 0 0 4px; color: var(--ochre-light); font-size: 1.25rem; }.tribe p { margin: 0; color: var(--bone-dim); }ol.quest { counter-reset: q; list-style: none; padding: 0; }ol.quest li { counter-increment: q; position: relative; padding: 10px 0 10px 56px; border-bottom: 1px dashed #5a4029; }ol.quest li::before {  content: counter(q);  position: absolute; left: 0; top: 8px;  width: 40px; height: 40px;  display: grid; place-items: center;  font-family: "Uncial Antiqua", Georgia, serif;  color: var(--charcoal); background: var(--ochre);  border-radius: 50% 45% 55% 40%;}.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }.panel { background: var(--rock); border-radius: 8px; padding: 18px 20px; }.panel h3 { margin: 0 0 10px; color: var(--ochre-light); }.panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }.panel dt { color: var(--ochre-light); font-weight: 700; }.panel dd { margin: 0; }kbd { background: var(--bone); color: var(--charcoal); border-radius: 4px; padding: 0 6px; font: 700 .85rem/1.5 ui-monospace, monospace; box-shadow: 0 2px 0 #8a7a5c; }.timeline { border-left: 4px solid var(--ochre); margin: 0; padding: 0 0 0 22px; list-style: none; }.timeline li { position: relative; padding: 4px 0 12px; }.timeline li::before { content: ""; position: absolute; left: -31px; top: 12px; width: 14px; height: 14px; background: var(--blood); border-radius: 50%; border: 3px solid var(--night); }.timeline b { color: var(--ochre-light); }footer { margin-top: 64px; padding: 32px 16px 48px; text-align: center; color: var(--bone-dim); font-size: .9rem; background: var(--charcoal); }footer p { max-width: 760px; margin: 8px auto; }@media (prefers-reduced-motion: reduce) {  .torch { animation: none; }  html { scroll-behavior: auto; }}.langs { background: var(--charcoal); padding: 10px 12px; text-align: center; font-size: .9rem; line-height: 1.3; }.langs a { display: inline-block; margin: 2px 3px; padding: 3px 9px; border-radius: 12px; color: var(--bone-dim); text-decoration: none; border: 1px solid #5a4029; }.langs a:hover, .langs a:focus-visible { color: var(--ochre-light); border-color: var(--ochre); }.langs a[aria-current="true"] { background: var(--ochre); border-color: var(--ochre); color: var(--charcoal); font-weight: 700; }</style></head><body><nav class="langs" aria-label="Languages"><a href="../" hreflang="fr" lang="fr">Français</a><a href="./" hreflang="en" lang="en" aria-current="true">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">한국어</a></nav><header class="cave">  <svg class="paintings" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">    <defs>      <filter id="rough"><feTurbulence baseFrequency=".04" numOctaves="2" result="t"/><feDisplacementMap in="SourceGraphic" in2="t" scale="6"/></filter>    </defs>    <g filter="url(#rough)" fill="#b4492a">      <!-- bison -->      <path d="M120 250c30-50 120-60 170-40 30-25 70-20 85 10 10 20 0 40-15 50l10 60h-18l-12-45c-30 10-70 12-110 5l-10 45h-18l2-50c-30-5-60-10-74-35z"/>      <!-- horse -->      <path d="M880 170c40-30 110-30 150 0l40-30 15 10-25 40c10 20 5 40-15 50l8 60h-16l-12-50c-40 10-80 8-110 0l-12 50h-16l6-60c-20-15-25-45-13-70z" fill="#2a1a10"/>      <!-- deer -->      <path d="M780 560c30-25 80-28 110-10l20-40-30-30 12-8 30 28 20-45 12 6-22 50 18 14-12 40c4 20-6 30-18 35l6 50h-14l-10-42c-30 6-55 4-75-2l-8 44h-14l4-50c-20-10-24-26-24-40z"/>      <!-- hunters -->      <path d="M330 600l10-40-14-30 10-4 14 26 10-32h8l-6 34 20 22-6 8-20-18-8 36z" fill="#2a1a10"/>      <path d="M380 600l10-40-14-30 10-4 14 26 10-32h8l-6 34 20 22-6 8-20-18-8 36z" fill="#2a1a10"/>      <path d="M300 520l140-60" stroke="#2a1a10" stroke-width="4"/>    </g>    <!-- hands -->    <g fill="#d9822b" opacity=".7">      <path d="M560 120c-6-30-2-60 8-62s8 28 10 40c2-18 4-48 14-48s8 34 8 48c4-16 8-40 18-38s4 30 2 46c6-10 12-26 20-22s-6 30-14 46c-10 22-30 36-48 32s-16-20-18-42z"/>      <path d="M1040 520c-6-30-2-60 8-62s8 28 10 40c2-18 4-48 14-48s8 34 8 48c4-16 8-40 18-38s4 30 2 46c6-10 12-26 20-22s-6 30-14 46c-10 22-30 36-48 32s-16-20-18-42z" fill="#9e2f1c"/>    </g>    <g fill="none" stroke="#f1e4c8" stroke-width="3" opacity=".25">      <circle cx="140" cy="640" r="6"/><circle cx="160" cy="660" r="6"/><circle cx="182" cy="648" r="6"/><circle cx="204" cy="668" r="6"/>    </g>  </svg>  <div class="torch"></div>  <p class="era">Didier &amp; Olivier Guillion · 1986</p>  <h1 class="title">SAPIENS</h1>  <p class="tagline">A hundred thousand years ago, dawn breaks over the Pieds-Agiles tribe. Survive, hunt, talk to the other tribes and become the chief of your clan.</p>  <a class="play" href="../play/">Play</a>  <p class="hint">Free, nothing to install · desktop and mobile (hold your phone in landscape)</p></header><main>  <section id="jeu">    <h2>The game</h2>    <p>You are <strong>Torgan</strong>, a young hunter of the <strong>Pieds-Agiles</strong>. You roam a vast valley in first-person view: mountains, forests, springs, clouds and storms. Day follows night, and hunger, thirst and fatigue wear you down. You meet wolves, bears, rabbits and men from other tribes: you must then fight in side view, with an axe, a spear or bare hands… or else talk, trade gifts and make allies.</p>    <p>Chip flint to make your weapons, gather berries and roots, tend your wounds, sleep by the fire. Here, cunning and diplomacy are often worth more than strength.</p>    <div class="shots">      <figure><img src="../img/paysage.png" alt="The landscape in first-person view" loading="lazy" width="640" height="400"><figcaption>The valley in first-person view, by day and by night</figcaption></figure>      <figure><img src="../img/combat.png" alt="A fight in side view" loading="lazy" width="640" height="400"><figcaption>Hunting and fighting in side view</figcaption></figure>      <figure><img src="../img/quete.png" alt="Chief Hognor gives out a quest" loading="lazy" width="640" height="400"><figcaption>Night falls: chief Hognor gives his first quest</figcaption></figure>    </div>  </section>  <section id="quete">    <h2>The quest</h2>    <p>Hognor, the chief of your tribe, sets you ever harder trials:</p>    <ol class="quest">      <li>Bring back food: the tribe is hungry.</li>      <li>Get the <strong>Potion of Life</strong> from the Yeux-Malins, because the young ones ate poisonous berries.</li>      <li>Take up the Bras-de-Roc's challenge: defeat their chief and steal the <strong>Ivory Axe</strong>.</li>      <li>Take back the <strong>Sacred Staff</strong> stolen by the Hyènes-Folles.</li>      <li>And finally… let the law of strength choose the new chief.</li>    </ol>    <div class="tribes">      <div class="tribe"><h3>Pieds-Agiles</h3><p>Your tribe. Chief: Hognor.</p></div>      <div class="tribe"><h3>Yeux-Malins</h3><p>Cunning healers. Chief: Sl-Oom.</p></div>      <div class="tribe"><h3>Bras-de-Roc</h3><p>Feared warriors. Chief: Grungh.</p></div>      <div class="tribe"><h3>Hyènes-Folles</h3><p>Raiders of the South. Chief: Krok-G.</p></div>    </div>  </section>  <section id="aide">    <h2>Controls</h2>    <div class="controls">      <div class="panel">        <h3>Computer</h3>        <dl>          <dt>Mouse</dt><dd>Pick an action in the menus at the bottom (▲▼ arrows to scroll), click the picture to look around</dd>          <dt><kbd>←</kbd> <kbd>→</kbd></dt><dd>Landscape: turn · side view: walk</dd>          <dt><kbd>↑</kbd> <kbd>↓</kbd></dt><dd>Landscape: speed up / slow down · side view: stand up / crouch</dd>          <dt><kbd>Space</kbd></dt><dd>Landscape: map · side view: strike</dd>          <dt><kbd>Enter</kbd></dt><dd>Change weapon (or right click)</dd>          <dt><kbd>Esc</kbd></dt><dd>Leave the view (or click)</dd>          <dt>Numpad</dt><dd>Second player (<kbd>8</kbd><kbd>2</kbd><kbd>4</kbd><kbd>6</kbd>, <kbd>1</kbd> strike, <kbd>3</kbd> weapon)</dd>        </dl>      </div>      <div class="panel">        <h3>Mobile</h3>        <dl>          <dt>Touch</dt><dd>Like a mouse click: the whole game is played with the menus (Look › Landscape to go exploring)</dd>          <dt>Joystick</dt><dd>Left strip: turn, move forward (landscape), walk (side view)</dd>          <dt>STRIKE</dt><dd>Side view: strike · landscape: map</dd>          <dt>WEAPON</dt><dd>Side view: change weapon</dd>          <dt>EXIT</dt><dd>Leave the current landscape or view (tapping the picture works too)</dd>          <dt>MAP</dt><dd>The map in the landscape</dd>        </dl>      </div>    </div>  </section>  <section id="histoire">    <h2>A long history</h2>    <ul class="timeline">      <li><b>1986</b> — First version, written in assembly for the Thomson MO5 and TO7/8/9 and the Amstrad CPC, then rewritten in C for the PC.</li>      <li><b>1987</b> — A more colorful version for the Atari ST.</li>      <li><b>1996</b> — The C sources come out of the boxes: a version for MacOS and Windows.</li>      <li><b>2017</b> — Sapiens becomes freeware.</li>      <li><b>2018</b> — <a href="https://www.myriad-online.com/fr/products/sapiensopensource.htm">Myriad releases the sources</a> under the GNU GPL v3 license.</li>      <li><b>Today</b> — A port to PHP, playable in your browser.</li>    </ul>  </section>  <section id="php">    <h2>100% PHP</h2>    <p>This version is a faithful, function-by-function port of the 2018 C sources to <strong>PHP</strong>, built on the <a href="https://github.com/davidnurdin/jumPhp">JumPHP</a> framework. The same code runs on desktop (PHP + SDL2) and in the browser (PHP compiled to WebAssembly). The sprites, sounds and texts are those of the original game.</p>    <p>Source code: <a href="https://github.com/davidnurdin/sapiensPhp">github.com/davidnurdin/sapiensPhp</a> · original sources: <a href="https://www.myriad-online.com/fr/products/sapiensopensource.htm">Myriad's Sapiens open source page</a>.</p>  </section></main><footer>  <p><strong>SAPIENS</strong> © Didier &amp; Olivier Guillion — Myriad, 1986-2017. Original music by Gilles Soulet.</p>  <p>Sources released under the <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL v3</a> license; this port is distributed under the same license.</p>  <p>Unofficial fan site.</p></footer></body></html>