Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
31ce91f227 | ||
|
|
737e1d9437 |
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
@@ -1,70 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Imagen — Fleet Demo</title>
|
||||
<style>
|
||||
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-width: 320px; background: #040816; color: #dbeeff; overflow: hidden; }
|
||||
.scene {
|
||||
isolation: isolate; position: relative; min-height: 100vh; overflow: hidden;
|
||||
background: #07122a url("assets/space-nebula.png") center / cover no-repeat;
|
||||
}
|
||||
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 45% 54%, transparent 0 23%, rgba(3,8,23,.54) 72%); }
|
||||
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(#fff 0.65px, transparent .75px); background-size: 31px 31px; mix-blend-mode: screen; }
|
||||
header { position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(20px,4vw,54px); text-shadow: 0 2px 16px #01030b; }
|
||||
.eyebrow { margin: 0 0 8px; color: #76eaff; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
|
||||
h1 { margin: 0; font-size: clamp(28px,5vw,70px); font-weight: 750; letter-spacing: -.055em; line-height: .92; }
|
||||
.legend { padding: 11px 14px; border: 1px solid rgba(159,219,255,.28); border-radius: 999px; backdrop-filter: blur(10px); background: rgba(3,12,31,.4); color: #a9c7dd; font: 600 11px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
|
||||
.hud { position: absolute; left: clamp(20px,4vw,54px); bottom: clamp(20px,4vw,44px); max-width: 330px; padding: 18px; border-left: 2px solid #57dfff; background: linear-gradient(90deg,rgba(5,16,43,.78),transparent); }
|
||||
.hud strong { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; }
|
||||
.hud span { color: #aac4d9; font-size: 12px; line-height: 1.55; }
|
||||
.fleet { position: absolute; inset: 13% 7% 8%; }
|
||||
.ship { position: absolute; width: clamp(72px,12vw,180px); filter: drop-shadow(0 0 13px rgba(40,223,255,.55)); image-rendering: pixelated; transform-origin: center; animation: drift var(--duration, 9s) ease-in-out infinite alternate; }
|
||||
.ship:hover { z-index: 4; filter: drop-shadow(0 0 24px #7cfcff); transform: scale(1.14); transition: transform .2s, filter .2s; }
|
||||
.ship::after { content: ""; position: absolute; left: 43%; top: 78%; width: 14%; height: 45%; z-index: -1; opacity: .6; filter: blur(7px); background: linear-gradient(#7dffff,transparent); }
|
||||
.flagship { --duration: 11s; left: 40%; top: 29%; width: clamp(135px,20vw,270px); animation-delay: -3s; }
|
||||
.one { --duration: 8s; left: 9%; top: 35%; animation-delay: -5s; }
|
||||
.two { --duration: 10s; right: 9%; top: 30%; animation-delay: -1s; }
|
||||
.three { --duration: 9s; left: 22%; bottom: 7%; animation-delay: -7s; }
|
||||
.four { --duration: 12s; right: 24%; bottom: 5%; animation-delay: -4s; }
|
||||
.five { --duration: 7s; right: 3%; bottom: 31%; width: clamp(55px,8vw,112px); animation-delay: -2s; opacity: .82; }
|
||||
.micro { width: 128px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(52,229,255,.58)); }
|
||||
.micro-a { left: 7%; top: 12%; animation-delay: -1s; }
|
||||
.micro-b { left: 27%; top: 14%; animation-delay: -6s; }
|
||||
.micro-c { right: 21%; top: 12%; animation-delay: -3s; }
|
||||
.micro-d { right: 2%; top: 51%; animation-delay: -8s; }
|
||||
.callout { position: absolute; left: 54%; top: 25%; width: 175px; padding: 10px 12px; border: 1px solid rgba(99,231,255,.35); border-radius: 7px; background: rgba(4,16,39,.48); color: #d6f7ff; font: 700 10px/1.45 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.callout::before { content: ""; position: absolute; right: 100%; top: 50%; width: 13vw; border-top: 1px solid rgba(99,231,255,.45); }
|
||||
.callout b { color: #68eaff; }
|
||||
@keyframes drift { from { translate: 0 0; } to { translate: 0 -16px; } }
|
||||
@media (max-width: 650px) { .fleet { inset: 18% 2% 10%; } .legend { display: none; } .callout { left: 48%; top: 42%; transform: scale(.72); transform-origin: left; } .hud { max-width: 230px; } }
|
||||
@media (prefers-reduced-motion: reduce) { .ship { animation: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="scene">
|
||||
<div class="grain"></div>
|
||||
<header>
|
||||
<div><p class="eyebrow">Imagen · fleet catalogue</p><h1>Asterion Patrol</h1></div>
|
||||
<div class="legend">SECTOR 04 · 12:00 FORMATION</div>
|
||||
</header>
|
||||
<section class="fleet" aria-label="Spacecraft formation">
|
||||
<img class="ship flagship" src="output/spaceships/fleet_catalog_01.png" alt="Asterion vanguard">
|
||||
<img class="ship one" src="output/spaceships/fleet_catalog_05.png" alt="Asterion escort">
|
||||
<img class="ship two" src="output/spaceships/fleet_catalog_09.png" alt="Asterion corvette">
|
||||
<img class="ship three" src="output/spaceships/fleet_catalog_13.png" alt="Asterion scout">
|
||||
<img class="ship four" src="output/spaceships/fleet_catalog_17.png" alt="Asterion support ship">
|
||||
<img class="ship five" src="output/spaceships/fleet_catalog_21.png" alt="Asterion tender">
|
||||
<img class="ship micro micro-a" src="output/spaceships/fleet_catalog_25.png" alt="Asterion micro scout">
|
||||
<img class="ship micro micro-b" src="output/spaceships/fleet_catalog_27.png" alt="Asterion micro interceptor">
|
||||
<img class="ship micro micro-c" src="output/spaceships/fleet_catalog_29.png" alt="Asterion micro patrol ship">
|
||||
<img class="ship micro micro-d" src="output/spaceships/fleet_catalog_31.png" alt="Asterion micro support ship">
|
||||
<div class="callout"><b>Asterion-01</b><br>pixel-perfect vanguard<br><a href="fleet-glossary.html">open glossary →</a></div>
|
||||
</section>
|
||||
<aside class="hud"><strong>Fleet telemetry</strong><span>New 64×64 fleet catalogue. Every visible ship is from the latest pixel-perfect generation. Hover to inspect a silhouette.</span></aside>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Asterion Fleet Glossary</title>
|
||||
<style>
|
||||
*{box-sizing:border-box} body{margin:0;min-height:100vh;color:#dcecff;background:#071128 url("assets/space-nebula.png") center/cover fixed;font-family:Inter,system-ui,sans-serif} main{max-width:1120px;margin:auto;padding:54px 24px 72px} a{color:#70edff} .eyebrow{color:#78e8ff;font:700 11px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase} h1{margin:7px 0 10px;font-size:clamp(36px,7vw,70px);letter-spacing:-.06em}.intro{max-width:630px;color:#a9c5db;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin-top:35px}.card{min-height:250px;padding:19px;border:1px solid #78dffc38;border-radius:16px;background:linear-gradient(145deg,#071b3be8,#071020b8);box-shadow:0 18px 55px #02071480}.card img{display:block;width:128px;height:128px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 13px #4ee7ff99);margin:0 auto 8px}.tag{color:#72eaff;font:700 10px ui-monospace,monospace;letter-spacing:.12em}.card h2{font-size:20px;margin:5px 0}.card p{margin:0;color:#a9c5db;font-size:13px;line-height:1.55}.foot{margin-top:34px;color:#8faec5;font-size:12px}</style></head>
|
||||
<body><main><a class="eyebrow" href="demo.html">← return to scene</a><h1>Asterion Fleet</h1><p class="intro">A working glossary for the newly generated 64×64 fleet. All entries share a pixel-perfect grid, blue-gray armour, cyan propulsion and a strict north-facing top-down silhouette.</p><section class="grid">
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_01.png" alt="Needle scout"><span class="tag">AST-01 · Recon</span><h2>Needle Scout</h2><p>Fast survey craft. Its narrow nose and compact engine pair make it legible at the smallest tactical scale.</p></article>
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_05.png" alt="Mirror interceptor"><span class="tag">AST-05 · Intercept</span><h2>Mirror Interceptor</h2><p>Symmetric pursuit hull with swept wings, designed to anchor the visual language of the patrol wing.</p></article>
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_09.png" alt="Missile corvette"><span class="tag">AST-09 · Strike</span><h2>Missile Corvette</h2><p>Compact midline striker. The broad central volume makes it a readable combat silhouette without extra effects.</p></article>
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_13.png" alt="Support frigate"><span class="tag">AST-13 · Support</span><h2>Support Frigate</h2><p>Wide, stable frame intended for repair and relay duties; its wings visually distinguish it from the attack craft.</p></article>
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_17.png" alt="Patrol ship"><span class="tag">AST-17 · Patrol</span><h2>Diamond Patrol Ship</h2><p>Heavy symmetric hull for perimeter duty. The diamond centre reads clearly in formation and in isolation.</p></article>
|
||||
<article class="card"><img src="output/spaceships/fleet_catalog_21.png" alt="Cargo tender"><span class="tag">AST-21 · Logistics</span><h2>Cargo Tender</h2><p>Utility vessel for fuel and supplies. Its softer, wider profile adds a practical non-combat role to the fleet.</p></article>
|
||||
</section><p class="foot">Source batch: PixelLab · 64×64 · transparent PNG · prompt and generation provenance embedded in each file.</p></main></body></html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Asterion Patrol — Demo Game</title>
|
||||
<style>
|
||||
*{box-sizing:border-box} body{margin:0;min-height:100vh;display:grid;place-items:center;background:#030817;color:#e1f5ff;font-family:Inter,system-ui,sans-serif;overflow:hidden}
|
||||
.shell{position:relative;width:min(100vw,1100px);aspect-ratio:16/9;box-shadow:0 30px 90px #000;border:1px solid #71e9ff42;background:#071128}
|
||||
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}.hud{position:absolute;inset:0;pointer-events:none;padding:20px;display:flex;justify-content:space-between;text-shadow:0 2px 8px #000;font:700 13px ui-monospace,monospace;letter-spacing:.08em}.hud b{color:#75edff}.tip{position:absolute;left:20px;bottom:17px;margin:0;color:#b7cce1;font-size:11px;line-height:1.5;text-shadow:0 2px 5px #000}.tip kbd{padding:2px 5px;border:1px solid #80dbef66;border-radius:4px;background:#061a32;font-family:inherit}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#030916aa;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.panel{padding:26px 34px;border:1px solid #76eaff55;border-radius:12px;background:#07172bd9;box-shadow:0 0 50px #31c9ff30}.panel h1{margin:0 0 8px;font-size:28px;letter-spacing:-.04em}.panel p{margin:0;color:#b4cce0;font-size:13px}.panel button{margin-top:18px;padding:10px 16px;border:0;border-radius:6px;background:#69eaff;color:#031221;font-weight:800;cursor:pointer}@media(max-width:640px){.shell{width:100vw}.hud{padding:12px;font-size:10px}.tip{left:12px;bottom:10px;font-size:9px}}
|
||||
</style>
|
||||
</head>
|
||||
<body><section class="shell"><canvas id="game" width="960" height="540" aria-label="Asterion Patrol game"></canvas>
|
||||
<div class="hud"><div>ASTERION PATROL<br><b id="score">SCORE 00000</b></div><div id="status">HULL <b>■■■</b></div></div>
|
||||
<p class="tip"><kbd>WASD</kbd>/<kbd>←↑→↓</kbd> move · <kbd>SPACE</kbd> or click fire · <kbd>P</kbd> pause</p>
|
||||
<div id="overlay" class="overlay"><div class="panel"><h1>ASTERION PATROL</h1><p>Defend the nebula corridor.</p><button id="start">Launch mission</button></div></div>
|
||||
</section>
|
||||
<script>
|
||||
const canvas=document.querySelector('#game'), ctx=canvas.getContext('2d'); ctx.imageSmoothingEnabled=false;
|
||||
const scoreEl=document.querySelector('#score'), statusEl=document.querySelector('#status'), overlay=document.querySelector('#overlay'), start=document.querySelector('#start');
|
||||
const load=src=>{const i=new Image();i.src=src;return i};
|
||||
const bg=load('assets/space-nebula.png'), playerImg=load('output/spaceships/fleet_catalog_01.png'), enemyImgs=[load('output/spaceships/fleet_catalog_05.png'),load('output/spaceships/fleet_catalog_09.png'),load('output/spaceships/fleet_catalog_17.png')], impact=load('assets/plasma-impact.png');
|
||||
let keys={}, bullets=[], enemies=[], bursts=[], player, score, last=0, spawn=0, running=false, paused=false;
|
||||
function reset(){player={x:480,y:445,r:24,hp:3,cool:0};bullets=[];enemies=[];bursts=[];score=0;spawn=0;scoreEl.textContent='SCORE 00000';statusEl.innerHTML='HULL <b>■■■</b>'}
|
||||
function fire(){if(!running||paused||player.cool>0)return;player.cool=.18;bullets.push({x:player.x,y:player.y-34,vy:-520});}
|
||||
function spawnEnemy(){const img=enemyImgs[Math.floor(Math.random()*enemyImgs.length)];enemies.push({x:55+Math.random()*850,y:-45,v:45+Math.random()*45,r:23,img,hp:1,wiggle:Math.random()*6});}
|
||||
function hit(x,y){bursts.push({x,y,t:0});}
|
||||
function update(dt){if(!running||paused)return;const speed=260;let dx=(keys.ArrowRight||keys.d?1:0)-(keys.ArrowLeft||keys.a?1:0),dy=(keys.ArrowDown||keys.s?1:0)-(keys.ArrowUp||keys.w?1:0);if(dx||dy){const l=Math.hypot(dx,dy);player.x+=dx/l*speed*dt;player.y+=dy/l*speed*dt}player.x=Math.max(28,Math.min(932,player.x));player.y=Math.max(70,Math.min(500,player.y));player.cool=Math.max(0,player.cool-dt);spawn-=dt;if(spawn<=0){spawn=.65+Math.random()*.55;spawnEnemy()}bullets.forEach(b=>b.y+=b.vy*dt);bullets=bullets.filter(b=>b.y>-15);enemies.forEach(e=>{e.y+=e.v*dt;e.x+=Math.sin(performance.now()/700+e.wiggle)*20*dt});for(const b of bullets){for(const e of enemies){if(!e.dead&&Math.hypot(b.x-e.x,b.y-e.y)<e.r+5){e.dead=true;b.dead=true;score+=125;hit(e.x,e.y)}}}enemies=enemies.filter(e=>{if(e.dead)return false;if(e.y>575){player.hp--;hit(player.x,player.y);return false}return true});bullets=bullets.filter(b=>!b.dead);bursts.forEach(b=>b.t+=dt);bursts=bursts.filter(b=>b.t<.64);scoreEl.textContent='SCORE '+String(score).padStart(5,'0');statusEl.innerHTML='HULL <b>'+ '■'.repeat(Math.max(0,player.hp))+'□'.repeat(3-Math.max(0,player.hp))+'</b>';if(player.hp<=0){running=false;overlay.classList.remove('hidden');overlay.querySelector('h1').textContent='MISSION LOST';overlay.querySelector('p').textContent='Score: '+score;start.textContent='Retry mission'}}
|
||||
function ship(img,x,y,size,rotation=0){ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.drawImage(img,-size/2,-size/2,size,size);ctx.restore()}
|
||||
function draw(){ctx.clearRect(0,0,960,540);if(bg.complete){ctx.drawImage(bg,0,0,960,540)}else{ctx.fillStyle='#071128';ctx.fillRect(0,0,960,540)}ctx.fillStyle='rgba(4,12,30,.38)';ctx.fillRect(0,0,960,540);for(const b of bullets){ctx.fillStyle='#7effff';ctx.fillRect(b.x-2,b.y-12,4,16);ctx.fillStyle='#fff';ctx.fillRect(b.x-1,b.y-10,2,10)}enemies.forEach(e=>ship(e.img,e.x,e.y,66,Math.PI));if(player)ship(playerImg,player.x,player.y,76);bursts.forEach(b=>{if(!impact.complete)return;const frame=Math.min(3,Math.floor(b.t/.16)), fw=impact.naturalWidth/4, fh=impact.naturalHeight;ctx.save();ctx.globalCompositeOperation='screen';ctx.drawImage(impact,frame*fw,0,fw,fh,b.x-47,b.y-47,94,94);ctx.restore()})}
|
||||
function frame(t){const dt=Math.min(.033,(t-last)/1000||0);last=t;update(dt);draw();requestAnimationFrame(frame)}requestAnimationFrame(frame);
|
||||
window.addEventListener('keydown',e=>{keys[e.key]=true;if(e.code==='Space'){e.preventDefault();fire()}if(e.key.toLowerCase()==='p'&&running){paused=!paused}});window.addEventListener('keyup',e=>keys[e.key]=false);canvas.addEventListener('pointerdown',fire);start.addEventListener('click',()=>{reset();running=true;paused=false;overlay.classList.add('hidden')});
|
||||
</script></body></html>
|
||||
Reference in New Issue
Block a user