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:1837

414

←

Prev Next

→

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

Script

Puntaje: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Juego RPG del Círculo Rojo</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			margin: 0 auto;
			background-color: #c0c0c0;
			text-align: center;
			font-size: 24px;
		}
		#canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
		}
		#puntaje {
			font-size: 32px;
		}
		#habilidades {
			margin: 20px auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			max-width: 90%;
		}
		.habilidad {
			margin: 10px;
			padding: 10px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 6px 6px 12px #aaa;
			cursor: pointer;
		}
		.habilidad:hover {
			transform: scale(1.1);
			box-shadow: 8px 8px 16px #aaa;
		}
		.habilidad img {
			height: 80px;
			width: 80px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<div id="puntaje">Puntaje: 0</div>
	<div id="habilidades"></div>

var circle = {
			x: canvas.width/2,
			y: canvas.height/2,
			r: 20,
			dx: 5,
			dy: 5
		};

var score = 0;
		var yellowSquares = [];

for (let i = 0; i < 10; i++) {
			yellowSquares.push({
				x: Math.random() * canvas.width,
				y: Math.random() * canvas.height,
				side: 50
			});
		}

draw();

canvas.addEventListener("touchstart", touchHandler);

function touchHandler(e) {
			circle.dx *= -1;
			circle.dy *= -1;
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#f00";
			ctx.beginPath();
			ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
			ctx.fill();

for (let i = 0; i < yellowSquares.length; i++) {
				ctx.fillStyle = "#ff0";
				ctx.fillRect(yellowSquares[i].x, yellowSquares[i].y, yellowSquares[i].side, yellowSquares[i].side);

if (detectarColision(circle, yellowSquares[i])) {
					yellowSquares.splice(i, 1);
					score += 10;
					document.getElementById("puntaje").innerHTML = "Puntaje: " + score;

if (score % 50 == 0) {
						desplegarHabilidades();
					}
				}
			}

if (circle.x - circle.r < 0 || circle.x + circle.r > canvas.width) {
				circle.dx *= -1;
			}
			if (circle.y - circle.r < 0 || circle.y + circle.r > canvas.height) {
				circle.dy *= -1;
			}
			circle.x += circle.dx;
			circle.y += circle.dy;

requestAnimationFrame(draw);
		}

function detectarColision(circle, square) {
			let distX = Math.abs(circle.x - square.x - square.side/2);
			let distY = Math.abs(circle.y - square.y - square.side/2);

if (distX > (square.side/2 + circle.r)) {
				return false;
			}
			if (distY > (square.side/2 + circle.r)) {
				return false;
			}

if (distX <= (square.side/2)) {
				return true;
			}
			if (distY <= (square.side/2)) {
				return true;
			}

let dx = distX - square.side/2;
			let dy = distY - square.side/2;
			return (dx*dx + dy*dy <= (circle.r*circle.r));
		}

function desplegarHabilidades() {
			const habilidades = document.getElementById("habilidades");

for (let i = 0; i < 3; i++) {
				const img = document.createElement("img");

img.setAttribute("src", "images/habilidad" + i + ".png");
				img.setAttribute("alt", "Habilidad " + i);
				img.classList.add("habilidad");

img.addEventListener("click", function() {
					consumirPuntos(i);
					habilidades.removeChild(img);
				});

habilidades.appendChild(img);
			}
		}

function consumirPuntos(index) {
			if (score >= (index + 1) * 50) {
				score -= (index + 1) * 50;
				document.getElementById("puntaje").innerHTML = "Puntaje: " + score;

switch (index) {
					case 0:
						circle.r += 5;
						break;
					case 1:
						yellowSquares.push({
							x: Math.random() * canvas.width,
							y: Math.random() * canvas.height,
							side: 50
						});
						break;
					case 2:
						circle.dx *= -1;
						circle.dy *= -1;
						break;
				}
			}
		}

</script>
</body>
</html>