An rpg game where we control a red circle with black pupil 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:1836

607

←

Prev Next

→

An rpg game where we control a red circle with bla..ALL
Developer User3408｜Date and time 23/6/19 4:23:43
Build time 37.093 sec｜Game capacity 2.987KB｜

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>RPG Circle Game</title>
</head>
<body>
	<canvas id="gameCanvas" width="400" height="400"></canvas>
	
	<script>
		// Definimos el canvas
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		
		// Variables del juego
		var player = {
			x: canvas.width/2,
			y: canvas.height/2,
			radius: 20,
			color: "red",
			score: 0,
			abilities: 0
		};
		var enemies = [];
		var enemyCount = 0;
		
		// Funciones de dibujo
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
		
		function drawPlayer() {
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2);
			ctx.fillStyle = player.color;
			ctx.fill();
			ctx.closePath();
		}
		
		function drawEnemies() {
			for (var i = 0; i < enemies.length; i++) {
				ctx.beginPath();
				ctx.rect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
				ctx.fillStyle = "yellow";
				ctx.fill();
				ctx.closePath();
			}
		}
		
		function drawAbilities() {
			for (var i = 0; i < player.abilities; i++) {
				ctx.beginPath();
				ctx.arc(canvas.width - 30*i - 15, canvas.height - 30, 10, 0, Math.PI*2);
				ctx.fillStyle = "green";
				ctx.fill();
				ctx.closePath();
			}
		}
		
		function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + player.score, 10, 20);
		}
		
		function drawGame() {
			clearCanvas();
			drawPlayer();
			drawEnemies();
			drawAbilities();
			drawScore();
		}
		
		// Funciones de juego
		function spawnEnemy() {
			var enemy = {
				x: Math.random()*(canvas.width - 50) + 25,
				y: Math.random()*(canvas.height - 50) + 25,
				width: 50,
				height: 50,
				alive: true
			};
			enemies.push(enemy);
			enemyCount++;
		}
		
		function handleInput() {
			// Movimiento del jugador con el dedo o ratón
			canvas.addEventListener("touchmove", function(event) {
				player.x = event.touches[0].clientX - canvas.offsetLeft;
				player.y = event.touches[0].clientY - canvas.offsetTop;
			});
			canvas.addEventListener("mousemove", function(event) {
				player.x = event.clientX - canvas.offsetLeft;
				player.y = event.clientY - canvas.offsetTop;
			});
			
			// Usar habilidades con el click o tap
			canvas.addEventListener("click", function(event) {
				if (player.abilities > 0) {
					for (var i = 0; i < enemies.length; i++) {
						if (enemies[i].alive) {
							var distance = Math.sqrt((enemies[i].x - player.x)*(enemies[i].x - player.x) + (enemies[i].y - player.y)*(enemies[i].y - player.y));
							if (distance < player.radius + 20) {
								enemies[i].alive = false;
								player.abilities--;
								player.score += 10;
							}
						}
					}
				}
			});
		}
		
		function gameLoop() {
			if (enemyCount < 5) {
				spawnEnemy();
			}
			drawGame();
			window.requestAnimationFrame(gameLoop);
		}
		
		// Iniciamos el juego
		handleInput();
		gameLoop();
	</script>
</body>
</html>