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

No:787

175

←

Prev Next

→

Ice Age Games
Developer User3132｜Date and time 23/6/17 17:42:22
Build time 33.247 sec｜Game capacity 2.762KB｜

Script

氷河期のゲーム

この氷河期のゲームは、アプリを1つのhtmlファイルに実装しています。JavaScriptを含んでおり、スマホで操作しやすくなっています。プレイヤーは、画面に表示される絵文字をクリックすることでポイントを獲得します。30秒間で獲得できるポイントを競います。なお、本作品はあくまでも学習目的で作成したものであり、商用利用等は禁止します。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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 type="text/css">
		body {
			background-color: #00FFFF;
		}
		#game-container {
			width: 100%;
			height: 100%;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		h1 {
			font-size: 4rem;
			margin-bottom: 2rem;
		}
		#btn-start {
			background-color: #FFA500;
			border: none;
			padding: 1rem 2rem;
			font-size: 2rem;
			border-radius: 1rem;
			color: white;
			cursor: pointer;
		}
		#btn-start:hover {
			background-color: #FF8C00;
		}
		#score {
			font-size: 3rem;
			margin-top: 2rem;
		}
	</style>
	<script type="text/javascript">
		var score = 0;
		var btn = null;
		var intervalId = null;
		var emojis = ['💥', '🔥', '❄️', '🌊', '⛰️'];

window.onload = function() {
			btn = document.getElementById('btn-start');
			btn.addEventListener('click', startGame);
		};

function startGame() {
			btn.removeEventListener('click', startGame);
			btn.style.display = 'none';
			var gameContainer = document.getElementById('game-container');
			var scoreDiv = document.createElement('div');
			scoreDiv.setAttribute('id', 'score');
			gameContainer.appendChild(scoreDiv);
			intervalId = setInterval(addEmoji, 1000);
		}

function addEmoji() {
			var index = Math.floor(Math.random() * emojis.length);
			var e = document.createElement('span');
			e.innerHTML = emojis[index];
			e.style.fontSize = '3rem';
			e.style.position = 'absolute';
			e.style.top = Math.floor(Math.random() * 80) + '%';
			e.style.left = Math.floor(Math.random() * 80) + '%';
			e.style.cursor = 'pointer';
			e.addEventListener('click', addScore);
			document.body.appendChild(e);
			setTimeout(function() {document.body.removeChild(e);}, 2000);
		}

function addScore(event) {
			score++;
			var scoreDiv = document.getElementById('score');
			scoreDiv.innerHTML = 'Score: ' + score;
			event.target.removeEventListener('click', addScore);
			document.body.removeChild(event.target);
		}
	</script>
</head>
<body>
	<div id="game-container">
		<h1>氷河期のゲーム</h1>
		<button id="btn-start">スタート</button>
	</div>
</body>
</html>