Tap to Bubble Shooter's game

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

No:3677

123

←

Prev Next

→

Tap to Bubble Shooter
Developer User1006｜Date and time 23/6/26 3:25:16
Build time 26.386 sec｜Game capacity 2.748KB｜

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>Bubble Shooter</title>
	<style type="text/css">
		canvas {
			border: 1px solid black;
			background-color: #f5f5f5;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

var bubbleRadius = 20;
		var bubbleColors = ["red", "blue", "green", "orange", "purple", "pink"];
		var rows = 6;
		var cols = 10;
		var bubbleGrid = [];
		var selectedBubble = null;
		var mousePos = {x: 0, y: 0};

function drawBubble(x, y, radius, color) {
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			ctx.fillStyle = color;
			ctx.fill();
			ctx.strokeStyle = "#000";
			ctx.stroke();
			ctx.closePath();
		}

function distance(x1, y1, x2, y2) {
			var dx = x1 - x2;
			var dy = y1 - y2;
			return Math.sqrt(dx * dx + dy * dy);
		}

canvas.addEventListener("mousemove", function(event) {
			var rect = canvas.getBoundingClientRect();
			mousePos.x = event.clientX - rect.left;
			mousePos.y = event.clientY - rect.top;
		});

canvas.addEventListener("click", function(event) {
			var bubbleUnderMouse = getBubbleUnderMouse();
			if (bubbleUnderMouse) {
				if (selectedBubble) {
					if (bubbleUnderMouse === selectedBubble) {
						// shoot bubbles
					} else {
						selectedBubble = bubbleUnderMouse;
					}
				} else {
					selectedBubble = bubbleUnderMouse;
				}
			}
		});

function update() {
			// update game state
		}

function render() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBubbleGrid();
			// draw other game elements
		}

function loop() {
			update();
			render();
			requestAnimationFrame(loop);
		}

initBubbleGrid();
		loop();
	</script>
</body>
</html>