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

No:1870

759

←

Prev Next

→

Ahhhh!!!
Developer User3082｜Date and time 23/6/19 10:25:14
Build time 24.029 sec｜Game capacity 1.846KB｜

Script

Emoji Games

👍

😎

🎅

💪

This program is an Emoji game. 4 Emoji are displayed and、A simple game that displays a random Emoji when selected by the user. It can also be played on a mobile phone.、The font size is specified in vw. The result is displayed with the color、The color is #76424e.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Emoji ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
	body {
		background-color: #f7e4d4;
		font-size: 4vw;
	}
	h1 {
		text-align: center;
		margin-top: 10%;
		color: #76424e;
	}
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10%;
	}
	.emoji {
		margin: 5% auto;
		cursor: pointer;
	}
	.result {
		margin-top: 10%;
		font-size: 10vw;
	}
	</style>
</head>
<body>
	<h1>Emoji ゲーム</h1>
	<div class="container">
		<div class="emoji" id="emoji1">👍</div>
		<div class="emoji" id="emoji2">😎</div>
		<div class="emoji" id="emoji3">🎅</div>
		<div class="emoji" id="emoji4">💪</div>
	</div>
	<div class="result" id="result"></div>

// 結果を表示する要素
	const result = document.querySelector("#result");

// Emoji をクリックした時の処理
	document.querySelectorAll(".emoji").forEach(emoji => {
		emoji.addEventListener("click", () => {
			// ランダムな Emoji を取得
			const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

// 結果を表示
			result.innerHTML = `<span style="color:#76424e;">あなたは ${randomEmoji} を選びました</span>`;
		});
	});
	</script>
</body>
</html>

このプログラムは Emoji ゲームです。4つの Emoji が表示され、ユーザーが選択するとランダムな Emoji を表示するシンプルなゲームです。スマホでも遊べるように、フォントサイズをvwで指定しています。結果は色とともに表示され、色は#76424eとしました。