AI game creator

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

No:9694

145

←

Prev Next

→

bubble shoot
Developer User4369｜Date and time 23/7/26 21:08:35
Build time 31.306 sec｜Game capacity 3.339KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<html>
<head>
	<title>バブルシュート</title>
	<style>
		#canvas {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #000;
		}
	</style>
</head>
<body>
	<div id="canvas"></div>

// キャンバスの初期化
		const canvas = document.getElementById("canvas");
		canvas.width = game.width;
		canvas.height = game.height;
		const ctx = canvas.getContext("2d");

// バブルのクラス
		class Bubble {
			constructor(x, y, color) {
				this.x = x;
				this.y = y;
				this.color = color;
				this.size = game.bubbleSize;
			}

draw() {
				ctx.font = `${this.size}px Arial`;
				ctx.fillText(this.color, this.x, this.y);
			}

update() {
				this.y -= game.speed;
			}
		}

// バブルの追加
		function addBubble(x, y, color) {
			const bubble = new Bubble(x, y, color);
			game.bubbleGrid.push(bubble);
		}

// ショットの処理
		function shootBubble() {
			if (game.currentBubble) return;

const x = game.width / 2;
			const y = game.height - game.bubbleSize;
			const color = game.colors[Math.floor(Math.random() * game.colors.length)];
			game.currentBubble = new Bubble(x, y, color);
			game.shooting = true;
		}

// 衝突判定
		function checkCollision() {
			const { currentBubble, bubbleGrid } = game;
			if (!currentBubble) return;

for (let i = 0; i < bubbleGrid.length; i++) {
				const bubble = bubbleGrid[i];
				const dx = bubble.x - currentBubble.x;
				const dy = bubble.y - currentBubble.y;
				const distance = Math.sqrt(dx ** 2 + dy ** 2);

if (distance < game.bubbleSize) {
					bubble.color = currentBubble.color;
					game.currentBubble = null;
					game.shooting = false;
					break;
				}
			}
		}

// スコアの表示
		function drawScore() {
			ctx.font = "24px Arial";
			ctx.fillStyle = "#fff";
			ctx.fillText(`Score: ${game.score}`, 20, 40);
		}

// バブルの描画
		function drawBubbleGrid() {
			game.bubbleGrid.forEach((bubble) => bubble.draw());
		}

// バブルのアップデート
		function updateBubbleGrid() {
			game.bubbleGrid.forEach((bubble) => bubble.update());
			checkCollision();
		}

// ゲームループ
		function gameLoop() {
			ctx.clearRect(0, 0, game.width, game.height);

if (game.shooting) {
				game.currentBubble.draw();
				game.currentBubble.update();
				checkCollision();
			}

drawBubbleGrid();
			updateBubbleGrid();
			drawScore();

requestAnimationFrame(gameLoop);
		}

// イベントリスナーの追加
		canvas.addEventListener("click", shootBubble);

// バブルの初期配置
		for (let row = 0; row < 5; row++) {
			const offset = row % 2 ? game.bubbleSize / 2 : 0;

for (let col = 0; col < game.width / (game.bubbleSize + offset); col++) {
				const x = col * (game.bubbleSize + offset) + offset;
				const y = game.height - (row + 1) * game.bubbleSize;
				const color = game.colors[Math.floor(Math.random() * game.colors.length)];
				addBubble(x, y, color);
			}
		}

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