Scribd
Upload
2 views

Robot Runner Game.html

The document is an HTML file for a game called 'Robot Runner', featuring a canvas for gameplay, touch controls, and a heads-up display (HUD) showing level and energy. The game includes multiple levels with platforms, hazards, and a goal, where players control a robot to navigate and avoid dangers while managing energy. It also includes a game over screen and a restart button to replay the game.

Uploaded by

biellax08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Robot Runner Game.html

The document is an HTML file for a game called 'Robot Runner', featuring a canvas for gameplay, touch controls, and a heads-up display (HUD) showing level and energy. The game includes multiple levels with platforms, hazards, and a goal, where players control a robot to navigate and avoid dangers while managing energy. It also includes a game over screen and a restart button to replay the game.

Uploaded by

biellax08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html>
<head>
<title>Robot Runner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: #1a1a1a;
touch-action: none;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
canvas {
border: 2px solid #00ff00;
background: #000;
max-width: 100%;
margin-top: 10px;
}
#controls {
position: fixed;
bottom: 20px;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
}
.control-btn {
width: 60px;
height: 60px;
background-color: rgba(0, 255, 0, 0.2);
border: 2px solid #00ff00;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
user-select: none;
touch-action: none;
color: #00ff00;
}
#movement-buttons {
display: flex;
gap: 20px;
}
#hud {
position: fixed;
top: 10px;
left: 10px;
color: #00ff00;
font-family: 'Courier New', monospace;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
}
#gameOver {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
border: 2px solid #ff0000;
text-align: center;
color: #ff0000;
z-index: 1000;
}
#restartBtn {
margin-top: 20px;
padding: 10px 20px;
background-color: #ff0000;
border: none;
color: white;
cursor: pointer;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<div id="hud">Nivel: <span id="level">1</span> | Energía: <span
id="energy">100</span></div>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div id="controls">
<div id="movement-buttons">
<div class="control-btn" id="leftBtn">←</div>
<div class="control-btn" id="rightBtn">→</div>
</div>
<div class="control-btn" id="jumpBtn">↑</div>
</div>
<div id="gameOver">
<h2>GAME OVER</h2>
<p>¡Has perdido toda tu energía!</p>
<button id="restartBtn">Volver a jugar</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gameOverScreen = document.getElementById('gameOver');
const restartBtn = document.getElementById('restartBtn');
let currentLevel = 1;
let energy = 100;
let gameIsOver = false;

// Niveles del juego


const levels = [
{ // Nivel 1
platforms: [
{x: 0, y: 300, width: 150, height: 20},
{x: 200, y: 250, width: 100, height: 20},
{x: 400, y: 200, width: 100, height: 20},
{x: 600, y: 150, width: 100, height: 20}
],
hazards: [
{x: 300, y: 380, width: 40, height: 20},
{x: 500, y: 380, width: 40, height: 20}
],
goal: {x: 700, y: 100, width: 40, height: 40}
},
{ // Nivel 2
platforms: [
{x: 0, y: 300, width: 150, height: 20},
{x: 200, y: 280, width: 100, height: 20},
{x: 400, y: 260, width: 100, height: 20},
{x: 600, y: 240, width: 100, height: 20}
],
hazards: [
{x: 250, y: 380, width: 40, height: 20},
{x: 450, y: 380, width: 40, height: 20},
{x: 650, y: 380, width: 40, height: 20}
],
goal: {x: 750, y: 200, width: 40, height: 40}
},
{ // Nivel 3
platforms: [
{x: 0, y: 300, width: 100, height: 20},
{x: 200, y: 250, width: 80, height: 20},
{x: 400, y: 200, width: 80, height: 20},
{x: 600, y: 150, width: 80, height: 20}
],
hazards: [
{x: 150, y: 380, width: 40, height: 20},
{x: 300, y: 380, width: 40, height: 20},
{x: 450, y: 380, width: 40, height: 20},
{x: 600, y: 380, width: 40, height: 20}
],
goal: {x: 750, y: 100, width: 40, height: 40}
}
];

const player = {
x: 50,
y: 260,
width: 30,
height: 40,
speed: 5,
jumpForce: 12,
gravity: 0.5,
velocityY: 0,
velocityX: 0,
isJumping: false
};

const keys = {
left: false,
right: false,
up: false
};

