AI game creator

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

No:43207

114

←

Prev Next

→

Bricks king
Developer User18058｜Date and time 24/2/14 22:21:10
Build time 25.618 sec｜Game capacity 4.798KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Bricks King - Juego</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<script>
		// Variables globales
		var canvas;
		var ctx;
		var ball;
		var paddle;
		var bricks;
		var score;
		var lives;

// Valores iniciales
		function setup() {
			canvas = document.createElement("canvas");
			canvas.width = 320;
			canvas.height = 480;
			ctx = canvas.getContext("2d");
			document.body.appendChild(canvas);

ball = {
				x: canvas.width / 2,
				y: canvas.height - 30,
				radius: 10,
				dx: 3,
				dy: -3
			};

paddle = {
				width: 75,
				height: 10,
				x: (canvas.width - 75) / 2,
				downPressed: false,
				upPressed: false
			};

bricks = [];
			createBricks();

score = 0;
			lives = 3;

document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);

draw();
		}

// Dibuja todos los elementos del juego
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			drawBall();
			drawPaddle();
			drawBricks();
			drawScore();
			drawLives();

collisionDetection();

// Movimiento de la pelota
			ball.x += ball.dx;
			ball.y += ball.dy;

// Rebotar en las paredes y en la paleta
			if (ball.x + ball.radius >= canvas.width || ball.x - ball.radius <= 0)
				ball.dx = -ball.dx;

if (ball.y - ball.radius <= 0)
				ball.dy = -ball.dy;
			else if (ball.y + ball.radius > canvas.height) {
				// Perder una vida si la pelota cae fuera de la pantalla
				if (lives > 1) {
					lives--;
					resetBall();
				} else {
					// Fin del juego si se acaban las vidas
					alert("¡Has perdido! Vuelve a intentarlo");
					document.location.reload();
				}
			}

// Movimiento de la paleta
			if (paddle.downPressed && paddle.x < canvas.width - paddle.width)
				paddle.x += 7;
			else if (paddle.upPressed && paddle.x > 0)
				paddle.x -= 7;

requestAnimationFrame(draw);
		}

// Dibuja la pelota en el canvas
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

// Dibuja la paleta en el canvas
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

// Dibuja los bloques en el canvas
		function drawBricks() {
			for (var r = 0; r < bricks.length; r++) {
				for (var c = 0; c < bricks[r].length; c++) {
					if (bricks[r][c].status === 1) {
						var brickX = (c * (80 + 10)) + 30;
						var brickY = (r * (20 + 10)) + 30;

bricks[r][c].x = brickX;
						bricks[r][c].y = brickY;

ctx.beginPath();
						ctx.rect(brickX, brickY, 80, 20);
						ctx.fillStyle = "#0095DD";
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}

// Dibuja el puntaje en el canvas
		function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Puntaje: " + score, 8, 20);
		}

// Dibuja la cantidad de vidas en el canvas
		function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Vidas: " + lives, canvas.width - 80, 20);
		}

// Detección de colisiones entre la pelota y los bloques
		function collisionDetection() {
			for (var r = 0; r < bricks.length; r++) {
				for (var c = 0; c < bricks[r].length; c++) {
					var b = bricks[r][c];
					if (b.status === 1) {
						if (ball.x > b.x && ball.x < b.x + 80 && ball.y > b.y && ball.y < b.y + 20) {
							ball.dy = -ball.dy;
							b.status = 0;
							score++;
							if (score === bricks.length * bricks[r].length) {
								alert("¡Felicidades! ¡Has ganado!");
								document.location.reload();
							}
						}
					}
				}
			}
		}

// Reinicia la posición de la pelota
		function resetBall() {
			ball.x = canvas.width / 2;
			ball.y = canvas.height - 30;
			ball.dx = 3;
			ball.dy = -3;
		}

// Evento de tecla presionada
		function keyDownHandler(e) {
			if (e.key === "Right" || e.key === "ArrowRight")
				paddle.downPressed = true;
			else if (e.key === "Left" || e.key === "ArrowLeft")
				paddle.upPressed = true;
		}

// Evento de tecla soltada
		function keyUpHandler(e) {
			if (e.key === "Right" || e.key === "ArrowRight")
				paddle.downPressed = false;
			else if (e.key === "Left" || e.key === "ArrowLeft")
				paddle.upPressed = false;
		}

// Crea la matriz de bloques
		function createBricks() {
			for (var r = 0; r < 5; r++) {
				bricks[r] = [];
				for (var c = 0; c < 4; c++) {
					bricks[r][c] = { x: 0, y: 0, status: 1 };
				}
			}
		}

// Iniciar el juego al cargar la página
		window.onload = function () {
			setup();
		};
	</script>
</body>
</html>