Mini jeu Pokémon HTML/JS : Combat, Sauvegarde, Mobile

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 January 2026

Modèle HTML du panneau d'administration visiteur

25 November 2025

<!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>

Mini jeu Pokémon HTML/JS : Combat, Sauvegarde, Mobile

Recommandé

Modèle HTML du panneau d'administration visiteur

Magnat minier inactif

Jeu de pile JavaScript

HTML

CSS

JS

Recommandé

Modèle HTML du panneau d'administration visiteur

Magnat minier inactif

Jeu de pile JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS