A game where the protagonist is a red circle with eyes that can get skills with a skill tree but to get the skills he would have to spend points but to get points he would have to defeat yellow squares or help blue triangles to rescue at the end.'s game

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

No:1259

229

←

Prev Next

→

A game where the protagonist is a red circle with ..ALL
Developer User3280｜Date and time 23/6/18 9:25:07
Build time 78.015 sec｜Game capacity 7.002KB｜

Script

a la princesa cuadrada de las manos del malvado rectángulo negro.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

a la princesa cuadrada de las manos del malvado rectángulo negro.

<!DOCTYPE html>
<html>
<head>
	<title>Mi juego</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		#canvas {
			background-color: black;
			display: block;
			margin: 0 auto;
			border: 2px solid white;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	<script>
		//Variables
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var circleSize = 20;
		var circleX = canvas.width/2;
		var circleY = canvas.height/2;
		var circleColor = "red";
		var circleEyeColor = "white";
		var circleEyeSize = 6;
		var squareSize = 30;
		var squareColor = "yellow";
		var triangleSize = 30;
		var triangleColor = "blue";
		var triangleY = canvas.height - triangleSize;
		var triangleSpeed = 2;
		var points = 0;
		var skills = [];
		var selectedSkill = null;
		var selectedSkillIndex = null;
		var tree = [
			{
				"name": "Ataque",
				"description": "Aumenta el daño del círculo",
				"points": 1
			},
			{
				"name": "Velocidad",
				"description": "Aumenta la velocidad del círculo",
				"points": 1
			},
			{
				"name": "Salto",
				"description": "Permite al círculo saltar más alto",
				"points": 2
			}
		];
		
		//Funciones
		function drawCircle() {
			ctx.beginPath();
			ctx.arc(circleX, circleY, circleSize, 0, Math.PI*2);
			ctx.fillStyle = circleColor;
			ctx.fill();
			ctx.closePath();

ctx.beginPath();
			ctx.arc(circleX-circleSize/2, circleY-circleSize/2, circleEyeSize, 0, Math.PI*2);
			ctx.fillStyle = circleEyeColor;
			ctx.fill();
			ctx.closePath();

ctx.beginPath();
			ctx.arc(circleX+circleSize/2,circleY-circleSize/2,circleEyeSize,0,Math.PI*2);
			ctx.fillStyle = circleEyeColor;
			ctx.fill();
			ctx.closePath();
		}

function drawSquare(x, y) {
			ctx.beginPath();
			ctx.rect(x, y, squareSize, squareSize);
			ctx.fillStyle = squareColor;
			ctx.fill();
			ctx.closePath();
		}

function drawTriangle() {
			ctx.beginPath();
			ctx.moveTo(canvas.width/2, triangleY);
			ctx.lineTo(canvas.width/2 + triangleSize/2, triangleY + triangleSize);
			ctx.lineTo(canvas.width/2 - triangleSize/2, triangleY + triangleSize);
			ctx.fillStyle = triangleColor;
			ctx.fill();
			ctx.closePath();
		}

function moveTriangle() {
			if (triangleY <= 0) {
				points += 10;
				triangleY = canvas.height - triangleSize;
			} else {
				triangleY -= triangleSpeed;
			}
		}

