Código HTML5 Canvas para el juego Open World City

35 maciaedg000

Abrir en el editor Publica tu código

Código HTML5 Canvas para el juego Open World City

Recomendado

16 April 2026

Ejemplo de página de inicio HTML para War Thunder Mobile

22 March 2026

Game Stash: Script de proxy para trabajadores y obtención de datos

12 December 2025

Juego de ping pong con JavaScript y rondas especiales

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