Webleb - Extraits de Code - Code HTML5 Canvas pour un jeu de ville en monde ouvert

HTML CSS JS

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

Preview

Open Advanced Editor Full Screen