An exploration game where we control a red circle with eyes that can get points by defeating yellow squares and use the points to unlock skills in a skill tree in order to defeat the black rectangle and rescue the blue triangle princess.'s game

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

No:1824

527

←

Prev Next

→

An exploration game where we control a red circle ..ALL
Developer User3408｜Date and time 23/6/19 3:48:47
Build time 50.229 sec｜Game capacity 4.285KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Juego de Exploración</title>
	<style>
		canvas {
			background-color: #333;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// Definición de variables y constantes
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		const circle = {
			x: 50,
			y: canvas.height / 2,
			radius: 20,
			speed: 5,
			dx: 5,
			dy: -5
		};
		const squares = [];
		const skills = [
			{name: 'Ataque Rápido', points: 10},
			{name: 'Defensa', points: 20},
			{name: 'Super Salto', points: 30}
		];
		const tree = document.createElement('ul');

// Función para dibujar el círculo
		function drawCircle() {
			context.beginPath();
			context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
			context.fillStyle = '#f00';
			context.fill();
			context.closePath();
		}

// Función para mover el círculo
		function moveCircle() {
			if (circle.x + circle.radius > canvas.width || circle.x - circle.radius < 0) {
				circle.dx = -circle.dx;
			}
			if (circle.y + circle.radius > canvas.height || circle.y - circle.radius < 0) {
				circle.dy = -circle.dy;
			}
			circle.x += circle.dx;
			circle.y += circle.dy;
		}

// Función para dibujar los cuadrados
		function drawSquares() {
			for (let i = 0; i < squares.length; i++) {
				context.beginPath();
				context.rect(squares[i].x, squares[i].y, squares[i].size, squares[i].size);
				context.fillStyle = '#ff0';
				context.fill();
				context.closePath();
			}
		}

// Función para mover los cuadrados
		function moveSquares() {
			for (let i = 0; i < squares.length; i++) {
				if (squares[i].x + squares[i].size > canvas.width || squares[i].x < 0) {
					squares[i].dx = -squares[i].dx;
				}
				if (squares[i].y + squares[i].size > canvas.height || squares[i].y < 0) {
					squares[i].dy = -squares[i].dy;
				}
				squares[i].x += squares[i].dx;
				squares[i].y += squares[i].dy;
			}
		}

// Función para crear los cuadrados
		function createSquares() {
			const levels = [1, 2, 3, 4, 5];
			for (let i = 0; i < levels.length; i++) {
				for (let j = 0; j < levels[i]; j++) {
					const square = {
						x: Math.random() * canvas.width,
						y: Math.random() * canvas.height,
						size: 20,
						dx: Math.random() * 4 - 2,
						dy: Math.random() * 4 - 2
					};
					squares.push(square);
				}
			}
		}

// Función para detectar colisiones entre el círculo y los cuadrados
		function detectCollision() {
			for (let i = 0; i < squares.length; i++) {
				if (circle.x + circle.radius > squares[i].x &&
				    circle.x - circle.radius < squares[i].x + squares[i].size &&
				    circle.y + circle.radius > squares[i].y &&
				    circle.y - circle.radius < squares[i].y + squares[i].size) {
					squares.splice(i, 1);
					circle.speed += 1;
				}
			}
		}

// Función para dibujar el árbol de habilidades
		function drawSkills() {
			for (let i = 0; i < skills.length; i++) {
				const skill = document.createElement('li');
				const link = document.createElement('a');
				link.textContent = skills[i].name;
				link.href = '#';
				skill.appendChild(link);
				tree.appendChild(skill);
			}
		}

// Función para desbloquear habilidades con los puntos obtenidos
		function unlockSkills() {
			for (let i = 0; i < skills.length; i++) {
				if (circle.speed >= skills[i].points) {
					document.querySelector(`li:nth-child(${i + 1}) a`).classList.add('unlocked');
				}
			}
		}

// Función para detectar la selección de habilidades
		function detectSelection(e) {
			if (e.target.classList.contains('unlocked')) {
				alert(`Has seleccionado la habilidad ${e.target.textContent}`);
			}
		}

// Función principal del juego
		function game() {
			requestAnimationFrame(game);
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawCircle();
			moveCircle();
			drawSquares();
			moveSquares();
			detectCollision();
			drawSkills();
			unlockSkills();
		}

// Inicialización del juego
		createSquares();
		drawSkills();
		document.body.appendChild(tree);
		tree.addEventListener('click', detectSelection);
		game();
	</script>
</body>
</html>