Click here for free DL of the app version that can save data.

No:12492

Create a platform game with also a button to jump ..ALL
Developer User5134｜Date and time 23/8/18 10:38:49
Build time 28.528 sec｜Game capacity 4.17KB｜

Script

Juego Plataformero

Instrucciones: Toca la pantalla para saltar y esquivar los obstáculos. Si tocas un obstáculo, se reinicia el juego. Cada vez que saltes, se te suma un punto.

Puntuación: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Juego Plataformero</title>
	<style>
		#player {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: blue;
		}

.obstacle {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: red;
		}

#score {
			font-size: 24px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>Juego Plataformero</h1>

<p><strong>Instrucciones:</strong> Toca la pantalla para saltar y esquivar los obstáculos. Si tocas un obstáculo, se reinicia el juego. Cada vez que saltes, se te suma un punto.</p>

<div id="player"></div>
	<div id="score">Puntuación: 0</div>

function startGame() {
		// Inicializar variables
		player = document.getElementById("player");
		score = document.getElementById("score");
		gravity = 1;
		gameStarted = false;
		gamePaused = false;

// Configurar eventos
		document.addEventListener("click", jump);
		document.addEventListener("keydown", pauseGame);

// Crear obstáculos iniciales
		createObstacle();
		
		// Iniciar el bucle de juego
		updateGame();
	}

function updateGame() {
		if (!gameStarted) {
			return;
		}

// Mover al jugador hacia abajo por gravedad
		movePlayerDown();

// Mover obstáculos hacia la izquierda
		moveObstacles();

// Comprobar colisiones
		checkCollision();

// Actualizar puntuación
		updateScore();

// Repetir el bucle
		requestAnimationFrame(updateGame);
	}

function movePlayerDown() {
		var currentBottom = parseInt(player.style.bottom);
		var newBottom = currentBottom - gravity;
		player.style.bottom = newBottom + "px";
	}

function moveObstacles() {
		for (var i = 0; i < obstacles.length; i++) {
			var obstacle = obstacles[i];
			var currentLeft = parseInt(obstacle.style.left);
			var newLeft = currentLeft - 5;
			obstacle.style.left = newLeft + "px";
			
			// Eliminar obstáculo si se sale de la pantalla
			if (currentLeft <= -50) {
				obstacle.parentNode.removeChild(obstacle);
				obstacles.splice(i, 1);
			}
		}

// Crear nuevos obstáculos aleatoriamente
		var randomNumber = Math.random();
		if (randomNumber < 0.01) {
			createObstacle();
		}
	}

function createObstacle() {
		var obstacle = document.createElement("div");
		obstacle.className = "obstacle";
		obstacle.style.left = "650px";
		obstacle.style.bottom = "0px";
		document.body.appendChild(obstacle);
		obstacles.push(obstacle);
	}

function updateScore() {
		var currentScore = parseInt(score.innerText.split(":")[1]);
		score.innerText = "Puntuación: " + currentScore;
	}

function restartGame() {
		player.style.bottom = "0px";
		score.innerText = "Puntuación: 0";
		
		for (var i = 0; i < obstacles.length; i++) {
			obstacles[i].parentNode.removeChild(obstacles[i]);
		}
		
		obstacles = [];
		gameStarted = false;
	}

// Iniciar el juego al cargar la página
	window.onload = startGame;
	</script>
</body>
</html>