Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>BR 2019 Cel</title>
<style>
body { margin:0; background:#222; overflow:hidden; font-family:Arial; color:white; touch-action:none; }
canvas { background:#4a7c59; display:block; width:100vw; height:100vh; }
#hud { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.6); padding:8px; border-radius:5px; font-size:14px; }
#weapon { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); padding:8px; border-radius:5px; font-size:14px; }
.btn { position:absolute; width:60px; height:60px; background:rgba(255,255,255,0.2); border:2px solid white; border-radius:50%; color:white; font-size:20px; }
#btnUp { bottom:120px; left:50px; }
#btnDown { bottom:40px; left:50px; }
#btnLeft { bottom:80px; left:10px; }
#btnRight { bottom:80px; left:90px; }
#btnShoot { bottom:80px; right:20px; width:80px; height:80px; background:rgba(255,0,0,0.4); }
#btnLoot { bottom:40px; right:120px; background:rgba(255,255,0,0.4); }
</style>
</head>
<body>
<canvas id="game"></canvas>
<div id="hud">Vida: 100 | Bots: 15</div>
<div id="weapon">Arma: Puños</div>
<button class="btn" id="btnUp">▲</button>
<button class="btn" id="btnDown">▼</button>
<button class="btn" id="btnLeft">◀</button>
<button class="btn" id="btnRight">▶</button>
<button class="btn" id="btnShoot">DISP</button>
<button class="btn" id="btnLoot">E</button>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let player = {x:canvas.width/2, y:canvas.height/2, hp:100, weapon:"Puños", damage:10};
let bots = [];
let weapons = [
{name:"M1887 Doble", damage:90, x:100, y:100},
{name:"AWM Ártica", damage:100, x:300, y:300},
{name:"Groza", damage:45, x:200, y:400},
{name:"Katana", damage:60, x:400, y:100}
];
let keys = {up:false, down:false, left:false, right:false};
// Crear bots
for(let i=0; i<15; i++){
bots.push({x:Math.random()*canvas.width, y:Math.random()*canvas.height, hp:100});
}
// Botones táctiles
function setBtn(id, key) {
document.getElementById(id).addEventListener('touchstart', ()=>keys[key]=true);
document.getElementById(id).addEventListener('touchend', ()=>keys[key]=false);
}
setBtn('btnUp','up'); setBtn('btnDown','down');
setBtn('btnLeft','left'); setBtn('btnRight','right');
document.getElementById('btnShoot').addEventListener('touchstart', shoot);
document.getElementById('btnLoot').addEventListener('touchstart', loot);
function loot(){
weapons.forEach((w,i) => {
if(Math.abs(player.x-w.x) < 30 && Math.abs(player.y-w.y) < 30){
player.weapon = w.name;
player.damage = w.damage;
document.getElementById('weapon').innerText = "Arma: " + w.name;
weapons.splice(i,1);
}
});
}
function shoot(){
bots = bots.filter(bot => {
let dist = Math.sqrt((player.x-bot.x)**2 + (player.y-bot.y)**2);
if(dist < 120) { bot.hp -= player.damage; }
return bot.hp > 0;
});
}
function gameLoop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
// Mover jugador
if(keys.up) player.y -= 4;
if(keys.down) player.y += 4;
if(keys.left) player.x -= 4;
if(keys.right) player.x += 4;
// Dibujar jugador
ctx.fillStyle = "orange";
ctx.fillRect(player.x-12, player.y-12, 24, 24);
// Dibujar armas
ctx.fillStyle = "yellow";
weapons.forEach(w => ctx.fillRect(w.x-6, w.y-6, 12, 12));
// Dibujar bots
ctx.fillStyle = "red";
bots.forEach(bot => {
ctx.fillRect(bot.x-10, bot.y-10, 20, 20);
if(bot.x < player.x) bot.x += 1.5;
if(bot.x > player.x) bot.x -= 1.5;
if(bot.y < player.y) bot.y += 1.5;
if(bot.y > player.y) bot.y -= 1.5;
});
document.getElementById('hud').innerText = `Vida: ${player.hp} | Bots: ${bots.length}`;
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>1
1
4KB
4KB
119.0ms
128.0ms
119.0ms