function resizeCanvas() {
const maxWidth = Math.min(800, window.innerWidth - 20);
const ratio = canvas.height / canvas.width;
canvas.style.width = maxWidth + 'px';
canvas.style.height = (maxWidth * ratio) + 'px';
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// Controles táctiles
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
const jumpBtn = document.getElementById('jumpBtn');

function handleTouch(element, keyType) {


element.addEventListener('touchstart', (e) => {
e.preventDefault();
if (!gameIsOver) {
keys[keyType] = true;
if (keyType === 'up' && !player.isJumping) {
player.velocityY = -player.jumpForce;
player.isJumping = true;
}
}
});

element.addEventListener('touchend', (e) => {


e.preventDefault();
keys[keyType] = false;
});
}

handleTouch(leftBtn, 'left');
handleTouch(rightBtn, 'right');
handleTouch(jumpBtn, 'up');

// Controles de teclado
document.addEventListener('keydown', (e) => {
if (!gameIsOver) {
switch(e.key) {
case 'ArrowLeft': keys.left = true; break;
case 'ArrowRight': keys.right = true; break;
case 'ArrowUp':
case ' ':
if (!player.isJumping) {
player.velocityY = -player.jumpForce;
player.isJumping = true;
}
break;
}
}
});

document.addEventListener('keyup', (e) => {


switch(e.key) {
case 'ArrowLeft': keys.left = false; break;
case 'ArrowRight': keys.right = false; break;
}
});
function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}

function getCurrentLevel() {
return levels[currentLevel - 1];
}

function resetPlayer() {
player.x = 50;
player.y = 260;
player.velocityY = 0;
player.velocityX = 0;
player.isJumping = false;
}

function showGameOver() {
gameIsOver = true;
gameOverScreen.style.display = 'block';
}

function restartGame() {
gameIsOver = false;
gameOverScreen.style.display = 'none';
currentLevel = 1;
energy = 100;
document.getElementById('level').textContent = currentLevel;
document.getElementById('energy').textContent = energy;
resetPlayer();
}

restartBtn.addEventListener('click', restartGame);

function update() {
if (gameIsOver) return;

const level = getCurrentLevel();

// Movimiento horizontal
if (keys.left) {
player.velocityX = -player.speed;
} else if (keys.right) {
player.velocityX = player.speed;
} else {
player.velocityX = 0;
}

// Actualizar posición
player.x += player.velocityX;
player.velocityY += player.gravity;
player.y += player.velocityY;

// Límites del canvas


if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width -
player.width;

// Colisiones con plataformas


let onPlatform = false;
level.platforms.forEach(platform => {
if (checkCollision(player, platform)) {
if (player.velocityY > 0 && player.y + player.height -
player.velocityY <= platform.y) {
player.y = platform.y - player.height;
player.velocityY = 0;
player.isJumping = false;
onPlatform = true;
}
}
});

// Colisiones con peligros


level.hazards.forEach(hazard => {
if (checkCollision(player, hazard)) {
energy -= 1;
document.getElementById('energy').textContent = energy;
if (energy <= 0) {
showGameOver();
}
}
});

// Comprobar meta
if (checkCollision(player, level.goal)) {
currentLevel++;
document.getElementById('level').textContent = currentLevel;
if (currentLevel > levels.length) {
alert('¡Felicidades! Has completado todos los niveles');
currentLevel = 1;
document.getElementById('level').textContent = currentLevel;
}
resetPlayer();
}

// Caída al vacío
if (player.y > canvas.height) {
resetPlayer();
energy -= 20;
document.getElementById('energy').textContent = energy;
if (energy <= 0) {
showGameOver();
}
}
}

function drawRobot(x, y, width, height) {


// Cuerpo principal
ctx.fillStyle = '#00ff00';
ctx.fillRect(x, y, width, height);

// Ojos
ctx.fillStyle = '#ffffff';
ctx.fillRect(x + width/4, y + height/4, width/6, height/6);
ctx.fillRect(x + width*5/8, y + height/4, width/6, height/6);
// Antena
ctx.strokeStyle = '#00ff00';
ctx.beginPath();
ctx.moveTo(x + width/2, y);
ctx.lineTo(x + width/2, y - height/4);
ctx.stroke();
}

function draw() {
const level = getCurrentLevel();

// Limpiar canvas
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Dibujar plataformas
level.platforms.forEach(platform => {
ctx.fillStyle = '#00aa00';
ctx.fillRect(platform.x, platform.y, platform.width,
platform.height);
});

// Dibujar peligros
level.hazards.forEach(hazard => {
ctx.fillStyle = '#ff0000';
ctx.fillRect(hazard.x, hazard.y, hazard.width, hazard.height);
});

// Dibujar meta
ctx.fillStyle = '#00ffff';
ctx.fillRect(level.goal.x, level.goal.y, level.goal.width,
level.goal.height);

// Dibujar jugador
drawRobot(player.x, player.y, player.width, player.height);
}

function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}

gameLoop();
</script>
</body>
</html>

You might also like