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

No:3555

382

←

Prev Next

→

bubble shooter
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 8889 sec｜Game capacity 8.889KB｜

Script

// バブルシューターの実装

Bubble Shooter

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

// バブルシューターの実装

<!DOCTYPE html>
<html>
<head>
	<title>Bubble Shooter</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

<h1>Bubble Shooter</h1>

// canvasの準備
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

var bubbleRadius = 20; // バブルの半径
		var bubbleSpeed = 5; // バブルの速度
		var bubbleColors = ["red", "blue", "green", "yellow"]; // バブルの色
		var bubbleRows = 5; // 縦方向に並ぶバブルの数
		var bubbleColumns = 10; // 横方向に並ぶバブルの数
		var bubblePadding = 10; // バブル間の余白

var bubbles = []; // バブルを格納する配列

// バブルを生成する関数
		function createBubbles() {
			for (var i = 0; i < bubbleRows; i++) {
				bubbles[i] = [];
				for (var j = 0; j < bubbleColumns; j++) {
					var bubbleX = (j * (bubbleRadius * 2 + bubblePadding)) + bubbleRadius + (canvas.width / 2 - (bubbleColumns * (bubbleRadius * 2 + bubblePadding)) / 2);
					var bubbleY = (i * (bubbleRadius * 2 + bubblePadding)) + bubbleRadius + bubbleRadius;

var bubbleColor = bubbleColors[Math.floor(Math.random() * bubbleColors.length)];

bubbles[i][j] = {
						x: bubbleX,
						y: bubbleY,
						radius: bubbleRadius,
						color: bubbleColor,
						dx: 0,
						dy: 0,
						destroyed: false
					};
				}
			}
		}

createBubbles(); // バブルを生成

// 画面を描画する関数
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// バブルを描画
			for (var i = 0; i < bubbles.length; i++) {
				for (var j = 0; j < bubbles[i].length; j++) {
					if (!bubbles[i][j].destroyed) {
						ctx.beginPath();
						ctx.arc(bubbles[i][j].x, bubbles[i][j].y, bubbles[i][j].radius, 0, Math.PI * 2);
						ctx.fillStyle = bubbles[i][j].color;
						ctx.fill();
						ctx.closePath();
					}
				}
			}

// メッセージを描画
			if (gameOver) {
				ctx.font = "bold 48px Arial";
				ctx.fillStyle = "red";
				ctx.textAlign = "center";
				ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
			} else if (win) {
				ctx.font = "bold 48px Arial";
				ctx.fillStyle = "green";
				ctx.textAlign = "center";
				ctx.fillText("You Win!", canvas.width / 2, canvas.height / 2);
			}
		}

draw(); // 画面を描画

var gameOver = false; // ゲームオーバーかどうか
		var win = false; // 勝利したかどうか
		var currentBubbleColor = bubbleColors[Math.floor(Math.random() * bubbleColors.length)]; // 現在のバブルの色

// タップした場所に照準を移動する関数
		function moveAim(evt) {
			var rect = canvas.getBoundingClientRect();
			var mouseX = evt.touches[0].clientX - rect.left;
			var aimX = mouseX;
			var aimY = canvas.height - bubbleRadius;

// 照準を描画
			ctx.beginPath();
			ctx.moveTo(canvas.width / 2, canvas.height - bubbleRadius);
			ctx.lineTo(aimX, aimY);
			ctx.strokeStyle = "black";
			ctx.stroke();
			ctx.closePath();
		}

// タップした座標からバブルを発射する関数
		function shootBubble(evt) {
			if (gameOver || win) {
				return;
			}

var rect = canvas.getBoundingClientRect();
			var mouseX = evt.touches[0].clientX - rect.left;
			var aimX = mouseX;
			var aimY = canvas.height - bubbleRadius;

// 照準の角度と距離を計算
			var dx = (canvas.width / 2) - aimX;
			var dy = (canvas.height - bubbleRadius) - aimY;
			var distance = Math.sqrt(dx * dx + dy * dy);
			var angle = Math.atan2(dy, dx);

// 現在のバブルを設定し、発射する
			var bubble = {
				x: canvas.width / 2,
				y: canvas.height - bubbleRadius,
				radius: bubbleRadius,
				color: currentBubbleColor,
				dx: Math.cos(angle) * bubbleSpeed,
				dy: -Math.sin(angle) * bubbleSpeed,
				destroyed: false
			};

// バブルグループに追加
			bubbles.push(bubble);

// 新しいバブルの色を設定
			currentBubbleColor = bubbleColors[Math.floor(Math.random() * bubbleColors.length)];
		}

