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

No:1834

263

←

Prev Next

→

An exploration game where we control a red circle ..ALL
Developer User3408｜Date and time 23/6/19 4:21:43
Build time 73.62 sec｜Game capacity 6.471KB｜

Script

Exploration game

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Juego de exploración</title>
	<meta charset="UTF-8">
</head>
<body style="font-size: 2em; text-align: center;">
	<h1>Juego de exploración</h1>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<script>
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");

// variables globales del juego
		var score = 0;
		var playerX = canvas.width/2;
		var playerY = canvas.height/2;
		var playerSpeed = 5;
		var playerRadius = 20;
		var playerColor = "red";
		var enemyX = canvas.width/4;
		var enemyY = canvas.height/4;
		var enemyWidth = canvas.width/2;
		var enemyHeight = canvas.height/2;
		var enemyColor = "black";
		var princessX = canvas.width-canvas.width/4;
		var princessY = canvas.height-canvas.height/4;
		var princessSide = canvas.width/4;
		var princessColor = "blue";
		var skillsUnlocked = [false, false, false];
		var skillPoints = 0;

// función para dibujar al jugador
		function drawPlayer() {
			ctx.fillStyle = playerColor;
			ctx.beginPath();
			ctx.arc(playerX, playerY, playerRadius, 0, Math.PI*2, true);
			ctx.fill();
			ctx.closePath();
			ctx.fillStyle = "black";
			ctx.beginPath();
			ctx.arc(playerX, playerY, playerRadius/2, 0, Math.PI*2, true);
			ctx.fill();
			ctx.closePath();
		}

// función para mover al jugador y detectar colisiones con enemigos
		function movePlayer() {
			if (playerX > canvas.width-playerRadius) {
				playerX = canvas.width-playerRadius;
			} else if (playerX < playerRadius) {
				playerX = playerRadius;
			}

if (playerY > canvas.height-playerRadius) {
				playerY = canvas.height-playerRadius;
			} else if (playerY < playerRadius) {
				playerY = playerRadius;
			}

if (playerX <= enemyX+enemyWidth && playerX >= enemyX-enemyWidth && playerY <= enemyY+enemyHeight && playerY >= enemyY-enemyHeight) {
				score += 10;
				enemyX = Math.random()*canvas.width;
				enemyY = Math.random()*canvas.height;
			}

if (playerX <= princessX+princessSide && playerX >= princessX-princessSide && playerY <= princessY+princessSide && playerY >= princessY-princessSide) {
				if (skillsUnlocked.every(function(skillUnlocked) {return skillUnlocked})) {
					alert("¡Rescatado! ¡Juego terminado!");
				} else {
					alert("¡Necesitas desbloquear más habilidades! Tienes "+skillPoints+" puntos de habilidad para gastar.");
				}
			}

if (skillsUnlocked[2]) {
				// habilidad de movimiento rápido
				if (keys[37]) {// tecla izquierda
					playerX -= playerSpeed*2;
				}
				if (keys[39]) {// tecla derecha
					playerX += playerSpeed*2;
				}
				if (keys[38]) {// tecla arriba
					playerY -= playerSpeed*2;
				}
				if (keys[40]) {// tecla abajo
					playerY += playerSpeed*2;
				}
			} else {
				if (keys[37]) {// tecla izquierda
					playerX -= playerSpeed;
				}
				if (keys[39]) {// tecla derecha
					playerX += playerSpeed;
				}
				if (keys[38]) {// tecla arriba
					playerY -= playerSpeed;
				}
				if (keys[40]) {// tecla abajo
					playerY += playerSpeed;
				}
			}

drawPlayer();
		}

// función para dibujar a los enemigos
		function drawEnemies() {
			ctx.fillStyle = enemyColor;
			ctx.fillRect(enemyX-enemyWidth/2, enemyY-enemyHeight/2, enemyWidth, enemyHeight);
		}

// función para dibujar a la princesa
		function drawPrincess() {
			ctx.fillStyle = princessColor;
			ctx.fillRect(princessX-princessSide/2, princessY-princessSide/2, princessSide, princessSide);
		}

// función para pintar el árbol de habilidades y detectar clicks
		function drawSkillTree() {
			ctx.fillStyle = "white";
			ctx.fillRect(0, 0, canvas.width/2, canvas.height-100);
			ctx.fillStyle = "black";
			ctx.font = "30px Arial";
			ctx.fillText("Árbol de habilidades", 50, 50);
			ctx.fillText(skillPoints+" puntos de habilidad", 50, 100);

ctx.fillStyle = skillsUnlocked[0] ? "green" : "red";
			ctx.fillRect(50, 150, 50, 50);
			ctx.fillStyle = "black";
			ctx.fillText("Habilidad 1", 120, 180);
			ctx.fillText("Costo: 5", 120, 220);

ctx.fillStyle = skillsUnlocked[1] ? "green" : "red";
			ctx.fillRect(50, 250, 50, 50);
			ctx.fillStyle = "black";
			ctx.fillText("Habilidad 2", 120, 280);
			ctx.fillText("Costo: 10", 120, 320);

ctx.fillStyle = skillsUnlocked[2] ? "green" : "red";
			ctx.fillRect(50, 350, 50, 50);
			ctx.fillStyle = "black";
			ctx.fillText("Habilidad 3", 120, 380);
			ctx.fillText("Costo: 20", 120, 420);

canvas.addEventListener("mousedown", function(event) {
				if (event.clientX < canvas.width/2 && event.clientY > canvas.height-100) {
					if (event.clientX >= 50 && event.clientX <= 100) {
						if (event.clientY >= 150 && event.clientY <= 200) {
							if (!skillsUnlocked[0] && skillPoints >= 5) {
								skillPoints -= 5;
								skillsUnlocked[0] = true;
							}
						} else if (event.clientY >= 250 && event.clientY <= 300) {
							if (!skillsUnlocked[1] && skillPoints >= 10) {
								skillPoints -= 10;
								skillsUnlocked[1] = true;
							}
						} else if (event.clientY >= 350 && event.clientY <= 400) {
							if (!skillsUnlocked[2] && skillPoints >= 20) {
								skillPoints -= 20;
								skillsUnlocked[2] = true;
							}
						}
					}
				}
			});
		}

// variables para detectar teclas presionadas
		var keys = {};

// función para detectar teclas presionadas
		function handleKeyDown(event) {
			keys[event.keyCode] = true;
		}

// función para detectar teclas liberadas
		function handleKeyUp(event) {
			keys[event.keyCode] = false;
		}

// función para actualizar el score en la pantalla
		function displayScore() {
			ctx.fillStyle = "black";
			ctx.font = "30px Arial";
			ctx.fillText("Score: "+score, canvas.width-200, 50);
		}

// función para mostrar los puntos de habilidad en la pantalla
		function displaySkillPoints() {
			ctx.fillStyle = "black";
			ctx.font = "20px Arial";
			ctx.fillText("Puntos de habilidad: "+skillPoints, 20, canvas.height-50);
		}

// función para actualizar el canvas cada frame
		function updateCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

movePlayer();
			drawEnemies();
			drawPrincess();
			drawSkillTree();
			displayScore();
			displaySkillPoints();

requestAnimationFrame(updateCanvas);
		}

// función que se ejecuta al cargar la página
		window.onload = function() {
			document.addEventListener("keydown", handleKeyDown);
			document.addEventListener("keyup", handleKeyUp);
			updateCanvas();
		}
	</script>
</body>
</html>