Juego: Present Simple vs Present Continuous
by StormBear94181 lines5.9 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Juego: Present Simple vs Present Continuous</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f8ff;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #2c3e50;
}
.game-section {
border: 2px solid #3498db;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
max-width: 600px;
background: #ffffff;
}
button {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #2980b9;
}
.traffic-light {
display: flex;
justify-content: center;
margin: 20px 0;
}
.light {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 10px;
opacity: 0.3;
}
.red { background: red; }
.green { background: green; }
.yellow { background: yellow; }
.active { opacity: 1; }
.output {
margin-top: 15px;
font-weight: bold;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Juego: Present Simple vs Present Continuous</h1>
<p>Aprende jugando con tus juguetes y actividades interactivas.</p>
<!-- Semáforo de la Gramática -->
<div class="game-section">
<h2>🚦 El Semáforo de la Gramática</h2>
<div class="traffic-light">
<div id="redLight" class="light red"></div>
<div id="greenLight" class="light green"></div>
</div>
<button onclick="showHabit()">Luz Roja (Rutina)</button>
<button onclick="showAction()">Luz Verde (Acción Ahora)</button>
<div id="trafficOutput" class="output"></div>
</div>
<!-- Freeze & Motion -->
<div class="game-section">
<h2>🎵 Freeze & Motion</h2>
<button onclick="freezeMotion()">¡Jugar!</button>
<div id="freezeOutput" class="output"></div>
</div>
<!-- Toy World -->
<div class="game-section">
<h2>🧸 Toy World Routines vs Right Now</h2>
<button onclick="toyRoutine()">Rutina (Present Simple)</button>
<button onclick="toyAction()">Acción en Progreso (Present Continuous)</button>
<div id="toyOutput" class="output"></div>
</div>
<!-- Mystery Lego Tower -->
<div class="game-section">
<h2>🧱 Mystery Lego Tower</h2>
<button onclick="legoTower()">Construir Torre</button>
<div id="legoOutput" class="output"></div>
</div>
<!-- Detective Charades -->
<div class="game-section">
<h2>🕵️ Detective Charades</h2>
<button onclick="charades()">Adivinar Acción</button>
<div id="charadesOutput" class="output"></div>
</div>
<!-- Toy Daily Schedule -->
<div class="game-section">
<h2>📅 Toy Daily Schedule</h2>
<button onclick="toySchedule()">Mostrar Rutina y Acción</button>
<div id="scheduleOutput" class="output"></div>
</div>
<!-- Simon Says -->
<div class="game-section">
<h2>🎲 Simon Says</h2>
<button onclick="simonRoutine()">Rutina</button>
<button onclick="simonAction()">Acción Ahora</button>
<div id="simonOutput" class="output"></div>
</div>
<!-- Freeze-Frame Storyteller -->
<div class="game-section">
<h2>📖 Freeze-Frame Storyteller</h2>
<button onclick="storyteller()">Crear Historia</button>
<div id="storyOutput" class="output"></div>
</div>
<!-- Toy Race -->
<div class="game-section">
<h2>🏎️ Toy Race</h2>
<button onclick="toyRace()">Mover Carro</button>
<div id="raceOutput" class="output"></div>
</div>
<script>
function showHabit() {
document.getElementById("redLight").classList.add("active");
document.getElementById("greenLight").classList.remove("active");
document.getElementById("trafficOutput").innerText = "Ejemplo: My car runs every day.";
}
function showAction() {
document.getElementById("greenLight").classList.add("active");
document.getElementById("redLight").classList.remove("active");
document.getElementById("trafficOutput").innerText = "Ejemplo: My car is driving right now!";
}
function freezeMotion() {
let actions = ["I am eating!", "I am brushing my hair!", "I am playing!"];
document.getElementById("freezeOutput").innerText = actions[Math.floor(Math.random()*actions.length)];
}
function toyRoutine() {
document.getElementById("toyOutput").innerText = "Batman drinks milk every morning.";
}
function toyAction() {
document.getElementById("toyOutput").innerText = "Batman is flying right now!";
}
function legoTower() {
document.getElementById("legoOutput").innerText = "I am building a tower now. I make my bed every day.";
}
function charades() {
let guesses = ["The teddy bear is dancing!", "Is the teddy bear sleeping?", "The teddy bear is jumping!"];
document.getElementById("charadesOutput").innerText = guesses[Math.floor(Math.random()*guesses.length)];
}
function toySchedule() {
document.getElementById("scheduleOutput").innerText = "My robot plays games in the afternoon. My robot is playing now!";
}
function simonRoutine() {
document.getElementById("simonOutput").innerText = "I eat breakfast every morning.";
}
function simonAction() {
document.getElementById("simonOutput").innerText = "My toy is flying right now!";
}
function storyteller() {
document.getElementById("storyOutput").innerText = "This is my puppy toy. He sleeps in my room every night. But today he is running in the park right now!";
}
function toyRace() {
document.getElementById("raceOutput").innerText = "He cleans his car on Mondays. He is driving fast right now!";
}
</script>
</body>
</html>
Game Source: Juego: Present Simple vs Present Continuous
Creator: StormBear94
Libraries: none
Complexity: moderate (181 lines, 5.9 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: juego-present-simple-vs-present-continuo-stormbear94" to link back to the original. Then publish at arcadelab.ai/publish.