Simulacion de tienda de juegos
- samuel gaitan
- 16 abr
- 1 Min. de lectura
Actualizado: 12 may
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda de Juegos de Simulación Espacial</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<header class="bg-blue-600 p-4 text-white text-center text-xl font-bold">
Tienda de Juegos de Simulación Espacial
</header>
<div class="container mx-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Juego 1: Simulador de Vuelo Espacial -->
<div class="bg-white p-4 rounded-lg shadow-lg">
<h2 class="text-lg font-bold mt-2">Simulador de Vuelo Espacial</h2>
<p class="text-gray-600">Experimenta el vuelo en el espacio con realismo total.</p>
<p class="text-green-600 font-bold">Precio: $0</p>
<button onclick="agregarAlCarrito('Simulador de Vuelo Espacial')"
class="block mt-2 bg-green-500 text-white text-center py-2 rounded">Agregar al carrito</button>
</div>
<!-- Juego 2: Combate de Naves Espaciales -->
<div class="bg-white p-4 rounded-lg shadow-lg">
<h2 class="text-lg font-bold mt-2">Combate de Naves Espaciales</h2>
<p class="text-gray-600">Pelea en el espacio con tu nave en emocionantes batallas.</p>
<p class="text-green-600 font-bold">Precio: $0</p>
<button onclick="agregarAlCarrito('Combate de Naves Espaciales')"
class="block mt-2 bg-green-500 text-white text-center py-2 rounded">Agregar al carrito</button>
</div>
</div>
<div class="container mx-auto p-4 mt-4 bg-white rounded-lg shadow-lg">
<h2 class="text-lg font-bold">Carrito de Compras</h2>
<ul id="carrito" class="text-gray-600"></ul>
<p id="contador" class="text-gray-800 font-bold">Total de productos: 0</p>
<button onclick="descargarJuegos()" class="mt-2 bg-blue-600 text-white py-2 px-4 rounded">Pagar (Descargar)</button>
</div>
<script>
let carrito = {};
function agregarAlCarrito(producto) {
if (carrito[producto]) {
carrito[producto]++;
} else {
carrito[producto] = 1;
}
actualizarCarrito();
}
function actualizarCarrito() {
const carritoLista = document.getElementById("carrito");
carritoLista.innerHTML = "";
let total = 0;
for (const producto in carrito) {
total += carrito[producto];
const item = document.createElement("li");
item.textContent = `${producto}: ${carrito[producto]}`;
carritoLista.appendChild(item);
}
document.getElementById("contador").textContent = `Total de productos: ${total}`;
}
function descargarJuegos() {
if (Object.keys(carrito).length > 0) {
alert("Gracias por tu compra. Se iniciará la descarga.");
window.location.href = "https://example.com/juego.apk"; // Reemplazar con URL real
} else {
alert("El carrito está vacío.");
}
}
</script>
</body>
</html>
Comentarios