How to Make a Pokémon-Style Game: Build an Original Creature Collector

• index.html
• game.css
• main.mjs
• input.mjs
• worlds.mjs
• render.mjs
• files.mjs
• serve.mjs
• check.mjs
• README.md
• LICENSE.txt

/* Original BINX Forge Genre Lab1.0 · MIT. Shared timing pattern: Pocket Engine1.0. */
export const W=640,H=360;
const clamp=(n,a,b)=>Math.max(a,Math.min(b,n));
const distance=(a,b)=>Math.hypot(a.x-b.x,a.y-b.y);
export const modes=['kart','creatures','blocks','farm','survivors'];
export const lessons={
 kart:{name:'Circuit Spark',guide:'make-a-racing-game',instructions:'Finish two clockwise laps in 90 seconds. Up accelerates, down brakes, left/right steer. Toggle Drift while turning; release it for a boost. The cyan pickup supplies turbo.',buttons:['Toggle drift','Reset to last gate','']},
 creatures:{name:'Meadow Bonds',guide:'make-a-pokemon-style-game',instructions:'Walk through the marked meadow to meet creatures. Choose Attack, Capture or Flee in battle. Make a party of three and return to the home tile. Home heals and refills five capture tokens.',buttons:['Attack','Capture','Flee']},
 blocks:{name:'Block Patch',guide:'make-a-minecraft-style-game',instructions:'Move around a 2D block plot. Build or remove the tile directly above you. Collect three blocks, then place three to finish. Placement into your own tile is forbidden. This teaches rules, not a 3D voxel engine.',buttons:['Remove block','Place block','']},
 farm:{name:'Sprout Shift',guide:'make-a-stardew-valley-style-game',instructions:'Walk next to one of the four plots. Tend plants or waters a crop; a ripe crop can be harvested. End day advances only watered crops. Sell four harvests to finish.',buttons:['Tend / harvest','End day','']},
 survivors:{name:'Pulse Meadow',guide:'make-a-vampire-survivors-style-game',instructions:'Move and survive for 60 seconds. Your pulse attacks nearby enemies automatically. Collect blue gems. At a level-up choose stronger damage or longer range; the game waits for your choice.',buttons:['Upgrade damage','Upgrade range','']}
};
export const species=Object.freeze([
 {id:'mosskip',name:'Mosskip',type:'Sprout',maxHp:30,attack:7,colour:'#9ce6a8'},
 {id:'cinderfin',name:'Cinderfin',type:'Flare',maxHp:28,attack:6,colour:'#ffae80'},
 {id:'rillbat',name:'Rillbat',type:'Tide',maxHp:32,attack:6,colour:'#82d7ff'}
].map(Object.freeze));
const creature=i=>({...species[i],hp:species[i].maxHp});
export const typeMultiplier=(a,b)=>a===b?1:({Sprout:'Tide',Tide:'Flare',Flare:'Sprout'}[a]===b?1.5:0.75);
export const captureChance=c=>clamp(0.2+0.6*(1-c.hp/c.maxHp),0.2,0.8);
export function newState(mode){
 if(!modes.includes(mode))throw Error('Choose a supported lesson.');
 const base={mode,status:'ready',age:0,message:'Ready. Start a new run.',player:{x:80,y:180},score:0};
 if(mode==='kart')return {...base,player:{x:560,y:180},angle:Math.PI/2,speed:0,remaining:90,nextGate:1,laps:0,drift:false,charge:0,boost:0,pickupCooldown:0,lastGate:0};
 if(mode==='creatures')return {...base,player:{x:60,y:180},moveClock:0,party:[creature(0)],wild:null,tokens:5,grassSteps:0,encounters:0};
 if(mode==='blocks')return {...base,player:{x:300,y:260},moveClock:0,blocks:[{x:7,y:5},{x:8,y:5},{x:6,y:5},{x:9,y:5},{x:10,y:5}],inventory:0,mined:0,placed:0};
 if(mode==='farm')return {...base,player:{x:300,y:260},moveClock:0,day:1,harvests:0,coins:0,plots:[6,7,8,9].map(x=>({x,y:5,growth:-1,watered:false}))};
 return {...base,remaining:60,hp:6,invulnerable:0,pulse:0,spawn:0,enemies:[],gems:[],xp:0,level:1,damage:2,range:100,upgrades:0};
}
export const gates=[{x:560,y:180},{x:320,y:300},{x:80,y:180},{x:320,y:60}];
export function acceptGate(s,index,forward){
 if(s.status!=='running'||s.mode!=='kart'||!forward||index!==s.nextGate)return false;
 s.lastGate=index;s.nextGate=(index+1)%4;
 if(index===0){s.laps++;s.score=s.laps;if(s.laps===2){s.status='won';s.message='Two laps complete! Start a new run.';}}
 return true;
}
function kartStep(s,input,dt){
 s.remaining=Math.max(0,s.remaining-dt);s.boost=Math.max(0,s.boost-dt);s.pickupCooldown=Math.max(0,s.pickupCooldown-dt);
 s.speed=clamp(s.speed+((input.up?105:0)-(input.down?200:0)-(!input.up&&!input.down?45:0))*dt,0,s.boost>0?240:170);
 const steering=Number(!!input.right)-Number(!!input.left);
 s.angle+=steering*1.8*(s.speed/170)*(s.drift?1.3:1)*dt;
 if(s.drift&&steering&&s.speed>60)s.charge=Math.min(1.5,s.charge+dt);
 const before={...s.player};s.player.x+=Math.cos(s.angle)*s.speed*dt;s.player.y+=Math.sin(s.angle)*s.speed*dt;
 const radius=Math.hypot((s.player.x-320)/240,(s.player.y-180)/120);
 if(radius<0.70||radius>1.30){s.player=before;s.speed*=0.4;s.charge=0;s.message='Track edge: steer back onto the road.';}
 const gate=gates[s.nextGate],tangents=[{x:0,y:1},{x:-1,y:0},{x:0,y:-1},{x:1,y:0}],t=tangents[s.nextGate];
 const prevSide=(before.x-gate.x)*t.x+(before.y-gate.y)*t.y,side=(s.player.x-gate.x)*t.x+(s.player.y-gate.y)*t.y;
 if(prevSide<0&&side>=0&&distance(s.player,gate)<65)acceptGate(s,s.nextGate,true);
 if(s.pickupCooldown===0&&distance(s.player,{x:320,y:60})<22){s.boost=1;s.pickupCooldown=8;s.message='Turbo pickup: one second of boost.';}
 if(s.remaining===0&&s.status==='running'){s.status='lost';s.message='Time is up. Start a new run.';}
}
function gridMove(s,input,dt){
 s.moveClock=Math.max(0,s.moveClock-dt);if(s.moveClock>0)return false;
 const dx=Number(!!input.right)-Number(!!input.left),dy=Number(!!input.down)-Number(!!input.up);if(!dx&&!dy)return false;
 const p={x:clamp(s.player.x+(dx?Math.sign(dx)*40:0),20,620),y:clamp(s.player.y+(!dx?Math.sign(dy)*40:0),20,340)};
 s.moveClock=0.16;
 if(s.mode==='blocks'&&s.blocks.some(b=>b.x===Math.floor(p.x/40)&&b.y===Math.floor(p.y/40)))return false;
 if(p.x===s.player.x&&p.y===s.player.y)return false;s.player=p;return true;
}
function creatureStep(s,input,dt){
 if(!gridMove(s,input,dt))return;
 if(s.player.x===60&&s.player.y===180){s.party.forEach(c=>c.hp=c.maxHp);s.tokens=5;s.message='Home: party healed and capture tokens refilled.';if(s.party.length===3){s.status='won';s.message='Three companions home safely! Start a new run.';}return;}
 if(s.player.x>=180&&s.player.x<=500&&s.player.y>=100&&s.player.y<=260){
  s.grassSteps++;if(s.grassSteps%3===0){s.wild=creature((++s.encounters)%3);s.status='battle';s.message='Wild '+s.wild.name+'! Attack, Capture or Flee.';}
 }
}
function reply(s){
 const active=s.party.find(c=>c.hp>0);if(!active){s.status='lost';s.message='Party exhausted. Start a new run.';return;}
 const damage=Math.max(1,Math.round(s.wild.attack*typeMultiplier(s.wild.type,active.type)));active.hp=Math.max(0,active.hp-damage);
 s.message+=' Opponent deals '+damage+'.';
 if(!s.party.some(c=>c.hp>0)){s.status='lost';s.message+=' Party exhausted: start a new run.';}
 else if(active.hp===0)s.message+=' Your next healthy companion takes over.';
}
function survivorStep(s,input,dt){
 const dx=Number(!!input.right)-Number(!!input.left),dy=Number(!!input.down)-Number(!!input.up),len=Math.hypot(dx,dy)||1;
 s.player.x=clamp(s.player.x+dx/len*140*dt,12,W-12);s.player.y=clamp(s.player.y+dy/len*140*dt,12,H-12);
 s.remaining=Math.max(0,s.remaining-dt);s.invulnerable=Math.max(0,s.invulnerable-dt);s.pulse-=dt;s.spawn-=dt;
 if(s.spawn<=0){s.spawn+=1.1;if(s.enemies.length<12){const i=Math.floor(s.age/1.1),e={x:i%2?W-15:15,y:20+(i*73)%320,hp:2+Math.floor(s.age/20)};if(distance(e,s.player)<100)e.x=W-e.x;s.enemies.push(e);}}
 for(const e of s.enemies){const d=distance(e,s.player)||1;e.x+=(s.player.x-e.x)/d*42*dt;e.y+=(s.player.y-e.y)/d*42*dt;}
 if(s.pulse<=0){s.pulse+=0.6;for(const e of s.enemies)if(distance(e,s.player)<=s.range)e.hp-=s.damage;}
 for(const e of s.enemies.filter(e=>e.hp<=0)){if(s.gems.length<24)s.gems.push({x:e.x,y:e.y});s.score++;}s.enemies=s.enemies.filter(e=>e.hp>0);
 if(s.invulnerable===0&&s.enemies.some(e=>distance(e,s.player)<22)){s.hp--;s.invulnerable=0.8;}
 const collected=s.gems.filter(g=>distance(g,s.player)<24).length;s.gems=s.gems.filter(g=>distance(g,s.player)>=24);s.xp+=collected;
 if(s.hp<=0){s.status='lost';s.message='Run ended. Start again and keep moving.';}
 else if(s.remaining===0){s.status='won';s.message='60 seconds survived! Start a new run.';}
 else if(s.xp>=s.level*3){s.status='upgrade';s.message='Level up: choose damage or range. Timer is paused.';}
}
export function step(s,input={},dt){
 if(s.status!=='running'||!Number.isFinite(dt)||dt<=0||dt>0.01+1e-9)return;
 s.age+=dt;
 if(s.mode==='kart')kartStep(s,input,dt);
 else if(s.mode==='creatures')creatureStep(s,input,dt);
 else if(['blocks','farm'].includes(s.mode))gridMove(s,input,dt);
 else survivorStep(s,input,dt);
}
export function advance(s,input,elapsed){
 if(!Number.isFinite(elapsed)||elapsed<=0)return;const time=Math.min(0.1,elapsed),count=Math.ceil(time/0.01);for(let i=0;i<count;i++)step(s,input,time/count);
}
export function action(s,index,random=Math.random){
 if(s.mode==='kart'&&s.status==='running'){
  if(index===0){s.drift=!s.drift;if(!s.drift){if(s.charge>=0.6){s.boost=0.8;s.message='Drift release: boost!';}s.charge=0;}}
  if(index===1){s.player={...gates[s.lastGate]};s.angle=[Math.PI/2,Math.PI,-Math.PI/2,0][s.lastGate];s.speed=0;s.charge=0;s.drift=false;s.message='Reset to last valid gate; progress preserved.';}return;
 }
 if(s.mode==='creatures'&&s.status==='battle'){
  const active=s.party.find(c=>c.hp>0);if(!active||!s.wild)return;
  if(index===2){s.wild=null;s.status='running';s.message='Fled safely. Walk back home to heal.';return;}
  if(index===1){
   if(s.party.length>=3){s.message='Party is full. Flee and return home.';return;}if(s.tokens===0){s.message='No capture tokens. Flee and refill at home.';return;}
   s.tokens--;if(random()<captureChance(s.wild)){s.party.push({...s.wild});s.wild=null;s.status='running';s.message='Captured! Party '+s.party.length+'/3. Return home or explore.';return;}s.message='Capture failed.';
  }else if(index===0){const damage=Math.max(1,Math.round(active.attack*typeMultiplier(active.type,s.wild.type)));s.wild.hp=Math.max(0,s.wild.hp-damage);s.message=active.name+' deals '+damage+'.';if(s.wild.hp===0){s.wild=null;s.status='running';s.message+=' Encounter won; this creature cannot be captured now.';return;}}
  else return;
  reply(s);return;
 }
 if(s.status!=='running'&&!(s.mode==='survivors'&&s.status==='upgrade'))return;
 if(s.mode==='blocks'){
  const target={x:Math.floor(s.player.x/40),y:Math.floor(s.player.y/40)-1};if(target.y<0)return;
  const i=s.blocks.findIndex(b=>b.x===target.x&&b.y===target.y);
  if(index===0&&i>=0){s.blocks.splice(i,1);s.inventory++;s.mined++;s.message='One block collected.';}
  else if(index===1&&i<0&&s.inventory>0){s.blocks.push(target);s.inventory--;s.placed++;s.message='One block placed.';}
  else{s.message='Nothing changed: check the tile above and inventory.';return;}
  s.score=s.placed;if(s.mined>=3&&s.placed>=3){s.status='won';s.message='Three blocks collected and placed. Build complete!';}return;
 }
 if(s.mode==='farm'){
  if(index===1){s.day++;for(const p of s.plots){if(p.growth>=0&&p.watered)p.growth=Math.min(2,p.growth+1);p.watered=false;}s.message='Day '+s.day+'. Water crops before ending the day.';return;}
  if(index!==0)return;const x=Math.floor(s.player.x/40),y=Math.floor(s.player.y/40);
  const p=s.plots.find(p=>Math.abs(p.x-x)+Math.abs(p.y-y)===1);if(!p){s.message='Stand beside a plot.';return;}
  if(p.growth===2){s.harvests++;s.coins+=2;p.growth=-1;p.watered=false;s.message='Harvest sold for two coins.';}
  else if(p.growth<0){p.growth=0;s.message='Seed planted. Tend again to water.';}
  else {p.watered=true;s.message='Watered. It grows when you end the day.';}
  s.score=s.harvests;if(s.harvests===4){s.status='won';s.message='Four harvests sold. Farm complete!';}return;
 }
 if(s.mode==='survivors'&&s.status==='upgrade'&&[0,1].includes(index)){
  s.xp-=s.level*3;s.level++;s.upgrades++;if(index===0)s.damage=Math.min(6,s.damage+1);else s.range=Math.min(160,s.range+15);s.status='running';s.message='Upgrade chosen. Keep moving.';
 }
}