Code HTML5 Canvas pour un jeu de ville en monde ouvert

468 0 Jeux maciaedg000 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Code HTML5 Canvas pour un jeu de ville en monde ouvert

Recommandé

30 March 2025

Un code par ytr3d3

31 October 2026

Clone Netflix – site de films en HTML CSS JavaScript

25 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

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

Comments 0

…