AI game creator

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

No:36895

←

Prev Next

→

Block Breaker
Developer User16913｜Date and time 24/1/19 5:52:33
Build time 25.169 sec｜Game capacity 5.081KB｜

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>
		canvas {
			border: 1px solid black;
			background-color: #f2f2f2;
		}
	</style>
</head>
<body>
	<script>
		// Game variables
		let canvas;
		let context;
		let ball;
		let paddle;
		let bricks;
		let gameOver;
		let score;

// Pictogram sprites
		const brickImage = new Image();
		brickImage.src = "pictogram_brick.png";

const paddleImage = new Image();
		paddleImage.src = "pictogram_paddle.png";

const ballImage = new Image();
		ballImage.src = "pictogram_ball.png";

// Pictogram dimensions
		const brickWidth = 50;
		const brickHeight = 20;
		const brickPadding = 10;
		const brickOffsetTop = 30;
		const brickOffsetLeft = 30;

const paddleWidth = 100;
		const paddleHeight = 20;

// Ball dimensions and speed
		const ballRadius = 10;
		let dx = 2;
		let dy = -2;

// Paddle controls
		let rightPressed = false;
		let leftPressed = false;

// Brick matrix
		const brickRowCount = 5;
		const brickColumnCount = 7;

// Functions to handle keyboard events
		function keyDownHandler(event) {
			if (event.key === "ArrowRight" || event.key === "Right") {
				rightPressed = true;
			} else if (event.key === "ArrowLeft" || event.key === "Left") {
				leftPressed = true;
			}
		}

function keyUpHandler(event) {
			if (event.key === "ArrowRight" || event.key === "Right") {
				rightPressed = false;
			} else if (event.key === "ArrowLeft" || event.key === "Left") {
				leftPressed = false;
			}
		}

// Initialize the game
		function init() {
			canvas = document.getElementById("gameCanvas");
			context = canvas.getContext("2d");
			document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);

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

paddle = {
				x: (canvas.width - paddleWidth) / 2,
				y: canvas.height - paddleHeight,
				width: paddleWidth,
				height: paddleHeight
			};

bricks = [];
			for (let c = 0; c < brickColumnCount; c++) {
				bricks[c] = [];
				for (let r = 0; r < brickRowCount; r++) {
					bricks[c][r] = {
						x: 0,
						y: 0,
						status: 1
					};
				}
			}

score = 0;
			gameOver = false;

draw();
		}

// Draw the game elements on the canvas
		function draw() {
			context.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();
			drawBall();
			drawPaddle();
			collisionDetection();

if (gameOver) {
				displayGameOver();
				return;
			}

scoreDisplay();

ball.x += ball.dx;
			ball.y += ball.dy;

if (ball.x + ball.dx > canvas.width - ballRadius || ball.x + ball.dx < ballRadius) {
				ball.dx = -ball.dx;
			}

if (ball.y + ball.dy < ballRadius) {
				ball.dy = -ball.dy;
			} else if (ball.y + ball.dy > canvas.height - ballRadius) {
				if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
					ball.dy = -ball.dy;
				} else {
					gameOver = true;
				}
			}

if (rightPressed && paddle.x < canvas.width - paddleWidth) {
				paddle.x += 5;
			} else if (leftPressed && paddle.x > 0) {
				paddle.x -= 5;
			}

requestAnimationFrame(draw);
		}

// Draw the bricks on the canvas
		function drawBricks() {
			for (let c = 0; c < brickColumnCount; c++) {
				for (let r = 0; r < brickRowCount; r++) {
					if (bricks[c][r].status === 1) {
						const brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
						const brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
						bricks[c][r].x = brickX;
						bricks[c][r].y = brickY;
						context.drawImage(brickImage, brickX, brickY, brickWidth, brickHeight);
					}
				}
			}
		}

// Draw the ball on the canvas
		function drawBall() {
			context.drawImage(ballImage, ball.x - ballRadius, ball.y - ballRadius, ballRadius * 2, ballRadius * 2);
		}

// Draw the paddle on the canvas
		function drawPaddle() {
			context.drawImage(paddleImage, paddle.x, paddle.y, paddle.width, paddle.height);
		}

// Handle collision detection with bricks
		function collisionDetection() {
			for (let c = 0; c < brickColumnCount; c++) {
				for (let r = 0; r < brickRowCount; r++) {
					const b = bricks[c][r];
					if (b.status === 1) {
						if (ball.x > b.x && ball.x < b.x + brickWidth && ball.y > b.y && ball.y < b.y + brickHeight) {
							ball.dy = -ball.dy;
							b.status = 0;
							score++;
							if (score === brickRowCount * brickColumnCount) {
								gameOver = true;
							}
						}
					}
				}
			}
		}

// Display the game over message
		function displayGameOver() {
			context.font = "36px Arial";
			context.fillStyle = "red";
			context.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
		}

// Display the score
		function scoreDisplay() {
			context.font = "20px Arial";
			context.fillStyle = "black";
			context.fillText("Score: " + score, brickOffsetLeft, canvas.height - 10);
		}

// Initialize the game when the page loads
		window.onload = function() {
			init();
		};
	</script>