function drawTree() {
			ctx.beginPath();
			ctx.rect(10, 10, 200, 200);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.closePath();

ctx.beginPath();
			ctx.font = "18px Arial";
			ctx.textAlign = "center";
			ctx.fillStyle = "black";
			ctx.fillText("Árbol de habilidades", 110, 30);
			ctx.closePath();

for (var i = 0; i < tree.length; i++) {
				var x = 20 + (i % 2) * 90;
				var y = 60 + Math.floor(i / 2) * 50;
				ctx.beginPath();
				ctx.rect(x, y, 80, 40);
				if (skills.includes(i)) {
					ctx.fillStyle = "green";
				} else {
					ctx.fillStyle = "gray";
				}
				ctx.fill();
				ctx.closePath();

ctx.beginPath();
				ctx.font = "12px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "black";
				ctx.fillText(tree[i].name, x + 40, y + 18);
				ctx.fillText(tree[i].description, x + 40, y + 30);
				ctx.closePath();

ctx.beginPath();
				ctx.font = "10px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "white";
				ctx.fillText(tree[i].points, x + 70, y + 8);
				ctx.closePath();
			}

ctx.beginPath();
			ctx.rect(10, 220, 200, 30);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.closePath();

ctx.beginPath();
			ctx.font = "18px Arial";
			ctx.textAlign = "center";
			ctx.fillStyle = "black";
			ctx.fillText("Habilidades disponibles: " + points, 110, 240);
			ctx.closePath();

if (selectedSkill != null) {
				ctx.beginPath();
				ctx.rect(10, 260, 200, 50);
				ctx.fillStyle = "white";
				ctx.fill();
				ctx.closePath();

ctx.beginPath();
				ctx.font = "16px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "black";
				ctx.fillText(selectedSkill.name, 110, 280);
				ctx.closePath();

ctx.beginPath();
				ctx.font = "12px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "black";
				ctx.fillText(selectedSkill.description, 110, 300);
				ctx.closePath();

ctx.beginPath();
				ctx.rect(10, 320, 200, 30);
				if (points >= selectedSkill.points) {
					ctx.fillStyle = "green";
				} else {
					ctx.fillStyle = "gray";
				}
				ctx.fill();
				ctx.closePath();

ctx.beginPath();
				ctx.font = "18px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "white";
				ctx.fillText("Comprar (" + selectedSkill.points + ")", 110, 340);
				ctx.closePath();
			}
		}

function buySkill() {
			if (selectedSkill != null && points >= selectedSkill.points && !skills.includes(selectedSkillIndex)) {
				points -= selectedSkill.points;
				skills.push(selectedSkillIndex);
			}
		}

function selectSkill(event) {
			var mousePos = getMousePos(event);
			var x = mousePos.x;
			var y = mousePos.y;

if (y > 60 && y < 260) {
				var col = Math.floor((x - 20) / 90);
				var row = Math.floor((y - 60) / 50);
				var index = row * 2 + col;

if (index < tree.length) {
					selectedSkillIndex = index;
					selectedSkill = tree[index];
				} else {
					selectedSkillIndex = null;
					selectedSkill = null;
				}
			} else if (y > 260 && y < 310 && selectedSkill != null){
				buySkill();
			}
		}

function getMousePos(event) {
			var rect = canvas.getBoundingClientRect();
			return {
				x: event.clientX - rect.left,
				y: event.clientY - rect.top
			};
		}

//Eventos
		canvas.addEventListener("click", selectSkill, false);

//Bucle principal
		setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

drawCircle();
			drawTree();

if (points <= 0) {
				ctx.beginPath();
				ctx.font = "48px Arial";
				ctx.textAlign = "center";
				ctx.fillStyle = "white";
				ctx.fillText("Game Over", canvas.width/2, canvas.height/2);
				ctx.closePath();
			} else {
				moveTriangle();

if (circleY + circleSize > triangleY && circleX > canvas.width/2 - triangleSize/2 && circleX < canvas.width/2 + triangleSize/2) {
					points -= 5;
				}

if (circleY < circleSize/2) {
					ctx.beginPath();
					ctx.font = "48px Arial";
					ctx.textAlign = "center";
					ctx.fillStyle = "white";
					ctx.fillText("¡Ganaste!", canvas.width/2, canvas.height/2);
					ctx.closePath();
				}

for (var i = 0; i < skills.length; i++) {
					var skillIndex = skills[i];
					var skill = tree[skillIndex];

switch (skillIndex) {
						case 0:
							squareColor = "orange";
							break;
						case 1:
							circleSize = 25;
							break;
						case 2:
							circleColor = "pink";
							break;
					}
				}

drawSquare(canvas.width/2 - squareSize/2, triangleY - squareSize);
				drawTriangle();
			}
		}, 10);
	</script>
</body>
</html>