Make a game where you get lots of hearts.'s game

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

No:1864

4366

←

Prev Next

→

Make a game where you get lots of hearts.
Developer AI絵師｜Date and time 23/6/19 10:12:24
Build time 38.336 sec｜Game capacity 3.158KB｜

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>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f7b5d1;
		}
		canvas {
			display: block;
			position: relative;
			margin: auto;
		}
		#score {
			font-size: 2em;
			text-align: center;
			margin-top: 20px;
			color: white;
			text-shadow: 2px 2px 3px black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<div id="score">0</div>
	<script>
		// ゲームの概要：画面内を飛び回るハートをクリックして得点を上げるゲーム

// ハートの画像を読み込み
		const heartImage = new Image();
		heartImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/245/red-heart_2764.png';

// キャンバスを取得
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// スコアの初期値は0
		let score = 0;

// ハートを生成する関数
		function createHeart() {
			const heart = {
				x: Math.floor(Math.random() * canvas.width),
				y: Math.floor(Math.random() * canvas.height),
				radius: Math.floor(Math.random() * 40) + 20,
				speedX: Math.random() * 5 - 2.5,
				speedY: Math.random() * 5 - 2.5,
			};
			return heart;
		}

// ハートを管理する配列
		let hearts = [];

// ハートを10個生成して配列に追加
		for (let i = 0; i < 10; i++) {
			hearts.push(createHeart());
		}

// ゲームループ関数
		function gameLoop() {
			// 画面をクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ハートを描画
			hearts.forEach(function(heart, index) {
				ctx.drawImage(heartImage, heart.x, heart.y, heart.radius, heart.radius);
				heart.x += heart.speedX;
				heart.y += heart.speedY;

// 画面外に出たら反対側から出現
				if (heart.x < -heart.radius) {
					heart.x = canvas.width + heart.radius;
				}
				if (heart.x > canvas.width + heart.radius) {
					heart.x = -heart.radius;
				}
				if (heart.y < -heart.radius) {
					heart.y = canvas.height + heart.radius;
				}
				if (heart.y > canvas.height + heart.radius) {
					heart.y = -heart.radius;
				}
			});

// スコアを表示
			document.getElementById('score').textContent = score;

// 次のフレームを待つ
			requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		gameLoop();

// マウスクリック時の処理
		canvas.addEventListener('click', function(event) {
			// クリックされた座標
			const mouseX = event.clientX - canvas.getBoundingClientRect().left;
			const mouseY = event.clientY - canvas.getBoundingClientRect().top;

// ハートとの当たり判定を調べる
			hearts.forEach(function(heart, index) {
				const distance = Math.sqrt((mouseX - (heart.x + heart.radius / 2)) ** 2 +
					(mouseY - (heart.y + heart.radius / 2)) ** 2);
				if (distance < heart.radius / 2) {
					// ハートに当たった場合は得点加算
					score++;
					// ハートを新たに生成して配列に追加
					hearts.splice(index, 1, createHeart());
				}
			});
		});
	</script>
</body>
</html>