Minijuego Pokémon HTML/JS: Batalla, guardado, móvil

26 IDK

Abrir en el editor Video Publica tu código

Minijuego Pokémon HTML/JS: Batalla, guardado, móvil

Recomendado

21 September 2024

Menú móvil

24 August 2025

Soluciones digitales: Web, Móvil, Marketing y Diseño

28 March 2025

Tarjetas móviles delineadas de CodePen Home

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mini Pokémon-like (HTML/JS)</title>
<style>
  :root{
    --tile-size: 48px;
    --ui-bg: #0f172a;
    --ui-fg: #e6eef8;
    --accent: #58a6ff;
  }
  html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#081029,#071226);color:var(--ui-fg)}
  #game{
    width: calc(var(--tile-size) * 12);
    box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
    border-radius:10px;
    overflow:hidden;
    background: linear-gradient(180deg,#0b1220,#07101a);
  }
  /* Canvas area */
  #screen{
    display:block;
    width:100%;
    background:#79c267; /* fallback ground color */
  }
  /* UI overlay */
  .ui {
    padding:10px;
    background: linear-gradient(180deg, rgba(2,6,23,0.85), rgba(2,6,23,0.95));
    color:var(--ui-fg);
    font-size:14px;
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
  }
  .ui .left {display:flex; gap:8px; align-items:center;}
  .stat {
    background: rgba(255,255,255,0.03);
    padding:6px 8px;
    border-radius:6px;
  }
  #controls { display:flex; gap:6px; align-items:center; }
  .btn {
    background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--ui-fg);
    padding:6px 8px; border-radius:6px; cursor:pointer;
  }
  .overlay {
    position: absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  /* Battle modal */
  #battle {
    position:absolute;
    width: calc(var(--tile-size) * 12);
    height: calc(var(--tile-size) * 8);
    pointer-events:auto;
    display:none;
  }
  .battle-box {
    box-sizing:border-box;
    width:92%;
    margin: 18px auto;
    background: linear-gradient(180deg,#0b1220,#06111b);
    border-radius:10px;
    padding:12px;
    color:var(--ui-fg);
    border: 1px solid rgba(255,255,255,0.04);
  }
  .battle-stage{
    display:flex; justify-content:space-between; gap:10px; align-items:center;
    margin-bottom:10px;
  }
  .mon {
    width:120px; height:72px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; color:#08101a;
    font-weight:700;
  }
  .player-mon { background: linear-gradient(90deg,#a6f3c5,#5be18c); align-items:flex-end; padding:6px; }
  .wild-mon { background: linear-gradient(90deg,#ffd9a8,#ffb86b); padding:6px; }
  .hpbar { height:10px; background:rgba(255,255,255,0.06); border-radius:6px; overflow:hidden; margin-top:6px; }
  .hpbar > i { display:block; height:100%; background:linear-gradient(90deg,#4ade80,#16a34a); width:100%; }
  .battle-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .big { padding:8px 12px; font-weight:700; }
  /* mobile controls area */
  #mobile-controls { display:none; gap:6px; padding:8px; justify-content:center; }
  .dpad { width:120px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:6px; }
  .dir { background: rgba(255,255,255,0.04); border-radius:6px; height:36px; display:flex; align-items:center; justify-content:center; user-select:none; }
  @media (max-width:720px){
    #game{ width: calc(var(--tile-size) * 10) }
    #mobile-controls { display:flex }
    .ui { font-size:13px }
  }
</style>
</head>
<body>
<div id="game">
  <canvas id="screen" width="576" height="384"></canvas>
  <div class="ui">
    <div class="left">
      <div class="stat">Map: <span id="mapname">Starter Field</span></div>
      <div class="stat">Position: <span id="pos">0,0</span></div>
    </div>
    <div id="controls">
      <button class="btn" id="btn-inventory">Inventory</button>
      <button class="btn" id="btn-save">Save</button>
      <button class="btn" id="btn-load">Load</button>
    </div>
  </div>

<div id="battle" class="overlay" style="pointer-events:auto">
    <div class="battle-box">
      <div class="battle-stage">
        <div>
          <div class="mon player-mon" id="playerMonName">You: Bulbo</div>
          <div class="hpbar"><i id="playerHpF" style="width:100%"></i></div>
          <div id="player-hp-text">HP: 30 / 30</div>
        </div>
        <div style="text-align:right">
          <div class="mon wild-mon" id="wildMonName">Grassmon</div>
          <div class="hpbar"><i id="wildHpF" style="width:100%"></i></div>
          <div id="wild-hp-text">HP: 20 / 20</div>
        </div>
      </div>
      <div id="battle-text" style="min-height:28px;margin-bottom:8px">A wild Grassmon appeared!</div>
      <div class="battle-actions">
        <button class="btn big" id="btn-attack">Attack</button>
        <button class="btn big" id="btn-run">Run</button>
        <button class="btn big" id="btn-catch">Catch</button>
      </div>
    </div>
  </div>

<div id="mobile-controls" style="background:transparent;">
    <div class="dpad" id="dpad">
      <div></div><div class="dir" data-dir="up">▲</div><div></div>
      <div class="dir" data-dir="left">◀</div><div class="dir" data-dir="down">▼</div><div class="dir" data-dir="right">▶</div>
      <div></div><div class="dir" data-action="interact">●</div><div></div>
    </div>
  </div>
</div>

/* CONFIG */
const TILE = 48;          // matches CSS --tile-size
const MAP_W = 12;
const MAP_H = 8;
const ENCOUNTER_CHANCE = 0.18; // chance on stepping into grass (0..1)
const CANVAS = document.getElementById('screen');
CANVAS.width = TILE * MAP_W;
CANVAS.height = TILE * MAP_H;
const ctx = CANVAS.getContext('2d');

/* SIMPLE TILESET:
  0 = ground (walkable)
  1 = grass (walkable, wild encounter)
  2 = wall/rock (blocked)
*/
const maps = {
  starter: {
    name: "Starter Field",
    tiles: [
      // 12 wide x 8 high (rows)
      [2,2,2,2,2,2,2,2,2,2,2,2],
      [2,0,0,0,1,1,1,0,0,0,0,2],
      [2,0,2,0,1,2,1,0,2,0,0,2],
      [2,0,2,0,1,1,1,0,2,0,0,2],
      [2,0,0,0,0,0,0,0,2,0,0,2],
      [2,0,0,0,0,0,0,0,0,0,0,2],
      [2,0,0,0,0,0,0,0,0,0,0,2],
      [2,2,2,2,2,2,2,2,2,2,2,2],
    ]
  }
};

/* PLAYER */
let gameState = {
  map: 'starter',
  player: { x: 2, y: 2, dir: 'down' },
  inBattle: false,
  party: [
    { name: "Bulbo", maxHp: 30, hp: 30, atk: 8 },
  ],
  encounterLog: [],
};

const ui = {
  mapname: document.getElementById('mapname'),
  pos: document.getElementById('pos'),
  battle: document.getElementById('battle'),
  playerMonName: document.getElementById('playerMonName'),
  wildMonName: document.getElementById('wildMonName'),
  playerHpF: document.getElementById('playerHpF'),
  wildHpF: document.getElementById('wildHpF'),
  playerHpText: document.getElementById('player-hp-text'),
  wildHpText: document.getElementById('wild-hp-text'),
  battleText: document.getElementById('battle-text')
};

function tileAt(map, x, y){
  if (y<0||y>=maps[map].tiles.length || x<0||x>=maps[map].tiles[0].length) return 2;
  return maps[map].tiles[y][x];
}

/* DRAW */
function draw() {
  ctx.clearRect(0,0,CANVAS.width,CANVAS.height);

// draw tiles
  const tiles = maps[gameState.map].tiles;
  for (let y=0;y<MAP_H;y++){
    for (let x=0;x<MAP_W;x++){
      const t = tiles[y][x];
      const px = x*TILE, py = y*TILE;
      if (t===2) { // wall
        ctx.fillStyle = '#6b6b6b';
        ctx.fillRect(px,py,TILE,TILE);
        ctx.fillStyle = '#586162';
        ctx.fillRect(px+4,py+4,TILE-8,TILE-8);
      } else if (t===1) { // grass
        // grass patch with slight variation
        ctx.fillStyle = '#7ec67a';
        ctx.fillRect(px,py,TILE,TILE);
        // grass blades
        for (let i=0;i<6;i++){
          const gx = px + (i*7)%TILE + 4;
          const gy = py + (i*13)%TILE + 6;
          ctx.fillStyle = (i%2==0)?'#6fb265':'#8ad786';
          ctx.fillRect(gx,gy,2,6);
        }
      } else { // ground
        ctx.fillStyle = '#a3d18b';
        ctx.fillRect(px,py,TILE,TILE);
      }
      // tile grid lines (subtle)
      ctx.strokeStyle = 'rgba(0,0,0,0.06)';
      ctx.strokeRect(px+0.5,py+0.5,TILE,TILE);
    }
  }

// draw player as simple circle/square
  const p = gameState.player;
  const px = p.x*TILE, py = p.y*TILE;
  ctx.fillStyle = '#1f2937';
  ctx.beginPath();
  ctx.fillRect(px+8,py+4,TILE-16,TILE-8);
  ctx.fillStyle = '#f8fafc';
  ctx.fillRect(px+12,py+10,TILE-24,TILE-12);
  // small head
  ctx.fillStyle = '#fde68a';
  ctx.fillRect(px+18,py+2,12,12);

// UI text
  ui.mapname.textContent = maps[gameState.map].name;
  ui.pos.textContent = `${p.x},${p.y}`;
}

/* INPUT & MOVEMENT */
let inputAllowed = true;
function tryMove(dx,dy){
  if (!inputAllowed || gameState.inBattle) return;
  const nx = gameState.player.x + dx;
  const ny = gameState.player.y + dy;
  const t = tileAt(gameState.map, nx, ny);
  if (t === 2) return; // blocked
  gameState.player.x = nx;
  gameState.player.y = ny;
  draw();
  // check encounter on grass
  if (t === 1 && Math.random() < ENCOUNTER_CHANCE){
    startEncounter();
  }
}

document.addEventListener('keydown', (e)=>{
  if (gameState.inBattle) return;
  if (e.key === 'ArrowUp' || e.key === 'w') tryMove(0,-1);
  if (e.key === 'ArrowDown' || e.key === 's') tryMove(0,1);
  if (e.key === 'ArrowLeft' || e.key === 'a') tryMove(-1,0);
  if (e.key === 'ArrowRight' || e.key === 'd') tryMove(1,0);
});

/* SAVE / LOAD */
document.getElementById('btn-save').addEventListener('click', ()=>{
  localStorage.setItem('mini-pkmn-save', JSON.stringify(gameState));
  alert('Game saved locally.');
});
document.getElementById('btn-load').addEventListener('click', ()=>{
  const s = localStorage.getItem('mini-pkmn-save');
  if (!s) return alert('No save found.');
  try {
    const parsed = JSON.parse(s);
    gameState = parsed;
    draw();
    alert('Save loaded.');
  } catch(err) { alert('Failed to load save.'); }
});

/* BATTLE SYSTEM */
let battle = {
  playerMon: null,
  wildMon: null,
  canAct: true
};

function rngWild(){
  // make a tiny wild mon based on map position for variety
  const baseHP = 12 + Math.floor(Math.random()*10);
  return {
    name: ["Grassmon","Pipit","Thornlet","Sparr"][Math.floor(Math.random()*4)],
    maxHp: baseHP,
    hp: baseHP,
    atk: 4 + Math.floor(Math.random()*5),
    lvl: 2 + Math.floor(Math.random()*4)
  };
}

/* Battle actions */
document.getElementById('btn-attack').addEventListener('click', ()=>{
  if (!gameState.inBattle || !battle.canAct) return;
  battle.canAct = false;
  // player attacks
  const dmg = Math.max(1, battle.playerMon.atk + Math.floor(Math.random()*4) - 2);
  battle.wildMon.hp -= dmg;
  ui.battleText.textContent = `${battle.playerMon.name} hits for ${dmg} damage!`;
  updateHpDisplays();

setTimeout(()=>{
    if (battle.wildMon.hp <= 0){
      ui.battleText.textContent = `Wild ${battle.wildMon.name} fainted! You won.`;
      setTimeout(()=>endBattle('win'),1000);
      return;
    }
    // wild attacks
    const wdmg = Math.max(1, battle.wildMon.atk + Math.floor(Math.random()*3)-1);
    battle.playerMon.hp -= wdmg;
    ui.battleText.textContent = `${battle.wildMon.name} hits back for ${wdmg} damage!`;
    updateHpDisplays();
    setTimeout(()=>{
      if (battle.playerMon.hp <= 0){
        ui.battleText.textContent = `${battle.playerMon.name} fainted...`;
        setTimeout(()=>endBattle('loss'),1000);
      }
      battle.canAct = true;
    },800);
  },700);
});

/* Inventory button stub */
document.getElementById('btn-inventory').addEventListener('click', ()=>{
  alert('Inventory is empty in this demo. Add items and use them here!');
});

/* INITIALIZE */
draw();
ui.battle.style.display = 'none';

/* Helpful: simple autosave every 30s (non-blocking) */
setInterval(()=> {
  try { localStorage.setItem('mini-pkmn-autosave', JSON.stringify(gameState)); } catch(e){}
}, 30000);

</script>
</body>
</html>

Recomendado

Menú móvil

Soluciones digitales: Web, Móvil, Marketing y Diseño

Tarjetas móviles delineadas de CodePen Home

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS