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

No:3113

1449

←

Prev Next

→

Crumble Block Crumble
Developer User3589｜Date and time 23/6/23 22:01:17
Build time 54.839 sec｜Game capacity 5.006KB｜

Script

💥ブロック崩し💥

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ブロック崩し</title>
	<style type="text/css">
		canvas { display: block; }
	</style>
</head>
<body>
<div style="text-align: center;">
	<h1>💥ブロック崩し💥</h1>
	<canvas id="game" width="400" height="400"></canvas>
</div>
<script type="text/javascript">
	var canvas = document.getElementById("game");
	var ctx = canvas.getContext("2d");

// パドル
	var paddleWidth = 75;
	var paddleHeight = 10;
	var paddleX = (canvas.width - paddleWidth) / 2;
	var rightPressed = false;
	var leftPressed = false;

// ボール
	var ballRadius = 10;
	var ballColor = "red";
	var ballX = canvas.width / 2;
	var ballY = canvas.height - paddleHeight - ballRadius;
	var dx = 2;
	var dy = -2;

// ブロック
	var brickRowCount = 3;
	var brickColumnCount = 5;
	var brickWidth = 75;
	var brickHeight = 20;
	var brickPadding = 10;
	var brickOffsetTop = 30;
	var brickOffsetLeft = 30;
	var bricks = [];
	for(var c=0; c<brickColumnCount; c++) {
		bricks[c] = [];
		for(var r=0; r<brickRowCount; r++) {
			bricks[c][r] = { x: 0, y: 0, status: 1 };
		}
	}

// スコア
	var score = 0;

// ライフ
	var lives = 3;

// キーイベント
	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);

// 衝突判定
	function collisionDetection() {
		for(var c=0; c<brickColumnCount; c++) {
			for(var r=0; r<brickRowCount; r++) {
				var b = bricks[c][r];
				if(b.status == 1) {
					if(ballX > b.x && ballX < b.x+brickWidth && ballY > b.y && ballY < b.y+brickHeight) {
						dy = -dy;
						b.status = 0;
						score++;
						if(score == brickRowCount*brickColumnCount) {
							alert("YOU WIN, CONGRATULATIONS!");
							document.location.reload();
						}
					}
				}
			}
		}
	}

// グラデーション
	var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
	gradient.addColorStop("0", "magenta");
	gradient.addColorStop("0.5", "blue");
	gradient.addColorStop("1.0", "red");

// 描画
	function drawBall() {
	    ctx.beginPath();
	    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
	    ctx.fillStyle = ballColor;
	    ctx.fill();
	    ctx.closePath();
	}
	function drawPaddle() {
	    ctx.beginPath();
	    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
	    ctx.fillStyle = gradient;
	    ctx.fill();
	    ctx.closePath();
	}
	function drawBricks() {
		for(var c=0; c<brickColumnCount; c++) {
			for(var r=0; r<brickRowCount; r++) {
				if(bricks[c][r].status == 1) {
					var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
					var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
					bricks[c][r].x = brickX;
					bricks[c][r].y = brickY;
					ctx.beginPath();
					ctx.rect(brickX, brickY, brickWidth, brickHeight);
					ctx.fillStyle = "green";
					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 gameOver() {
		if(lives == 0) {
			alert("GAME OVER");
			document.location.reload();
		}
	}

function draw() {
	    ctx.clearRect(0, 0, canvas.width, canvas.height);
	    drawBricks();
	    drawBall();
	    drawPaddle();
	    drawScore();
	    drawLives();
	    collisionDetection();
	    gameOver();

// パドル操作
	    if(rightPressed && paddleX < canvas.width-paddleWidth) {
	        paddleX += 7;
	    }
	    else if(leftPressed && paddleX > 0) {
	        paddleX -= 7;
	    }

// ボールの壁反射
	    if(ballX + dx > canvas.width-ballRadius || ballX + dx < ballRadius) {
	        dx = -dx;
	    }
	    if(ballY + dy < ballRadius) {
	        dy = -dy;
	    }
	    else if(ballY + dy > canvas.height-ballRadius-paddleHeight) {
	        if(ballX > paddleX && ballX < paddleX + paddleWidth) {
	            dy = -dy;
	        }
	        else {
	            lives--;
	            if(!lives) {
	            	alert("GAME OVER");
	            	document.location.reload();
	            }
	            else {
	            	ballX = canvas.width/2;
	            	ballY = canvas.height-paddleHeight-ballRadius;
	            	dx = 2;
	            	dy = -2;
	            	paddleX = (canvas.width-paddleWidth)/2;
	            }
	        }
	    }

ballX += dx;
	    ballY += dy;

requestAnimationFrame(draw);
	}

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