ひさしをショック死させるゲーム

このゲームは、10秒間で表示された絵文字をどれだけクリックできるかを競うゲームです。ランダムに表示される6種類の絵文字をクリックしてスコアを稼ぎましょう。スマホでも遊べるように、クリックイベントをspanタグに設定しています。また、背景色やボタンの色には絵文字に合わせたピンク色を使い、より可愛く見せるようにしました。開発者のひさしをショック死させるようなゲームタイトルをつけたので、期待していただければ幸いです。

←

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>HISASHI'S GAME</title>
	<style>
		body{
			background-color: #ffe6e6;
			text-align: center;
		}
		h1{
			font-size: 48px;
			margin-top: 50px;
		}
		button{
			padding: 20px;
			font-size: 24px;
			margin-top: 50px;
			background-color: #ff9999;
			border-radius: 10px;
			border: none;
			cursor: pointer;
		}
		#score{
			font-size: 36px;
			margin-top: 20px;
		}
		#game{
			margin-top: 50px;
		}
		span{
			font-size: 80px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>ひさしをショック死させるゲーム</h1>
	<button id="startBtn">START</button>
	<p id="score">0</p>
	<div id="game"></div>
	
	<script>
		let score = 0;
		let timer;
		
		function startGame(){
			score = 0;
			document.getElementById("score").innerHTML = score;
			document.getElementById("game").innerHTML = "";
			
			timer = setInterval(function(){
				let span = document.createElement("span");
				let emojis = ["😱", "💥", "💔", "😩", "😢", "😭"];
				let randIndex = Math.floor(Math.random() * emojis.length);
				span.innerHTML = emojis[randIndex];
				span.onclick = function(){
					score++;
					document.getElementById("score").innerHTML = score;
					this.remove();
				}
				document.getElementById("game").appendChild(span);
			}, 500);
		}
		
		document.getElementById("startBtn").onclick = function(){
			startGame();
			this.disabled = true;
			setTimeout(function(){
				clearInterval(timer);
				document.getElementById("game").innerHTML = "<p>あなたはひさしをショック死させました</p>";
				document.getElementById("startBtn").disabled = false;
			}, 10000);
		}
	</script>
</body>
</html>