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

No:1797

4641

←

Prev Next

→

Block breaker with 10 balls
Developer User3025｜Date and time 23/6/19 2:03:01
Build time 63.118 sec｜Game capacity 4.821KB｜

Script

ブロック崩し

スマホで操作してね

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ブロック崩し</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#canvas {
			background-color: white;
			display: block;
			margin: 0 auto;
			margin-top: 20px;
		}
	</style>

<div style="text-align:center;">
		<h1>ブロック崩し</h1>
		<p>スマホで操作してね</p>
	</div>

// ボールの初期位置と速度を設定
		for (var i = 0; i < ballNum; i++) {
			var ball = {
				x: canvas.width / 2,
				y: canvas.height - paddleHeight - 30,
				dx: Math.random() * 4 - 2, // -2 to 2
				dy: -3
			}
			balls.push(ball);
		}

// ブロックの初期位置を設定
		for (var col = 0; col < blockCols; col++) {
			for (var row = 0; row < blockRows; row++) {
				var block = {
					x: col * blockWidth,
					y: row * blockHeight,
					isAlive: true
				};
				blocks.push(block);
			}
		}

// ゲーム開始
		function start() {
			setInterval(update, 10);
			document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);
			canvas.addEventListener("touchmove", touchMoveHandler, false);
		}

// 毎フレームの処理
		function update() {
			// 画面をクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
			for (var i = 0; i < balls.length; i++) {
				var ball = balls[i];
				drawBall(ball.x, ball.y);
				ball.x += ball.dx;
				ball.y += ball.dy;

// 壁に当たった場合の反射
				if (ball.x + ball.dx >= canvas.width || ball.x + ball.dx < 0) {
					ball.dx = -ball.dx;
				}
				if (ball.y + ball.dy < 0) {
					ball.dy = -ball.dy;
				} else if (ball.y + ball.dy >= canvas.height - paddleHeight) {
					// パドルに当たった場合の反射
					if (ball.x + ball.dx > paddleX && ball.x + ball.dx < paddleX + paddleWidth) {
						ball.dy = -ball.dy;
						ball.dx = ball.dx + (ball.x + ball.dx - (paddleX + paddleWidth / 2)) / 10;
					} else {
						// ボールを削除
						ballNum--;
						if (ballNum == 0) {
							gameover();
							return;
						}
						balls.splice(i, 1);
						i--;
					}
				}

// ブロックに当たった場合の反射と削除
				for (var j = 0; j < blocks.length; j++) {
					var block = blocks[j];
					if (block.isAlive) {
						if (ball.x >= block.x && ball.x < block.x + blockWidth && ball.y >= block.y && ball.y < block.y + blockHeight) {
							ball.dy = -ball.dy;
							block.isAlive = false;
						}
					}
				}
			}

// ブロックを描画
			for (var j = 0; j < blocks.length; j++) {
				var block = blocks[j];
				if (block.isAlive) {
					drawBlock(block.x, block.y);
				}
			}

// パドルを描画
			drawPaddle(paddleX);

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

// ゲームオーバー
		function gameover() {
			alert("ゲームオーバー！");
			location.reload();
		}

// パドルを描画
		function drawPaddle(x) {
			ctx.beginPath();
			ctx.rect(x, canvas.height - paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
		}

// ボールを描画
		function drawBall(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, 10, 0, Math.PI*2, false);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
		}

// ブロックを描画
		function drawBlock(x, y) {
			ctx.beginPath();
			ctx.rect(x, y, blockWidth, blockHeight);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.closePath();
		}

// キーが押されたときの処理
		function keyDownHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = true;
			}
			else if(e.keyCode == 37) {
				leftPressed = true;
			}
		}

// キーが離されたときの処理
		function keyUpHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = false;
			}
			else if(e.keyCode == 37) {
				leftPressed = false;
			}
		}

// スマホでの操作
		function touchMoveHandler(e) {
			var relativeX = e.changedTouches[0].pageX - canvas.offsetLeft;
			if (relativeX > 0 && relativeX < canvas.width) {
				paddleX = relativeX - paddleWidth / 2;
			}
		}

// ゲーム開始
		start();
	</script>
</body>
</html>