Code HTML5 Canvas pour un jeu de ville en monde ouvert

376 maciaedg000

Ouvrir dans l'éditeur Publiez votre code

Code HTML5 Canvas pour un jeu de ville en monde ouvert

Recommandé

1 May 2026

tung tung

4 October 2025

Exemple d'animation de calque CSS

28 November 2025

Effet de survol du bouton en verre liquide CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Open World City Game</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      overflow: hidden;
      background: #111;
      font-family: Arial, sans-serif;
      color: white;
    }
    canvas {
      display: block;
      background: #1b1b1b;
    }
    .ui {
      position: fixed;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.65);
      padding: 12px;
      border-radius: 10px;
      min-width: 250px;
      z-index: 10;
      line-height: 1.4;
    }
    .ui div { margin: 6px 0; }
  </style>
</head>
<body>
  <div class="ui">
    <div><strong>Move:</strong> WASD / Arrows</div>
    <div><strong>Enter/Exit Car:</strong> E</div>
    <div><strong>Shoot:</strong> Space</div>
    <div><strong>Money:</strong> $<span id="money">0</span></div>
    <div><strong>Health:</strong> <span id="health">100</span></div>
    <div><strong>Status:</strong> <span id="status">On Foot</span></div>
    <div><strong>Wanted:</strong> <span id="wanted">0</span></div>
    <div><strong>Mission:</strong> <span id="missionText">Go to the green mission zone</span></div>
    <div><strong>Time:</strong> <span id="clock">12:00</span></div>
  </div>
  <canvas id="game"></canvas>

function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resize();
    window.addEventListener('resize', resize);

const keys = {};
    window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
    window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);

const world = { width: 4000, height: 4000 };

function rand(min, max) {
      return Math.random() * (max - min) + min;
    }

function clamp(val, min, max) {
      return Math.max(min, Math.min(max, val));
    }

function distance(ax, ay, bx, by) {
      return Math.hypot(ax - bx, ay - by);
    }

const player = {
      x: 300,
      y: 300,
      size: 18,
      speed: 3,
      color: '#ffd166',
      inCar: false,
      carIndex: -1,
      money: 0,
      wanted: 0,
      health: 100,
      facing: 0
    };

const cars = [];
    const carColors = ['#00c2ff', '#ff595e', '#8ac926', '#ffca3a', '#6a4c93'];
    for (let i = 0; i < 8; i++) {
      cars.push({
        x: 500 + i * 180,
        y: 500 + (i % 3) * 220,
        w: 52,
        h: 28,
        speed: 0,
        maxSpeed: 7,
        accel: 0.18,
        friction: 0.05,
        angle: 0,
        health: 100,
        color: carColors[i % carColors.length],
        npcDriver: false
      });
    }

const police = [];
    for (let i = 0; i < 4; i++) {
      police.push({ x: 1200 + i * 120, y: 1200, size: 20, speed: 2.0, color: '#3a86ff', health: 100 });
    }

const pedestrians = [];
    for (let i = 0; i < 35; i++) {
      pedestrians.push({
        x: rand(150, world.width - 150),
        y: rand(150, world.height - 150),
        size: 14,
        dir: rand(0, Math.PI * 2),
        speed: rand(0.4, 1.0),
        alive: true,
        changeTimer: rand(30, 120)
      });
    }

const bullets = [];

const blocks = [];
    const roads = [];
    const blockSize = 500;
    const roadW = 90;

for (let gx = 0; gx < world.width; gx += blockSize) {
      for (let gy = 0; gy < world.height; gy += blockSize) {
        roads.push({ x: gx, y: gy, w: blockSize, h: roadW });
        roads.push({ x: gx, y: gy, w: roadW, h: blockSize });

if (gx + roadW < world.width && gy + roadW < world.height) {
          blocks.push({
            x: gx + roadW + 20,
            y: gy + roadW + 20,
            w: blockSize - roadW - 40,
            h: blockSize - roadW - 40,
            color: `hsl(${Math.floor(rand(15, 35))}, 20%, ${Math.floor(rand(30, 45))}%)`
          });
        }
      }
    }

const garages = [
      { x: 850, y: 850, w: 100, h: 100 },
      { x: 2850, y: 900, w: 100, h: 100 },
      { x: 3200, y: 2800, w: 100, h: 100 }
    ];

const missions = [
      { x: 1400, y: 1400, r: 90, reward: 300, text: 'Drive to the mission zone', done: false },
      { x: 2500, y: 800, r: 90, reward: 500, text: 'Reach the north district garage', done: false },
      { x: 3400, y: 3000, r: 90, reward: 800, text: 'Deliver a damaged car to the east garage', done: false }
    ];

let currentMission = 0;
    let ePressedLast = false;
    let shootPressedLast = false;
    let timeOfDay = 12;

function getCurrentCar() {
      return player.carIndex >= 0 ? cars[player.carIndex] : null;
    }

function updatePlayer() {
      const up = keys['w'] || keys['arrowup'];
      const down = keys['s'] || keys['arrowdown'];
      const left = keys['a'] || keys['arrowleft'];
      const right = keys['d'] || keys['arrowright'];
      const ePressed = keys['e'];
      const shootPressed = keys[' '];

if (!player.inCar) {
        let dx = 0, dy = 0;
        if (up) dy -= 1;
        if (down) dy += 1;
        if (left) dx -= 1;
        if (right) dx += 1;

if (dx || dy) {
          const len = Math.hypot(dx, dy) || 1;
          dx /= len;
          dy /= len;
          player.x += dx * player.speed;
          player.y += dy * player.speed;
          player.facing = Math.atan2(dy, dx);
        }

if (ePressed && !ePressedLast) {
          for (let i = 0; i < cars.length; i++) {
            const car = cars[i];
            if (distance(player.x, player.y, car.x, car.y) < 60) {
              player.inCar = true;
              player.carIndex = i;
              break;
            }
          }
        }
      } else {
        const car = getCurrentCar();
        if (car) {
          if (up) car.speed += car.accel;
          if (down) car.speed -= car.accel * 0.7;
          if (left) car.angle -= 0.05 * (car.speed >= 0 ? 1 : -1);
          if (right) car.angle += 0.05 * (car.speed >= 0 ? 1 : -1);

car.speed = clamp(car.speed, -3, car.maxSpeed);

if (!up && !down) {
            if (car.speed > 0) car.speed -= car.friction;
            if (car.speed < 0) car.speed += car.friction;
            if (Math.abs(car.speed) < 0.05) car.speed = 0;
          }

car.x += Math.cos(car.angle) * car.speed;
          car.y += Math.sin(car.angle) * car.speed;
          player.x = car.x;
          player.y = car.y;
          player.facing = car.angle;

if (Math.abs(car.speed) > 5) player.wanted = 1;

if (ePressed && !ePressedLast) {
            player.inCar = false;
            player.x += 35;
            player.y += 35;
            player.carIndex = -1;
          }
        }
      }

if (shootPressed && !shootPressedLast && !player.inCar) {
        bullets.push({
          x: player.x,
          y: player.y,
          vx: Math.cos(player.facing) * 10,
          vy: Math.sin(player.facing) * 10,
          life: 60
        });
      }

ePressedLast = ePressed;
      shootPressedLast = shootPressed;

player.x = clamp(player.x, 0, world.width);
      player.y = clamp(player.y, 0, world.height);
    }

function updatePedestrians() {
      for (const p of pedestrians) {
        if (!p.alive) continue;
        p.changeTimer--;
        if (p.changeTimer <= 0) {
          p.dir = rand(0, Math.PI * 2);
          p.changeTimer = rand(40, 140);
        }
        p.x += Math.cos(p.dir) * p.speed;
        p.y += Math.sin(p.dir) * p.speed;

if (p.x < 50 || p.x > world.width - 50) p.dir = Math.PI - p.dir;
        if (p.y < 50 || p.y > world.height - 50) p.dir = -p.dir;
      }
    }

function updateBullets() {
      for (let i = bullets.length - 1; i >= 0; i--) {
        const b = bullets[i];
        b.x += b.vx;
        b.y += b.vy;
        b.life--;

for (const p of pedestrians) {
          if (p.alive && distance(b.x, b.y, p.x, p.y) < p.size) {
            p.alive = false;
            player.wanted = 2;
            player.money += 20;
            b.life = 0;
          }
        }

for (const cop of police) {
          if (cop.health > 0 && distance(b.x, b.y, cop.x, cop.y) < cop.size) {
            cop.health -= 50;
            player.wanted = 3;
            b.life = 0;
          }
        }

if (b.life <= 0) bullets.splice(i, 1);
      }
    }

function damageCar(car, amount) {
      car.health = clamp(car.health - amount, 0, 100);
      if (car.health <= 0) {
        car.speed = 0;
      }
    }

function updateCars() {
      for (let i = 0; i < cars.length; i++) {
        const car = cars[i];
        if (player.carIndex === i) continue;

if (Math.random() < 0.01) car.angle += rand(-0.2, 0.2);
        car.speed = clamp(car.speed + rand(-0.05, 0.05), 0, 2.2);
        car.x += Math.cos(car.angle) * car.speed;
        car.y += Math.sin(car.angle) * car.speed;

if (car.x < 60 || car.x > world.width - 60) car.angle = Math.PI - car.angle;
        if (car.y < 60 || car.y > world.height - 60) car.angle = -car.angle;
      }

for (let i = 0; i < cars.length; i++) {
        for (let j = i + 1; j < cars.length; j++) {
          const a = cars[i], b = cars[j];
          if (distance(a.x, a.y, b.x, b.y) < 35) {
            damageCar(a, 1.2);
            damageCar(b, 1.2);
            a.speed *= 0.8;
            b.speed *= 0.8;
          }
        }
      }

for (const car of cars) {
        for (const block of blocks) {
          if (car.x > block.x && car.x < block.x + block.w && car.y > block.y && car.y < block.y + block.h) {
            damageCar(car, 0.5);
            car.speed *= 0.85;
          }
        }
      }
    }

function updatePolice() {
      if (player.wanted <= 0) return;

for (const cop of police) {
        if (cop.health <= 0) continue;
        const ang = Math.atan2(player.y - cop.y, player.x - cop.x);
        cop.x += Math.cos(ang) * cop.speed * (1 + player.wanted * 0.15);
        cop.y += Math.sin(ang) * cop.speed * (1 + player.wanted * 0.15);

if (distance(cop.x, cop.y, player.x, player.y) < 25) {
          player.health -= 0.2 + player.wanted * 0.05;
        }
      }
    }

function updateGaragesAndMissions() {
      const current = missions[currentMission];
      if (current && !current.done && distance(player.x, player.y, current.x, current.y) < current.r) {
        if (currentMission !== 2 || (getCurrentCar() && getCurrentCar().health < 100)) {
          current.done = true;
          player.money += current.reward;
          currentMission++;
        }
      }

for (const g of garages) {
        if (player.x > g.x && player.x < g.x + g.w && player.y > g.y && player.y < g.y + g.h) {
          const car = getCurrentCar();
          if (car) car.health = Math.min(100, car.health + 0.4);
        }
      }
    }

function resetIfDead() {
      if (player.health > 0) return;
      player.health = 100;
      player.x = 300;
      player.y = 300;
      player.inCar = false;
      player.carIndex = -1;
      player.wanted = 0;
      player.money = Math.max(0, player.money - 200);
    }

function updateUI() {
      const mission = missions[currentMission];
      const car = getCurrentCar();
      document.getElementById('money').textContent = player.money;
      document.getElementById('health').textContent = Math.max(0, Math.floor(player.health));
      document.getElementById('status').textContent = player.inCar ? `Driving (Car HP ${Math.floor(car ? car.health : 0)})` : 'On Foot';
      document.getElementById('wanted').textContent = player.wanted;
      document.getElementById('missionText').textContent = mission ? mission.text : 'All missions completed';
    }

function drawRoads(cameraX, cameraY) {
      for (const r of roads) {
        ctx.fillStyle = '#2f2f2f';
        ctx.fillRect(r.x - cameraX, r.y - cameraY, r.w, r.h);
      }

ctx.strokeStyle = '#f7f3a1';
      ctx.lineWidth = 2;
      for (let x = 0; x < world.width; x += blockSize) {
        ctx.beginPath();
        ctx.moveTo(x + roadW / 2 - cameraX, -cameraY);
        ctx.lineTo(x + roadW / 2 - cameraX, world.height - cameraY);
        ctx.stroke();
      }
      for (let y = 0; y < world.height; y += blockSize) {
        ctx.beginPath();
        ctx.moveTo(-cameraX, y + roadW / 2 - cameraY);
        ctx.lineTo(world.width - cameraX, y + roadW / 2 - cameraY);
        ctx.stroke();
      }
    }

function drawBlocks(cameraX, cameraY) {
      for (const b of blocks) {
        ctx.fillStyle = b.color;
        ctx.fillRect(b.x - cameraX, b.y - cameraY, b.w, b.h);

ctx.fillStyle = 'rgba(255,255,255,0.08)';
        for (let i = 0; i < 5; i++) {
          ctx.fillRect(b.x + 15 + i * 30 - cameraX, b.y + 15 - cameraY, 12, 12);
        }
      }
    }

function drawGarages(cameraX, cameraY) {
      for (const g of garages) {
        ctx.fillStyle = 'rgba(0,200,255,0.25)';
        ctx.fillRect(g.x - cameraX, g.y - cameraY, g.w, g.h);
        ctx.strokeStyle = '#00d4ff';
        ctx.strokeRect(g.x - cameraX, g.y - cameraY, g.w, g.h);
      }
    }

function drawMissions(cameraX, cameraY) {
      const current = missions[currentMission];
      if (!current) return;
      ctx.beginPath();
      ctx.arc(current.x - cameraX, current.y - cameraY, current.r, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0,255,100,0.22)';
      ctx.fill();
      ctx.strokeStyle = '#00ff88';
      ctx.stroke();
    }

function drawCars(cameraX, cameraY) {
      for (const car of cars) {
        ctx.save();
        ctx.translate(car.x - cameraX, car.y - cameraY);
        ctx.rotate(car.angle);
        ctx.fillStyle = car.health > 30 ? car.color : '#777';
        ctx.fillRect(-car.w / 2, -car.h / 2, car.w, car.h);

if (car.health < 70) {
          ctx.strokeStyle = '#222';
          ctx.beginPath();
          ctx.moveTo(-10, -8);
          ctx.lineTo(8, 6);
          ctx.stroke();
        }
        if (car.health < 35) {
          ctx.strokeStyle = '#111';
          ctx.beginPath();
          ctx.moveTo(-4, 8);
          ctx.lineTo(15, -6);
          ctx.stroke();
        }
        ctx.restore();
      }
    }

function drawPedestrians(cameraX, cameraY) {
      for (const p of pedestrians) {
        if (!p.alive) continue;
        ctx.beginPath();
        ctx.arc(p.x - cameraX, p.y - cameraY, p.size / 2, 0, Math.PI * 2);
        ctx.fillStyle = '#f4a261';
        ctx.fill();
      }
    }

function drawPolice(cameraX, cameraY) {
      for (const cop of police) {
        if (cop.health <= 0) continue;
        ctx.beginPath();
        ctx.arc(cop.x - cameraX, cop.y - cameraY, cop.size / 2, 0, Math.PI * 2);
        ctx.fillStyle = cop.color;
        ctx.fill();
      }
    }

function drawBullets(cameraX, cameraY) {
      for (const b of bullets) {
        ctx.beginPath();
        ctx.arc(b.x - cameraX, b.y - cameraY, 3, 0, Math.PI * 2);
        ctx.fillStyle = '#fff';
        ctx.fill();
      }
    }

function drawPlayer(cameraX, cameraY) {
      if (player.inCar) return;
      ctx.beginPath();
      ctx.arc(player.x - cameraX, player.y - cameraY, player.size / 2, 0, Math.PI * 2);
      ctx.fillStyle = player.color;
      ctx.fill();

ctx.strokeStyle = '#fff';
      ctx.beginPath();
      ctx.moveTo(player.x - cameraX, player.y - cameraY);
      ctx.lineTo(player.x + Math.cos(player.facing) * 20 - cameraX, player.y + Math.sin(player.facing) * 20 - cameraY);
      ctx.stroke();
    }

function drawMinimap() {
      const mapW = 180;
      const mapH = 180;
      const x = canvas.width - mapW - 12;
      const y = 12;

ctx.fillStyle = 'rgba(0,0,0,0.6)';
      ctx.fillRect(x, y, mapW, mapH);
      ctx.strokeStyle = '#fff';
      ctx.strokeRect(x, y, mapW, mapH);

const sx = mapW / world.width;
      const sy = mapH / world.height;

for (const g of garages) {
        ctx.fillStyle = '#00d4ff';
        ctx.fillRect(x + g.x * sx, y + g.y * sy, 5, 5);
      }

const mission = missions[currentMission];
      if (mission) {
        ctx.fillStyle = '#00ff88';
        ctx.fillRect(x + mission.x * sx - 2, y + mission.y * sy - 2, 6, 6);
      }

for (const cop of police) {
        if (cop.health <= 0) continue;
        ctx.fillStyle = '#3a86ff';
        ctx.fillRect(x + cop.x * sx, y + cop.y * sy, 4, 4);
      }

ctx.fillStyle = '#ffd166';
      ctx.fillRect(x + player.x * sx - 2, y + player.y * sy - 2, 6, 6);
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const cameraX = player.x - canvas.width / 2;
      const cameraY = player.y - canvas.height / 2;

drawRoads(cameraX, cameraY);
      drawBlocks(cameraX, cameraY);
      drawGarages(cameraX, cameraY);
      drawMissions(cameraX, cameraY);
      drawCars(cameraX, cameraY);
      drawPedestrians(cameraX, cameraY);
      drawPolice(cameraX, cameraY);
      drawBullets(cameraX, cameraY);
      drawPlayer(cameraX, cameraY);
      drawDayNightOverlay();
      drawMinimap();
    }

function loop() {
      updatePlayer();
      updatePedestrians();
      updateBullets();
      updateCars();
      updatePolice();
      updateGaragesAndMissions();
      updateTime();
      resetIfDead();
      updateUI();
      draw();
      requestAnimationFrame(loop);
    }

loop();
  </script>
</body>
</html>

CSS