AI game creator

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

No:13857

←

Prev Next

→

Block Breaker
Developer User6030｜Date and time 23/8/30 5:28:06
Build time 51.213 sec｜Game capacity 6.443KB｜

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 Game</title>
	<style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
         }

#gameCanvas {
			background-color: #000;
		}

#paddle {
			position: absolute;
			width: 80px;
			height: 10px;
			background-color: #fff;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
		}

#ball {
			position: absolute;
			width: 10px;
			height: 10px;
			background-color: #fff;
			border-radius: 50%;
		}

.brick {
			width: 50px;
			height: 20px;
			margin: 3px;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<div id="gameCanvas" width="480" height="320">
		<div id="paddle"></div>
		<div id="ball"></div>
		<div class="brick"></div>
		
	</div>

window.onload = function() {
			// Get canvas element
			var canvas = document.getElementById("gameCanvas");
			var context = canvas.getContext("2d");

// Set canvas dimensions
			canvas.width = canvasWidth;
			canvas.height = canvasHeight;

// Calculate number of bricks per row/column
			var brickRows = Math.floor(canvasHeight / (brickHeight + brickMargin));
			var brickColumns = Math.floor(canvasWidth / (brickWidth + brickMargin));

// Generate bricks
			var bricks = [];
			for (var c = 0; c < brickColumns; c++) {
				bricks[c] = [];
				for (var r = 0; r < brickRows; r++) {
					bricks[c][r] = { x: 0, y: 0, isVisible: true };
				}
			}

// Paddle object
			var paddle = {
				x: canvasWidth / 2 - paddleWidth / 2,
				y: canvasHeight - 30,
				width: paddleWidth,
				height: 10
			};

// Ball object
			var ball = {
				x: canvasWidth / 2,
				y: canvasHeight - 50,
				radius: ballRadius
			};

// Keyboard event listeners
			document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);

var leftPressed = false;
			var rightPressed = false;

// Event handlers for keyboard inputs
			function keyDownHandler(event) {
				if (event.keyCode === 37) {
					leftPressed = true;
				} else if (event.keyCode === 39) {
					rightPressed = true;
				}
			}

function keyUpHandler(event) {
				if (event.keyCode === 37) {
					leftPressed = false;
				} else if (event.keyCode === 39) {
					rightPressed = false;
				}
			}

// Collision detection functions
			function isCollidingWithPaddle() {
				if (
					ball.x + ball.radius > paddle.x &&
					ball.x - ball.radius < paddle.x + paddle.width &&
					ball.y + ball.radius > paddle.y
				) {
					return true;
				}
				return false;
			}

function isCollidingWithBrick(x, y) {
				if (
					ball.x + ball.radius > x &&
					ball.x - ball.radius < x + brickWidth &&
					ball.y + ball.radius > y &&
					ball.y - ball.radius < y + brickHeight
				) {
					return true;
				}
				return false;
			}

// Draw objects on the canvas
			function draw() {
				context.clearRect(0, 0, canvas.width, canvas.height);
				drawPaddle();
				drawBricks();
				drawBall();
				drawScore();
				drawLives();
				collisionDetection();

// Ball movement
				ball.x += ballSpeedX;
				ball.y += ballSpeedY;

// Paddle movement
				if (leftPressed && paddle.x > 0) {
					paddle.x -= paddleSpeed;
				} else if (rightPressed && paddle.x < canvas.width - paddle.width) {
					paddle.x += paddleSpeed;
				}

// Ball collision with walls
				if (
					ball.x + ball.radius > canvasWidth ||
					ball.x - ball.radius < 0
				) {
					ballSpeedX *= -1;
				}
				if (ball.y - ball.radius < 0) {
					ballSpeedY *= -1;
				}

// Ball collision with paddle
				if (isCollidingWithPaddle()) {
					ballSpeedY *= -1;
				}

// Game over condition
				if (ball.y + ball.radius > canvasHeight) {
					lives--;
					if (lives === 0) {
						gameOver();
					} else {
						resetBall();
					}
				}

// Winning condition
				if (score === brickColumns * brickRows) {
					gameOver(true);
				}

requestAnimationFrame(draw);
			}

// Draw paddle on the canvas
			function drawPaddle() {
				context.beginPath();
				context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
				context.fillStyle = "#fff";
				context.fill();
				context.closePath();
			}

// Draw bricks on the canvas
			function drawBricks() {
				for (var c = 0; c < brickColumns; c++) {
					for (var r = 0; r < brickRows; r++) {
						if (bricks[c][r].isVisible) {
							var brickX = c * (brickWidth + brickMargin);
							var brickY = r * (brickHeight + brickMargin);
							bricks[c][r].x = brickX;
							bricks[c][r].y = brickY;
							context.beginPath();
							context.rect(brickX, brickY, brickWidth, brickHeight);
							context.fillStyle = "#fff";
							context.fill();
							context.closePath();
						}
					}
				}
			}

// Draw ball on the canvas
			function drawBall() {
				context.beginPath();
				context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
				context.fillStyle = "#fff";
				context.fill();
				context.closePath();
			}

// Draw score on the canvas
			function drawScore() {
				context.font = "16px Arial";
				context.fillStyle = "#fff";
				context.fillText("Score: " + score, 8, 20);
			}

// Draw lives on the canvas
			function drawLives() {
				context.font = "16px Arial";
				context.fillStyle = "#fff";
				context.fillText("Lives: " + lives, canvas.width - 85, 20);
			}

// Collision detection between ball and bricks
			function collisionDetection() {
				for (var c = 0; c < brickColumns; c++) {
					for (var r = 0; r < brickRows; r++) {
						var brick = bricks[c][r];
						if (brick.isVisible && isCollidingWithBrick(brick.x, brick.y)) {
							ballSpeedY *= -1;
							brick.isVisible = false;
							score++;
						}
					}
				}
			}

// Reset ball position and speed
			function resetBall() {
				ball.x = canvasWidth / 2;
				ball.y = canvasHeight - 50;
				ballSpeedX = 2;
				ballSpeedY = -2;
			}

// Game over function
			function gameOver(hasWon) {
				alert(hasWon ? "Congratulations! You won!" : "Game Over!");
				document.location.reload();
			}

// Start the game
			draw();
		}
	</script>
</body>
</html>