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

No:2740

1398

←

Prev Next

→

Lets go to school.
Developer User3609｜Date and time 23/6/22 13:52:07
Build time 28.585 sec｜Game capacity 2.875KB｜

Script

、退屈な授業中に遊べるゲームアプリを作ろう！

絵文字で遊ぶゲームアプリ

スコア: 0

残り時間: 10

このアプリでは、スタートボタンをクリックすると、10秒間でランダムに表示される絵文字をクリックしてスコアを獲得するゲームが始まります。時間が経つにつれて、絵文字が表示される時間が短くなり、難易度が上がります。10秒経過するとスコアが表示され、もう一度遊ぶことができます。スマホでも操作しやすいように、ボタンサイズが大きめに設定されています。また、背景色も明るい色で統一されているため、見やすさも両立しています。絵文字を多用することで、親しみやすい雰囲気を作り出しています。

←

Prev　Next

→ 　

Back　

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

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

、退屈な授業中に遊べるゲームアプリを作ろう！

<!DOCTYPE html>
<html>
<head>
	<title>絵文字で遊ぶゲームアプリ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f2f2f2;
			text-align: center;
			font-size: 2rem;
			padding-top: 5%;
		}
		button {
			font-size: 1.5rem;
			padding: 1rem;
			border-radius: 1rem;
			background-color: #4CAF50;
			color: white;
			border: none;
			margin: 2rem;
			cursor: pointer;
			transition-duration: 0.4s;
		}
        button:hover {
            background-color: #3e8e41;
        }
	</style>
	<script>
	let score = 0;
	let time = 10;
	function playGame() {
		document.getElementById("score").innerHTML = "スコア: " + score;
		let emojiList = ["😀", "😂", "😍", "🤔", "👿", "🐶", "🐱", "🐵"];
		let gameArea = document.getElementById("gameArea");
		gameArea.innerHTML = "";
		let interval = setInterval(function() {
			let randomIndex = Math.floor(Math.random() * emojiList.length);
			let emoji = emojiList[randomIndex];
			let positionX = Math.floor(Math.random() * (window.innerWidth - 200));
			let positionY = Math.floor(Math.random() * (window.innerHeight - 200));
			let button = document.createElement("button");
			button.innerHTML = emoji;
			button.style.position = "absolute";
			button.style.top = positionY + "px";
			button.style.left = positionX + "px";
			button.onclick = function() {
				score++;
				document.getElementById("score").innerHTML = "スコア: " + score;
				gameArea.removeChild(button);
			}
			gameArea.appendChild(button);
			time--;
			document.getElementById("time").innerHTML = "残り時間: " + time;
			if (time == 0) {
				clearInterval(interval);
				gameArea.innerHTML = "<h1>Finish!</h1><h2>スコア: " + score + "</h2><button onclick='location.reload()'>もう一度プレイ</button>";
			}
		}, 1000);
	}
	</script>
</head>
<body>
	<h1>絵文字で遊ぶゲームアプリ</h1>
	<button onclick="playGame()">START</button>
	<div id="gameArea"></div>
	<div id="score">スコア: 0</div>
	<div id="time">残り時間: 10</div>
</body>
</html>

このアプリでは、スタートボタンをクリックすると、10秒間でランダムに表示される絵文字をクリックしてスコアを獲得するゲームが始まります。時間が経つにつれて、絵文字が表示される時間が短くなり、難易度が上がります。10秒経過するとスコアが表示され、もう一度遊ぶことができます。

スマホでも操作しやすいように、ボタンサイズが大きめに設定されています。また、背景色も明るい色で統一されているため、見やすさも両立しています。絵文字を多用することで、親しみやすい雰囲気を作り出しています。