Un juego de plataformas con jasperdev's game

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

No:16278

←

Prev Next

→

Un juego de plataformas con jasperdev
Developer User7200｜Date and time 23/9/16 22:08:25
Build time 36.803 sec｜Game capacity 3.366KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Juego de Plataformas</title>
	<style>
		canvas {
			border: 1px solid #000;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gamecanvas" width="480" height="320"></canvas>
	<script>
		// Obtener el canvas
		var canvas = document.getElementById("gamecanvas");
		var ctx = canvas.getContext("2d");

// Definir el tamaño del jugador
		var playerWidth = 32;
		var playerHeight = 32;

// Definir la posición inicial del jugador
		var playerX = canvas.width / 2 - playerWidth / 2;
		var playerY = canvas.height - playerHeight;

// Definir la velocidad del jugador
		var playerSpeed = 5;

// Definir la gravedad
		var gravity = 0.5;

// Definir la posición y tamaño de la plataforma
		var platformX = 100;
		var platformY = 250;
		var platformWidth = 200;
		var platformHeight = 20;

// Definir si el jugador está en el suelo
		var isOnGround = false;

// Definir la dirección del movimiento del jugador
		var moveLeft = false;
		var moveRight = false;

// Función para detectar colisiones entre dos objetos
		function checkCollision(object1, object2) {
			if (object1.x < object2.x + object2.width &&
				object1.x + object1.width > object2.x &&
				object1.y < object2.y + object2.height &&
				object1.y + object1.height > object2.y) {
				return true;
			}
			return false;
		}

// Función para dibujar el jugador
		function drawPlayer() {
			ctx.fillStyle = "#0000FF";
			ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
		}

// Función para dibujar la plataforma
		function drawPlatform() {
			ctx.fillStyle = "#00FF00";
			ctx.fillRect(platformX, platformY, platformWidth, platformHeight);
		}

// Función para controlar el movimiento del jugador
		function movePlayer() {
			if (moveLeft && playerX > 0) {
				playerX -= playerSpeed;
			}
			if (moveRight && playerX < canvas.width - playerWidth) {
				playerX += playerSpeed;
			}
		}

// Función para actualizar la posición del jugador
		function updatePlayerPosition() {
			if (!isOnGround) {
				playerY += gravity;  // Aplicar gravedad
			}

if (checkCollision({x: playerX, y: playerY + playerHeight, width: playerWidth, height: 1}, {x: platformX, y: platformY, width: platformWidth, height: platformHeight})) {
				playerY = platformY - playerHeight;  // Detener la caída cuando colisiona con la plataforma
				isOnGround = true;
			} else {
				isOnGround = false;
			}
		}

// Función principal del juego
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);  // Limpiar el canvas
			drawPlayer();  // Dibujar el jugador
			drawPlatform();  // Dibujar la plataforma
			movePlayer();  // Controlar el movimiento del jugador
			updatePlayerPosition();  // Actualizar la posición del jugador
			requestAnimationFrame(gameLoop);  // Repetir el ciclo del juego
		}

// Escuchar eventos de teclado para mover al jugador
		document.addEventListener("keydown", function(event) {
			if (event.code === "ArrowLeft") {
				moveLeft = true;
			}
			if (event.code === "ArrowRight") {
				moveRight = true;
			}
		});
		document.addEventListener("keyup", function(event) {
			if (event.code === "ArrowLeft") {
				moveLeft = false;
			}
			if (event.code === "ArrowRight") {
				moveRight = false;
			}
		});

// Iniciar el juego
		gameLoop();
	</script>
</body>
</html>