EL BANCO: Lavado Fácil (pero irónico)
by CosmicTurtle66502 lines17.5 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>EL BANCO: Lavado Fácil (pero irónico)</title>
<style>
* {
user-select: none;
touch-action: manipulation;
box-sizing: border-box;
}
body {
background: #0a1a0a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 10px;
font-family: 'Courier New', monospace;
}
.game-container {
background: #1e2a1e;
border-radius: 30px;
padding: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
width: 100%;
max-width: 550px;
}
.canvas-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 20px;
box-shadow: 0 0 0 4px #ffd700, 0 0 0 8px #0a2a0a;
background: #2d4a2d;
cursor: pointer;
}
.info-panel {
display: flex;
justify-content: space-between;
align-items: center;
background: #0a1a0a;
color: #ffd700;
padding: 8px 12px;
border-radius: 60px;
margin-top: 12px;
gap: 8px;
flex-wrap: wrap;
border: 2px solid #ffd700;
}
.score-box {
background: #000000cc;
padding: 6px 14px;
border-radius: 40px;
font-size: 1.3rem;
font-weight: bold;
}
.premio-box {
background: #2a1e0e;
padding: 5px 12px;
border-radius: 40px;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 6px;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 12px;
}
button {
background: #ffd700;
border: none;
font-size: 2rem;
font-weight: bold;
padding: 10px 20px;
border-radius: 60px;
color: #0a1a0a;
box-shadow: 0 5px 0 #8b6912;
transition: 0.05s linear;
cursor: pointer;
font-family: monospace;
flex: 1;
max-width: 100px;
}
button:active {
transform: translateY(3px);
box-shadow: 0 2px 0 #8b6912;
}
.status {
background: #000000cc;
border-radius: 28px;
padding: 6px 12px;
font-size: 0.8rem;
text-align: center;
flex: 1;
font-weight: bold;
}
@media (max-width: 500px) {
button { font-size: 1.6rem; padding: 8px 12px; }
.score-box { font-size: 1rem; }
.status { font-size: 0.7rem; }
}
</style>
</head>
<body>
<div class="game-container">
<div class="canvas-wrapper">
<canvas id="gameCanvas" width="600" height="600"></canvas>
</div>
<div class="info-panel">
<div class="score-box">💰 <span id="puntos">0</span></div>
<div class="premio-box">
<span>🏆</span>
<span id="premioEmoji">❓</span>
</div>
<div class="status" id="estadoMsg">👉 TOCA LA COCAÍNA 👈</div>
</div>
<div class="controls">
<button id="leftBtn">◀◀</button>
<button id="resetBtn">🔄</button>
<button id="rightBtn">▶▶</button>
</div>
<div style="text-align: center; margin-top: 8px; color:#ffd700; font-size: 11px;">
👮♂️ DISPAROS LENTOS | ❄️ COCA = CRECES | 🏦 LAVA = 💵
</div>
</div>
<script>
(function(){
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const BASE_W = 600, BASE_H = 600;
let scaleX = 1, scaleY = 1;
function actualizarEscala() {
const rect = canvas.getBoundingClientRect();
scaleX = rect.width / BASE_W;
scaleY = rect.height / BASE_H;
}
// ========== ELEMENTOS DEL JUEGO (REBALANCEADOS) ==========
let player = {
x: BASE_W/2 - 25,
y: BASE_H - 80,
width: 45,
height: 45,
tieneCarga: false,
mostrarDolar: 0
};
const zonaCoca = { x: 15, y: BASE_H - 110, w: 85, h: 85 };
const zonaBanco = { x: BASE_W - 105, y: BASE_H - 95, w: 90, h: 85 };
let balas = [];
let puntos = 0;
let premioActual = "❓";
let juegoActivo = true;
let mensajeEstado = "❄️ Toca COCAÍNA (montaña blanca) ❄️";
// --- AJUSTES DE DIFICULTAD (MÁS FÁCIL) ---
let policiaX = BASE_W/2 - 25;
let direccionPolicia = 1.2; // Más lento (antes 2 o 3)
let framesParaBala = 20; // Retraso inicial antes del primer disparo
let velocidadBalas = 3.5; // Balas más lentas (antes 5)
const premiosPosibles = ["🚘","🚗","🚖","🚕","🛴","🛼","⛵️","🛳️","✈️"];
function actualizarUI() {
document.getElementById('puntos').innerText = puntos;
document.getElementById('premioEmoji').innerText = premioActual;
document.getElementById('estadoMsg').innerText = mensajeEstado;
}
function generarPremio() {
premioActual = premiosPosibles[Math.floor(Math.random() * premiosPosibles.length)];
actualizarUI();
}
function reiniciarJuego() {
juegoActivo = true;
puntos = 0;
premioActual = "❓";
balas = [];
player.width = 45;
player.height = 45;
player.x = BASE_W/2 - 25;
player.y = BASE_H - 80;
player.tieneCarga = false;
player.mostrarDolar = 0;
velocidadBalas = 3.5;
framesParaBala = 20;
mensajeEstado = "🔄 REINICIADO. Toca COCAÍNA ❄️";
actualizarUI();
policiaX = BASE_W/2 - 25;
}
function gameOver() {
juegoActivo = false;
mensajeEstado = "💀 ¡BALAZO! Reinicia 🔄 (menos balas ahora)";
actualizarUI();
}
function colisionRectCirculo(rect, bala) {
let centroX = bala.x + bala.radio;
let centroY = bala.y + bala.radio;
let closestX = Math.max(rect.x, Math.min(centroX, rect.x + rect.w));
let closestY = Math.max(rect.y, Math.min(centroY, rect.y + rect.h));
let dx = centroX - closestX;
let dy = centroY - closestY;
return (dx * dx + dy * dy) < (bala.radio * bala.radio);
}
function completarViaje() {
if (!juegoActivo) return;
if (player.tieneCarga) {
puntos++;
generarPremio();
player.mostrarDolar = 25;
player.width = 45;
player.height = 45;
player.tieneCarga = false;
mensajeEstado = "✅ LAVADO +1 💵 PREMIO: " + premioActual;
if (puntos % 5 === 0 && puntos > 0) { // Cada 5 viajes, no cada 3
velocidadBalas = Math.min(velocidadBalas + 0.4, 7); // Sube más lento
mensajeEstado += " ⚡ Balas algo más rápidas";
}
actualizarUI();
} else {
mensajeEstado = "⚠️ ¡Toca COCAÍNA primero! ⚠️";
actualizarUI();
}
}
function tomarCoca() {
if (!juegoActivo) return;
if (!player.tieneCarga) {
player.tieneCarga = true;
player.width += 15;
player.height += 15;
if (player.width > 100) player.width = 100;
if (player.height > 100) player.height = 100;
mensajeEstado = "❄️ ¡COCAÍNA! Creces → Corre al BANCO 🏦";
actualizarUI();
} else {
mensajeEstado = "Ya cargado, ¡ve al BANCO!";
actualizarUI();
}
}
function moverJugador(dx) {
if (!juegoActivo) return;
let nuevaX = player.x + dx;
if (nuevaX >= 5 && nuevaX + player.width <= BASE_W - 5) {
player.x = nuevaX;
}
}
function actualizarBalas() {
if (!juegoActivo) return;
// Mover balas más lento
for (let i=0; i<balas.length; i++) {
balas[i].y += velocidadBalas;
}
balas = balas.filter(b => b.y + b.radio < BASE_H);
// Mover policía más suave
policiaX += direccionPolicia;
if (policiaX <= 25) direccionPolicia = 1.2;
if (policiaX >= BASE_W - 65) direccionPolicia = -1.2;
// DISPARO MÁS ESPACIADO (menos balas)
if (framesParaBala <= 0) {
let radioBala = 9;
balas.push({
x: policiaX + 25,
y: 55,
radio: radioBala
});
// Mayor intervalo entre disparos: entre 40 y 60 frames
framesParaBala = Math.floor(Math.random() * (55 - 38 + 1) + 38);
} else {
framesParaBala--;
}
// Colisiones
const rectPlayer = { x: player.x, y: player.y, w: player.width, h: player.height };
for (let b of balas) {
if (colisionRectCirculo(rectPlayer, b)) {
gameOver();
return;
}
}
}
function verificarZonas() {
if (!juegoActivo) return;
const rectPlayer = { x: player.x, y: player.y, w: player.width, h: player.height };
if (rectPlayer.x < zonaCoca.x + zonaCoca.w &&
rectPlayer.x + rectPlayer.w > zonaCoca.x &&
rectPlayer.y < zonaCoca.y + zonaCoca.h &&
rectPlayer.y + rectPlayer.h > zonaCoca.y) {
tomarCoca();
}
if (rectPlayer.x < zonaBanco.x + zonaBanco.w &&
rectPlayer.x + rectPlayer.w > zonaBanco.x &&
rectPlayer.y < zonaBanco.y + zonaBanco.h &&
rectPlayer.y + rectPlayer.h > zonaBanco.y) {
completarViaje();
}
}
function dibujar() {
ctx.clearRect(0, 0, BASE_W, BASE_H);
ctx.fillStyle = "#2d5a2d";
ctx.fillRect(0, 0, BASE_W, BASE_H);
ctx.fillStyle = "#3e6e3e";
for(let i=0;i<12;i++) ctx.fillRect(0, i*50, BASE_W, 3);
// Montaña COCAÍNA
ctx.fillStyle = "#F5F5F5";
ctx.beginPath();
ctx.moveTo(zonaCoca.x + zonaCoca.w/2, zonaCoca.y);
ctx.lineTo(zonaCoca.x, zonaCoca.y + zonaCoca.h);
ctx.lineTo(zonaCoca.x + zonaCoca.w, zonaCoca.y + zonaCoca.h);
ctx.fill();
ctx.fillStyle = "#C0C0C0";
ctx.font = "48px monospace";
ctx.fillText("❄️", zonaCoca.x + 22, zonaCoca.y + 62);
ctx.font = "bold 14px monospace";
ctx.fillStyle = "#555";
ctx.fillText("COCA", zonaCoca.x + 25, zonaCoca.y + 82);
// EL BANCO
ctx.fillStyle = "#FFD700";
ctx.fillRect(zonaBanco.x, zonaBanco.y, zonaBanco.w, zonaBanco.h);
ctx.fillStyle = "#B8860B";
for(let i=0;i<3;i++) ctx.fillRect(zonaBanco.x+10+i*25, zonaBanco.y-8, 15, 8);
ctx.font = "42px monospace";
ctx.fillStyle = "#0a1a0a";
ctx.fillText("🏦", zonaBanco.x+18, zonaBanco.y+60);
ctx.font = "bold 11px monospace";
ctx.fillStyle = "#2c1a0a";
ctx.fillText("EL BANCO", zonaBanco.x+12, zonaBanco.y+78);
// Jugador
if (player.tieneCarga) {
ctx.fillStyle = "#6fda6f";
ctx.shadowColor = "#00ff80";
} else {
ctx.fillStyle = "#4a3a3a";
ctx.shadowColor = "#b97f44";
}
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillStyle = "white";
ctx.fillRect(player.x+8, player.y+12, 8, 8);
ctx.fillRect(player.x+player.width-16, player.y+12, 8, 8);
ctx.fillStyle = "#000";
ctx.fillRect(player.x+10, player.y+15, 4, 4);
ctx.fillRect(player.x+player.width-14, player.y+15, 4, 4);
ctx.fillStyle = "#222";
ctx.fillRect(player.x-3, player.y-8, player.width+6, 10);
ctx.fillStyle = "#d4af37";
ctx.fillRect(player.x-1, player.y-10, player.width+2, 4);
if (player.mostrarDolar > 0) {
ctx.font = "52px monospace";
ctx.fillStyle = "#FFD700";
ctx.fillText("💵", player.x + player.width/2 - 15, player.y - 25);
player.mostrarDolar--;
}
// Balas con emoji
for (let b of balas) {
ctx.font = `28px monospace`;
ctx.fillStyle = "#ff4444";
ctx.fillText("💥", b.x-10, b.y-5);
ctx.font = `22px monospace`;
ctx.fillStyle = "#ffaa00";
ctx.fillText("🔫", b.x-8, b.y-12);
}
// Policía
ctx.font = "52px monospace";
ctx.fillStyle = "#1a3a6a";
ctx.fillText("👮♂️", policiaX, 52);
ctx.font = "28px monospace";
ctx.fillStyle = "#ff6600";
ctx.fillText("🔫", policiaX+32, 38);
ctx.font = "36px monospace";
ctx.fillStyle = "#eeeeff";
ctx.fillText("💭", 12, 58);
ctx.font = "44px monospace";
ctx.fillStyle = "#FFD700";
ctx.fillText(premioActual, zonaCoca.x+18, zonaCoca.y-22);
if (!juegoActivo) {
ctx.font = "bold 34px monospace";
ctx.fillStyle = "#aa0000";
ctx.fillText("GAME OVER", BASE_W/2-110, BASE_H/2);
}
ctx.shadowBlur = 0;
}
function loop() {
if (juegoActivo) {
actualizarBalas();
verificarZonas();
}
actualizarEscala();
dibujar();
requestAnimationFrame(loop);
}
// Controles táctiles
function getCanvasCoords(e) {
const rect = canvas.getBoundingClientRect();
const touch = e.touches ? e.touches[0] : e;
const canvasX = (touch.clientX - rect.left) * (BASE_W / rect.width);
const canvasY = (touch.clientY - rect.top) * (BASE_H / rect.height);
return { x: canvasX, y: canvasY };
}
let touchActive = false, lastTouchX = 0;
function onTouchStart(e) {
e.preventDefault();
const coords = getCanvasCoords(e);
touchActive = true;
lastTouchX = coords.x;
}
function onTouchMove(e) {
if (!touchActive || !juegoActivo) return;
e.preventDefault();
const coords = getCanvasCoords(e);
const delta = coords.x - lastTouchX;
if (Math.abs(delta) > 8) {
moverJugador(delta);
lastTouchX = coords.x;
}
}
function onTouchEnd(e) { touchActive = false; e.preventDefault(); }
canvas.addEventListener('touchstart', onTouchStart, {passive: false});
canvas.addEventListener('touchmove', onTouchMove, {passive: false});
canvas.addEventListener('touchend', onTouchEnd);
canvas.addEventListener('mousedown', (e) => {
e.preventDefault();
const coords = getCanvasCoords(e);
touchActive = true;
lastTouchX = coords.x;
});
window.addEventListener('mousemove', (e) => {
if (!touchActive || !juegoActivo) return;
const coords = getCanvasCoords(e);
const delta = coords.x - lastTouchX;
if (Math.abs(delta) > 5) {
moverJugador(delta);
lastTouchX = coords.x;
}
});
window.addEventListener('mouseup', () => { touchActive = false; });
document.getElementById('leftBtn').addEventListener('click', () => moverJugador(-40));
document.getElementById('rightBtn').addEventListener('click', () => moverJugador(40));
document.getElementById('resetBtn').addEventListener('click', () => reiniciarJuego());
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') moverJugador(-40);
if (e.key === 'ArrowRight') moverJugador(40);
if (e.key === 'r') reiniciarJuego();
});
actualizarEscala();
reiniciarJuego();
loop();
})();
</script>
</body>
</html>
Game Source: EL BANCO: Lavado Fácil (pero irónico)
Creator: CosmicTurtle66
Libraries: none
Complexity: complex (502 lines, 17.5 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: lavadero-cosmicturtle66" to link back to the original. Then publish at arcadelab.ai/publish.