AI game creator

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

No:27687

←

Prev Next

→

Block Breaker
Developer User13758｜Date and time 23/12/8 6:14:28
Build time 37.028 sec｜Game capacity 4.692KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Block Breaker</title>
	<style>
		body {
			margin: 0;
			overflow: hidden;
		}

canvas {
			background: #f2f2f2;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<script>
		// Enclosing the game code inside script tags

// Initializing the canvas and context
		const canvas = document.createElement('canvas');
		const context = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		document.body.appendChild(canvas);

// Defining the paddle
		const paddleWidth = 100;
		const paddleHeight = 10;
		const paddle = {
			x: canvas.width / 2 - paddleWidth / 2,
			y: canvas.height - paddleHeight - 10,
			width: paddleWidth,
			height: paddleHeight,
			dx: 5
		};

// Defining the ball
		const ball = {
			x: canvas.width / 2,
			y: paddle.y - 10,
			radius: 10,
			speed: 4,
			dx: 4 * (Math.random() * 2 - 1),
			dy: -4
		};

// Defining the bricks
		const brickRowCount = 5;
		const brickColumnCount = 7;
		const brickWidth = 80;
		const brickHeight = 20;
		const brickPadding = 10;
		const brickOffsetTop = 30;
		const brickOffsetLeft = 30;
		const bricks = [];
		for (let row = 0; row < brickRowCount; row++) {
			bricks[row] = [];
			for (let col = 0; col < brickColumnCount; col++) {
				bricks[row][col] = {
					x: col * (brickWidth + brickPadding) + brickOffsetLeft,
					y: row * (brickHeight + brickPadding) + brickOffsetTop,
					width: brickWidth,
					height: brickHeight,
					isBroken: false
				};
			}
		}

// Variables for game control
		let score = 0;
		let lives = 3;

// Function to draw the paddle
		function drawPaddle() {
			context.beginPath();
			context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
			context.fillStyle = '#0095DD';
			context.fill();
			context.closePath();
		}

// Function to move the paddle
		function movePaddle() {
			if (paddle.x + paddle.width > canvas.width) {
				paddle.x = canvas.width - paddle.width;
			}

if (paddle.x < 0) {
				paddle.x = 0;
			}
		}

// Function to draw the ball
		function drawBall() {
			context.beginPath();
			context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			context.fillStyle = '#0095DD';
			context.fill();
			context.closePath();
		}

// Function to move the ball
		function moveBall() {
			ball.x += ball.dx;
			ball.y += ball.dy;

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
				ball.dx *= -1;
			}

if (ball.y - ball.radius < 0) {
				ball.dy *= -1;
			}

if (
				ball.x - ball.radius > paddle.x &&
				ball.x + ball.radius < paddle.x + paddle.width &&
				ball.y + ball.radius > paddle.y
			) {
				ball.dy = -ball.speed;
			}

for (let row = 0; row < brickRowCount; row++) {
				for (let col = 0; col < brickColumnCount; col++) {
					const brick = bricks[row][col];
					if (!brick.isBroken) {
						if (
							ball.x + ball.radius > brick.x &&
							ball.x - ball.radius < brick.x + brick.width &&
							ball.y + ball.radius > brick.y &&
							ball.y - ball.radius < brick.y + brick.height
						) {
							ball.dy *= -1;
							brick.isBroken = true;
							score++;
							if (score === brickRowCount * brickColumnCount) {
								alert('¡Felicidades! ¡Has ganado!');
								document.location.reload();
							}
						}
					}
				}
			}

if (ball.y + ball.radius > canvas.height) {
				lives--;
				if (!lives) {
					alert('¡Juego terminado! Tu puntuación final es: ' + score);
					document.location.reload();
				} else {
					ball.x = canvas.width / 2;
					ball.y = paddle.y - 10;
					ball.dx = 4 * (Math.random() * 2 - 1);
					ball.dy = -4;
				}
			}
		}

// Function to draw the bricks
		function drawBricks() {
			for (let row = 0; row < brickRowCount; row++) {
				for (let col = 0; col < brickColumnCount; col++) {
					const brick = bricks[row][col];
					if (!brick.isBroken) {
						context.beginPath();
						context.rect(brick.x, brick.y, brick.width, brick.height);
						context.fillStyle = '#0095DD';
						context.fill();
						context.closePath();
					}
				}
			}
		}

// Function to handle user input
		function handleInput(event) {
			if (event.key === 'ArrowLeft') {
				paddle.x -= paddle.dx;
			} else if (event.key === 'ArrowRight') {
				paddle.x += paddle.dx;
			}
		}

// Event listener for keyboard input
		document.addEventListener('keydown', handleInput);

// Function to update the game state
		function update() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawPaddle();
			drawBall();
			drawBricks();
			movePaddle();
			moveBall();
			requestAnimationFrame(update);
		}

// Starting the game
		update();
	</script>
</body>
</html>