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

No:2512

358

←

Prev Next

→

fruit basket
Developer User3574｜Date and time 23/6/21 20:17:43
Build time 29.381 sec｜Game capacity 1.959KB｜

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>
</head>
<body>
	<h1>フルーツバスケット🍓🍊🍎</h1>
	<p>スマホで遊べるバスケットボール風ゲームです。フルーツを入れてみよう！</p>
	<canvas id="gameCanvas" width="400" height="500"></canvas>
	<script>
		// キャンバスの取得
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");

// フルーツの画像の準備
		const images = {};
		const fruits = ["🍓", "🍊", "🍎"];
		fruits.forEach((fruit) => {
			const img = new Image();
			img.src = `images/${fruit}.png`;
			images[fruit] = img;
		});

// フルーツの初期位置
		const fruitPositions = [
			{x: 50, y: 450},
			{x: 150, y: 450},
			{x: 250, y: 450}
		];

// タッチ操作の処理
		canvas.addEventListener("touchstart", (e) => {
			// タッチ座標の取得
			const touchX = e.touches[0].clientX - canvas.offsetLeft;
			const touchY = e.touches[0].clientY - canvas.offsetTop;

// フルーツを投げる
			fruits.forEach((fruit, i) => {
				if (touchX > fruitPositions[i].x && touchX < fruitPositions[i].x + 50 && touchY > fruitPositions[i].y && touchY < fruitPositions[i].y + 50) {
					fruitPositions[i].y = 0;
				}
			});
		});

// 描画の更新
		function update() {
			// 背景の描画
			ctx.fillStyle = "#b3e6ff";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// フルーツの描画
			fruits.forEach((fruit, i) => {
				// フルーツの落下処理
				if (fruitPositions[i].y < 450) {
					fruitPositions[i].y += 5;
				}

// フルーツの描画
				ctx.drawImage(images[fruit], fruitPositions[i].x, fruitPositions[i].y, 50, 50);
			});

// 再描画の指示
			requestAnimationFrame(update);
		}

// ゲームの開始
		update();
	</script>
	<p>フルーツをタップして、バスケットに入れよう！🏀</p>
</body>
</html>