トマト潰しゲーム画面上に現れるトマト(🍅)をタップするゲームです。トマトはランダムな場所に複数表示されます。トマトはタップすると、(🩸)に変化します。たくさんトマトをタップして、🩸で画面を埋めましょう！'s game

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

No:3348

4678

←

Prev Next

→

トマト潰しゲーム画面上に現れるトマト(🍅)をタップするゲームです。トマトはランダムな場所に複数表..ALL
Developer もちきなこ｜Date and time 23/6/24 15:22:53
Build time 34.651 sec｜Game capacity 3.386KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>トマト潰しゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// キャンバス要素を取得
		const canvas = document.getElementById('canvas');
		// 画面サイズを設定
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		// コンテキストを取得
		const context = canvas.getContext('2d');

// トマトの画像を読み込み
		const tomatoImage = new Image();
		tomatoImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/tomato_1f345.png';
		const tomatoSize = 64;

// 血の画像を読み込み
		const bloodImage = new Image();
		bloodImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/drop-of-blood_1fa78.png';
		const bloodSize = 32;

// トマトが出現する間隔
		const tomatoInterval = 500;
		let tomatoCount = 0;

// クリックした位置に血を表示する関数
		function showBlood(x, y) {
			context.drawImage(bloodImage, x - bloodSize / 2, y - bloodSize / 2, bloodSize, bloodSize);
		}

// ゲームの状態を管理する変数
		let game = {
			score: 0,
			tomatoes: [],
			gameOver: false
		};

// ゲームスタート
		function startGame() {
			// ゲームが終了していたらリセット
			if (game.gameOver) {
				game.score = 0;
				game.tomatoes = [];
				game.gameOver = false;
			}
			// タイマーを設定してトマトを生成
			setInterval(function() {
				if (!game.gameOver) {
					let tomato = {
						x: Math.random() * (canvas.width - tomatoSize),
						y: Math.random() * (canvas.height - tomatoSize),
						isSmashed: false
					};
					game.tomatoes.push(tomato);
				}
			}, tomatoInterval);
			// キャンバスをクリックしたらトマトを潰す
			canvas.addEventListener('click', function(event) {
				if (!game.gameOver) {
					let x = event.clientX;
					let y = event.clientY;
					for (let i = 0; i < game.tomatoes.length; i++) {
						let tomato = game.tomatoes[i];
						if (x >= tomato.x && x <= tomato.x + tomatoSize && y >= tomato.y && y <= tomato.y + tomatoSize && !tomato.isSmashed) {
							game.score++;
							tomato.isSmashed = true;
							showBlood(tomato.x + tomatoSize / 2, tomato.y + tomatoSize / 2);
						}
					}
				}
			});
			// ゲームオーバー判定
			setInterval(function() {
				if (!game.gameOver) {
					if (game.tomatoes.every(tomato => tomato.isSmashed)) {
						game.gameOver = true;
						alert('ゲームオーバー！ あなたのスコアは ' + game.score + ' です');
					}
				}
			}, 1000);
		}

// 描画する関数
		function draw() {
			// 画面をクリア
			context.fillStyle = 'white';
			context.fillRect(0, 0, canvas.width, canvas.height);
			// スコアを表示
			context.fillStyle = 'black';
			context.font = '24px sans-serif';
			context.fillText('スコア: ' + game.score, 10, 30);
			// トマトを描画
			for (let i = 0; i < game.tomatoes.length; i++) {
				let tomato = game.tomatoes[i];
				if (!tomato.isSmashed) {
					context.drawImage(tomatoImage, tomato.x, tomato.y, tomatoSize, tomatoSize);
				}
			}
		}

// ゲームスタート
		startGame();

// 描画を繰り返す
		setInterval(draw, 60);
	</script>
</body>
</html>