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

No:1829

485

←

Prev Next

→

An exploration game where we control a red circle ..ALL
Developer User3408｜Date and time 23/6/19 3:58:34
Build time 61.933 sec｜Game capacity 4.587KB｜

Script

Juego de exploración

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="es">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Juego de exploración</title>
	<style>
		#canvas {
			background-color: #fff;
			border: 1px solid #ccc;
			margin: auto;
		}
	</style>
</head>

<body>
	<h1>Juego de exploración</h1>
	<canvas id="canvas" width="400" height="400"></canvas>

// Círculo del jugador
		var player = {
			x: 50,
			y: 350,
			r: 10,
			color: '#f00',
			speed: 5,
			jumping: false,
			jumpHeight: 80,
			jumpCount: 0,
			jumpLimit: 2
		};

// Cuadrados amarillos
		var squares = [
			{ x: 60, y: 300, width: 20, height: 20, color: '#ff0' },
			{ x: 150, y: 250, width: 20, height: 20, color: '#ff0' },
			{ x: 200, y: 200, width: 20, height: 20, color: '#ff0' },
			{ x: 300, y: 100, width: 20, height: 20, color: '#ff0' }
		];

// Eventos del teclado
		document.addEventListener('keydown', function (event) {
			switch (event.code) {
				case 'ArrowLeft':
					player.x -= player.speed;
					break;
				case 'ArrowRight':
					player.x += player.speed;
					break;
				case 'ArrowUp':
					if (player.jumpCount < player.jumpLimit) {
						player.jumping = true;
						player.jumpCount++;
					}
					break;
			}
		});

// Dibujar círculo
		function drawCircle(x, y, r, color) {
			ctx.beginPath();
			ctx.arc(x, y, r, 0, 2 * Math.PI);
			ctx.fillStyle = color;
			ctx.fill();
			ctx.closePath();
		}

// Dibujar rectángulo
		function drawRect(x, y, width, height, color) {
			ctx.beginPath();
			ctx.rect(x, y, width, height);
			ctx.fillStyle = color;
			ctx.fill();
			ctx.closePath();
		}

// Dibujar texto
		function drawText(text, x, y, color) {
			ctx.fillStyle = color;
			ctx.font = '20px Arial';
			ctx.fillText(text, x, y);
		}

// Dibujar habilidades
		function drawSkills() {
			drawText('Habilidades:', 10, 30, '#000');
			for (var i = 0; i < skills.length; i++) {
				var skill = skills[i];
				drawText(skill.name + ': ' + skill.cost + ' puntos', 10, 60 + i * 30, skill.bought ? '#0f0' : '#f00');
			}
		}

// Dibujar enemigos
		function drawEnemies() {
			for (var i = 0; i < enemies.length; i++) {
				var enemy = enemies[i];
				drawRect(enemy.x, enemy.y, enemy.width, enemy.height, enemy.color);
			}
		}

// Dibujar todo
		function draw() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar jugador
			drawCircle(player.x, player.y, player.r, player.color);

// Dibujar cuadrados
			for (var i = 0; i < squares.length; i++) {
				var square = squares[i];
				drawRect(square.x, square.y, square.width, square.height, square.color);
			}

// Dibujar puntuación
			drawText('Puntuación: ' + score, 10, 400, '#000');

// Dibujar habilidades
			drawSkills();

// Dibujar enemigos
			drawEnemies();
		}

// Actualizar jugador
		function updatePlayer() {
			// Saltar
			if (player.jumping) {
				player.y -= player.jumpHeight;
				if (player.y < 0) {
					player.jumping = false;
					player.jumpCount = 0;
				}
			}

// Colisiones con cuadrados
			for (var i = 0; i < squares.length; i++) {
				var square = squares[i];
				if (player.x < square.x + square.width &&
					player.x + player.r > square.x &&
					player.y < square.y + square.height &&
					player.y + player.r > square.y) {
					score += 10;
					squares.splice(i, 1);
				}
			}

// Colisiones con enemigos
			for (var i = 0; i < enemies.length; i++) {
				var enemy = enemies[i];
				if (player.x < enemy.x + enemy.width &&
					player.x + player.r > enemy.x &&
					player.y < enemy.y + enemy.height &&
					player.y + player.r > enemy.y) {
					alert('Has perdido!');
					location.reload();
				}
			}

// Colisiones con límites del canvas
			if (player.x < 0) {
				player.x = 0;
			} else if (player.x > canvas.width - player.r) {
				player.x = canvas.width - player.r;
			}
			if (player.y > canvas.height - player.r) {
				player.y = canvas.height - player.r;
			}
		}

// Actualizar
		function update() {
			updatePlayer();
			draw();
		}

// Loop del juego
		setInterval(update, 1000 / 60);

</script>
</body>

</html>