Código HTML5 Canvas para el juego Open World City

375 maciaedg000

Abrir en el editor Publica tu código

Código HTML5 Canvas para el juego Open World City

Recomendado

15 January 2026

Código fuente HTML5 del juego Iron Snout

21 September 2024

INICIO DEL SITIO WEB DEL BANCO

28 June 2025

Un código de Mete

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