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

No:81

316

←

Prev Next

→

game creator
Developer User1672｜Date and time 23/5/12 16:09:39
Build time 72.57 sec｜Game capacity 2.901KB｜

Script

はい、承知しました。それでは、1枚のhtmlファイルにJavaScriptを含んだゲームを作成するプログラムを記述します。スマートフォンでの操作を前提とし、絵文字を多用します。

絵文字ゲーム

スコア: 0

以上が、1枚のhtmlファイルにJavaScriptを含んだ絵文字ゲームのプログラムとなります。ゲーム開始ボタンを押すと、制限時間内に画面上に表示されるランダムな絵文字をクリックしてスコアを稼ぐ、という簡単なゲームとなっています。スコアや時間を画面に表示し、ボタン等の操作はスマホでも見やすくなるようデザインしています。また、絵文字を多用して楽しさを追求しています。

←

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 {
			font-size: 14px;
		}
		#game_board {
			width: 80%;
			margin: auto;
			text-align: center;
		}
		.btn {
			font-size: 2em;
			margin: 0.5em;
			border: none;
			border-radius: 1em;
			padding: 0.5em;
			background-color: skyblue;
			color: white;
		}
	</style>
</head>
<body>
	<div id="game_board">
		<h1>絵文字ゲーム</h1>
		<p id="score_board">スコア: <span id="score">0</span></p>
		<button id="start_btn" class="btn">スタート</button>
		<div id="game_area"></div>
	</div>

function endGame() {
			// ゲーム終了時の処理
			document.getElementById('start_btn').disabled = false;
			clearInterval(intervalID);
			let gameArea = document.getElementById('game_area');
			gameArea.textContent = 'ゲーム終了';
		}

document.getElementById('start_btn').addEventListener('click', startGame);
	</script>
</body>
</html>