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

No:1216

214

←

Prev Next

→

A game where the main character is a red circle wi..ALL
Developer User3280｜Date and time 23/6/18 8:36:40
Build time 46.35 sec｜Game capacity 4.266KB｜

Script

Juego de Círculo Rojo

El juego consiste en controlar al personaje círculo rojo con brazos y piernas para rescatar al triángulo azul con brazos y piernas, que se encuentra en alguna parte fuera de la pantalla. Pero para llegar al triángulo, el círculo debe vencer a todos los cuadrados amarillos con brazos y piernas que aparezcan en la pantalla. El círculo se mueve con las teclas de dirección o las teclas W, A, S, y D, y para vencer a los cuadrados, debe tocarlos. El juego termina cuando se han vencido a todos los cuadrados y se ha rescatado al triángulo.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Juego de Círculo Rojo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			background-color: #333;
			border: 2px solid white;
		}
	</style>
</head>
<body>
	<h1>Juego de Círculo Rojo</h1>
	<canvas id="gameCanvas"></canvas>

// Función para crear un cuadrado
		function Square(x, y) {
			this.x = x;
			this.y = y;
			this.width = squareWidth;
			this.height = squareHeight;
			this.color = squareColor;
			this.speed = squareSpeed;
			this.draw = function() {
				canvasContext.fillStyle = this.color;
				canvasContext.fillRect(this.x, this.y, this.width, this.height);
			};
			this.move = function() {
				this.x += this.speed;
				if (this.x + this.width > canvas.width || this.x < 0) {
					this.speed *= -1;
				}
			};
		}

// Función para crear y actualizar los cuadrados
		function createSquares() {
			for (var i = 0; i < numberOfSquares; i++) {
				var x = Math.floor(Math.random() * canvas.width);
				var y = Math.floor(Math.random() * canvas.height);
				squares.push(new Square(x, y));
			}
		}
		function updateSquares() {
			for (var i = 0; i < squares.length; i++) {
				squares[i].move();
				squares[i].draw();
			}
		}

// Función para dibujar y mover el círculo
		function drawCircle() {
			canvasContext.fillStyle = "red";
			canvasContext.beginPath();
			canvasContext.arc(circleX, circleY, circleRadius, 0, Math.PI * 2, true);
			canvasContext.fill();
		}
		function moveCircle() {
			if (keyIsDown("ArrowLeft") || keyIsDown("KeyA")) {
				circleX -= circleSpeed;
			}
			if (keyIsDown("ArrowRight") || keyIsDown("KeyD")) {
				circleX += circleSpeed;
			}
			if (keyIsDown("ArrowUp") || keyIsDown("KeyW")) {
				circleY -= circleSpeed;
			}
			if (keyIsDown("ArrowDown") || keyIsDown("KeyS")) {
				circleY += circleSpeed;
			}
		}

// Función para detectar colisiones entre el círculo y los cuadrados
		function checkCollisions() {
			for (var i = 0; i < squares.length; i++) {
				if (circleX + circleRadius > squares[i].x && circleX - circleRadius < squares[i].x + squares[i].width &&
					circleY + circleRadius > squares[i].y && circleY - circleRadius < squares[i].y + squares[i].height) {
					squares.splice(i, 1);
				}
			}
			if (squares.length === 0) {
				alert("¡Ganaste! Rescatate a ti mismo, Círculo Rojo!");
				window.location.reload();
			}
		}

// Funciones de teclado
		var keyState = {};
		document.addEventListener("keydown", function(e) {
			keyState[e.code] = true;
		});
		document.addEventListener("keyup", function(e) {
			keyState[e.code] = false;
		});
		function keyIsDown(key) {
			return keyState.hasOwnProperty(key) && keyState[key] === true;
		}

// Función principal del juego
		function gameLoop() {
			canvasContext.clearRect(0, 0, canvas.width, canvas.height);
			drawCircle();
			moveCircle();
			updateSquares();
			checkCollisions();
			setTimeout(function() {
				requestAnimationFrame(gameLoop);
			}, 1000 / fps);
		}

// Función de inicialización del juego
		window.onload = function() {
			canvas = document.getElementById("gameCanvas");
			canvasContext = canvas.getContext("2d");
			canvas.width = window.innerWidth - 20;
			canvas.height = window.innerHeight - 100;

createSquares();
			gameLoop();
		};
	</script>
</body>
</html>