// バブルを移動する関数
		function moveBubbles() {
			for (var i = 0; i < bubbles.length; i++) {
				var bubble = bubbles[i];

if (!bubble.destroyed) {
					bubble.x += bubble.dx;
					bubble.y += bubble.dy;

// 画面外に出た場合、反射させる
					if (bubble.x < 0 + bubble.radius || bubble.x > canvas.width - bubble.radius) {
						bubble.dx = -bubble.dx;
					}

// バブル同士が衝突した場合、反発させる
					for (var j = 0; j < bubbles.length; j++) {
						if (!bubbles[j].destroyed && i != j) {
							var dx = bubble.x - bubbles[j].x;
							var dy = bubble.y - bubbles[j].y;
							var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < bubble.radius + bubbles[j].radius) {
								var angle = Math.atan2(dy, dx);
								var sine = Math.sin(angle);
								var cosine = Math.cos(angle);

// 運動量保存の法則に基づいて、速度を交換する
								var tempDx1 = bubble.dx * cosine + bubble.dy * sine;
								var tempDy1 = bubble.dy * cosine - bubble.dx * sine;
								var tempDx2 = bubbles[j].dx * cosine + bubbles[j].dy * sine;
								var tempDy2 = bubbles[j].dy * cosine - bubbles[j].dx * sine;

bubble.dx = tempDx2 * cosine - tempDy2 * sine;
								bubble.dy = tempDy2 * cosine + tempDx2 * sine;
								bubbles[j].dx = tempDx1 * cosine - tempDy1 * sine;
								bubbles[j].dy = tempDy1 * cosine + tempDx1 * sine;
							}
						}
					}
				}
			}

// 手前にあるバブルが画面下部に到達した場合、ゲームオーバー
			for (var i = 0; i < bubbles[0].length; i++) {
				if (!bubbles[0][i].destroyed && bubbles[0][i].y > canvas.height - bubbleRadius) {
					gameOver = true;
				}
			}

// バブルグループがなくなった場合、勝利
			var noBubbleLeft = true;
			for (var i = 0; i < bubbles.length; i++) {
				for (var j = 0; j < bubbles[i].length; j++) {
					if (!bubbles[i][j].destroyed) {
						noBubbleLeft = false;
						break;
					}
				}
			}

if (noBubbleLeft) {
				win = true;
			}
		}

// 衝突判定を行う関数
		function bubbleCollision() {
			for (var i = 0; i < bubbles.length; i++) {
				var bubble = bubbles[i];

if (bubble.destroyed) {
					continue;
				}

var dx = bubble.x - canvas.width / 2;
				var dy = bubble.y - (canvas.height - bubbleRadius);
				var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < bubbleRadius) {
					var row = Math.floor((bubble.y - bubbleRadius) / (bubbleRadius * 2 + bubblePadding));
					var column = Math.floor((bubble.x - (canvas.width / 2 - (bubbleColumns * (bubbleRadius * 2 + bubblePadding)) / 2)) / (bubbleRadius * 2 + bubblePadding));

if (row >= bubbleRows || column >= bubbleColumns || column < 0) {
						gameOver = true;
					} else {
						if (bubbles[row][column].destroyed) {
							bubble.y = canvas.height - bubbleRadius;
							bubbles.push(bubble);
						} else {
							bubbles[row][column].destroyed = true;

// バブル同士が繋がった場合、同色のバブルも探索して削除する
							var connectedBubbles = [];
							findConnectedBubbles(row, column, bubble.color, connectedBubbles);
							if (connectedBubbles.length > 2) {
								for (var j = 0; j < connectedBubbles.length; j++) {
									var x = connectedBubbles[j][1];
									var y = connectedBubbles[j][0];
									bubbles[y][x].destroyed = true;
								}
							}
						}
					}

break;
				}
			}
		}

// 繋がった同色のバブルを探す関数
		function findConnectedBubbles(row, column, color, connectedBubbles) {
			if (row < 0 || row >= bubbleRows || column < 0 || column >= bubbleColumns) {
				return;
			}

if (bubbles[row][column].color != color) {
				return;
			}

findConnectedBubbles(row - 1, column, color, connectedBubbles);
			findConnectedBubbles(row, column - 1, color, connectedBubbles);
			findConnectedBubbles(row + 1, column, color, connectedBubbles);
			findConnectedBubbles(row, column + 1, color, connectedBubbles);
		}

// ゲームのメインループ
		function gameLoop() {
			draw();
			moveAim();
			moveBubbles();
			bubbleCollision();
			window.requestAnimationFrame(gameLoop);
		}

gameLoop(); // ゲームのメインループを開始

canvas.addEventListener("touchmove", moveAim);
		canvas.addEventListener("touchend", shootBubble);

</script>

</body>
</html>