I would like to know your limits! Block Crumble's game

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

No:3108

1573

←

Prev Next

→

I would like to know your limits! Block Crumble
Developer User3589｜Date and time 23/6/23 21:53:13
Build time 50.706 sec｜Game capacity 4.293KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ブロック崩しゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// ゲームオブジェクト
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const paddle = {
			x: CANVAS_WIDTH / 2 - PADDLE_WIDTH / 2,
			y: CANVAS_HEIGHT - PADDLE_HEIGHT - 10,
			width: PADDLE_WIDTH,
			height: PADDLE_HEIGHT
		};
		const ball = {
			x: CANVAS_WIDTH / 2,
			y: CANVAS_HEIGHT - PADDLE_HEIGHT - 10 - BALL_RADIUS,
			radius: BALL_RADIUS,
			speed: BALL_SPEED,
			dx: BALL_SPEED,
			dy: -BALL_SPEED
		};
		const blocks = [];
		for (let i = 0; i < BLOCK_ROWS; i++) {
			blocks[i] = [];
			for (let j = 0; j < BLOCK_COLS; j++) {
				blocks[i][j] = {
					x: j * BLOCK_WIDTH + 10,
					y: i * BLOCK_HEIGHT + 30,
					width: BLOCK_WIDTH,
					height: BLOCK_HEIGHT,
					status: 1
				}
			}
		}
		let score = 0;
		let lives = 3;

// イベントリスナー
		document.addEventListener("mousemove", movePaddle);

// 関数
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.closePath();
		}

function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
			ctx.fillStyle = "blue";
			ctx.fill();
			ctx.closePath();
		}

function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + score, 8, 20);
		}

function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Lives: " + lives, CANVAS_WIDTH - 65, 20);
		}

function moveBall() {
			ball.x += ball.dx;
			ball.y += ball.dy;

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 >= paddle.y && ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
				ball.dy = -ball.dy;
			} else if (ball.y + ball.radius >= CANVAS_HEIGHT) {
				lives--;
				if (!lives) {
					alert("ゲームオーバー");
					location.reload();
				} else {
					ball.x = CANVAS_WIDTH / 2;
					ball.y = CANVAS_HEIGHT - PADDLE_HEIGHT - 10 - BALL_RADIUS;
					ball.dx = BALL_SPEED;
					ball.dy = -BALL_SPEED;
					paddle.x = CANVAS_WIDTH / 2 - PADDLE_WIDTH / 2;
				}
			}
		}

function movePaddle(e) {
			let relativeX = e.clientX - canvas.offsetLeft;
			if (relativeX > 0 && relativeX < CANVAS_WIDTH) {
				paddle.x = relativeX - paddle.width / 2;
			}
		}

function draw() {
			ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

drawBall();
			drawPaddle();
			drawBlock();
			drawScore();
			drawLives();

collisionDetection();
			moveBall();

requestAnimationFrame(draw);
		}

draw();
	</script>
</body>
</html>