A game with lots of falling pictograms's game

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

No:4238

4906

←

Prev Next

→

A game with lots of falling pictograms
Developer もちきなこ｜Date and time 23/6/27 15:31:12
Build time 56.621 sec｜Game capacity 4.784KB｜

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 {
			background: #eee;
			font-size: 50px;
			text-align: center;
			margin: 0;
			padding: 0;
			overflow: hidden; /* 画面外の絵文字を表示しない */
			user-select: none; /* プログラム以外の選択を禁止 */
			touch-action: manipulation; /* スマホの動きをサクサクにする */
		}
	</style>
</head>
<body>
	<script>
		const emojis = ["", "🐶", "🐱", "🐰", "🦊", "🐻", "🐼", "🐨", "🐵", "🙈", "🙉", "🙊", "🐥", "🐝", "🦋", "🐟", "🐠", "🐬", "🐳", "🐙", "🐌", "🌻", "🍎", "🍓", "🍦", "🎂", "🎁", "🎈", "🎉", "💡", "💣", "🔥", "💧", "✨"]; /* 利用可能な絵文字 */
		const speed = 5; /* 落ちる速度 */
		const interval = 500; /* 絵文字の出現インターバル */
		const width = window.innerWidth; /* 画面幅 */
		const height = window.innerHeight; /* 画面高さ */
		const scoreText = document.createElement("p"); /* スコア表示用のp要素 */
		let score = 0; /* スコア */
		let hitCount = 0; /* 当たった回数 */

/* 絵文字要素を作成 */
		const createEmoji = () => {
			const emoji = document.createElement("span");
			emoji.style.position = "absolute";
			emoji.style.left = Math.floor(Math.random() * width) + "px"; /* 横位置をランダムに */
			emoji.style.top = -100 + "px"; /* 縦位置は画面上部から */
			emoji.style.fontSize = "50px";
			emoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)]; /* 絵文字をランダムに */
			document.body.appendChild(emoji);

const fallEmoji = setInterval(() => { /* 一定間隔で落とす */
				const emojiPosition = emoji.getBoundingClientRect(); /* 絵文字要素の位置 */
				emoji.style.top = emojiPosition.top + speed + "px"; /* 落下させる */
				/* 画面下部に到達したら削除 */
				if(emojiPosition.top + speed > height) {
					document.body.removeChild(emoji);
					clearInterval(fallEmoji);
				}
			}, interval / 60); /* 60fpsで動作 */
		};

/* 当たり判定 */
		const checkCollision = (emoji) => {
			const basketPosition = basket.getBoundingClientRect(); /* バスケットの位置 */
			const emojiPosition = emoji.getBoundingClientRect(); /* 絵文字の位置 */
			if(emojiPosition.bottom > basketPosition.top && /* 絵文字の下部がバスケットの上部より下に */
				emojiPosition.top < basketPosition.bottom && /* 絵文字の上部がバスケットの下部より上に */
				emojiPosition.right > basketPosition.left && /* 絵文字の右端がバスケットの左端より右に */
				emojiPosition.left < basketPosition.right) { /* 絵文字の左端がバスケットの右端より左に */
				return true; /* 当たり */
			}
			return false; /* 当たりじゃない */
		};

/* バスケットの要素を作成 */
		const basket = document.createElement("div");
		basket.style.position = "fixed";
		basket.style.bottom = "0";
		basket.style.left = width / 2 - 50 + "px";
		basket.style.width = "100px";
		basket.style.height = "100px";
		basket.style.background = "#3489db";
		document.body.appendChild(basket);

/* バスケットを動かす */
		document.addEventListener("touchmove", (e) => {
			const moveToLeft = basket.getBoundingClientRect().left - e.touches[0].clientX < 0; /* 指が左に動いたかどうか */
			const moveToRight = basket.getBoundingClientRect().right - e.touches[0].clientX > 0; /* 指が右に動いたかどうか */
			if(moveToLeft && moveToRight) { /* 左右の端に触れた場合 */
				/* 動かさない */
			} else if(moveToLeft) { /* 右に動かす場合 */
				basket.style.left = basket.getBoundingClientRect().left + speed + "px";
			} else if(moveToRight) { /* 左に動かす場合 */
				basket.style.left = basket.getBoundingClientRect().left - speed + "px";
			}
		});

/* スコア表示用のp要素を作成 */
		scoreText.innerText = "Score: " + score;
		scoreText.style.position = "fixed";
		scoreText.style.top = "20px";
		scoreText.style.left = "20px";
		scoreText.style.fontSize = "30px";
		document.body.appendChild(scoreText);

setInterval(() => {
			createEmoji();
		}, interval); /* 一定間隔で繰り返す */

/* 当たり判定の検出 */
		setInterval(() => {
			const emojis = document.getElementsByTagName("span");
			for(let i = 0; i < emojis.length; i++) {
				if(checkCollision(emojis[i])) {
					document.body.removeChild(emojis[i]);
					score += 10;
					hitCount++;
					if(hitCount === 10) { /* 10回当たったらスピードアップ */
						speed += 1;
						hitCount = 0;
					}
					scoreText.innerText = "Score: " + score;
				}
			}
		}, 1000 / 60); /* 60fpsで動作 */
	</script>
</body>
</html>