ひさしを地獄に落とせ！

左右の矢印キーでひさしを移動

【ゲームの概要】画面上からひさしの絵文字が落ちてきます。プレイヤーは左右の矢印キーでひさしを移動させ、ひさしに当たらないようにします。ひさしに当たるとゲームオーバーになります。ひさしを避けるたびにスコアが加算され、より高速でひさしが落ちてきます。

←

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 {
		text-align: center;
	}
	h1 {
		font-size: 3em;
		margin-top: 50px;
	}
	#hisashi {
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -50px;
		font-size: 3em;
	}
</style>
</head>
<body>
<h1>ひさしを地獄に落とせ！</h1>
<p id="score"></p>
<div id="falling">
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/house-with-garden_1f3e1.png" width="100" height="100" alt="ひさし">
</div>
<button onclick="start()">スタート</button>
<button onclick="stop()">ストップ</button>
<p>左右の矢印キーでひさしを移動</p>
<script>
	var fallingIntervalId;
	var fallSpeed = 3;
	var score = 0;
	var hisashiWidth = 100;
	var hisashiHeight = 100;
	var maxWidth = window.innerWidth - hisashiWidth;
	var hisashiX = maxWidth / 2;
	var hisashiY = 10;
	
	function start() {
		reset();
		document.addEventListener('keydown', keydownHandler);
		fallingIntervalId = setInterval(fall, 10);
	}
	
	function stop() {
		clearInterval(fallingIntervalId);
		document.removeEventListener('keydown', keydownHandler);
	}
	
	function reset() {
		score = 0;
		updateScore();
		fallSpeed = 3;
		hisashiX = maxWidth / 2;
		updateHisashi();
	}
	
	function fall() {
		var fallingDiv = document.getElementById('falling');
		var fallingY = parseInt(fallingDiv.style.top) || 0;
		if (fallingY > window.innerHeight) {
			fallingY = -hisashiHeight;
			fallSpeed += 0.5;
			score++;
			updateScore();
		}
		fallingY += fallSpeed;
		fallingDiv.style.top = fallingY + 'px';
		if (isColliding()) {
			stop();
			alert('ゲームオーバー！\nスコア：' + score);
		}
	}
	
	function isColliding() {
		var fallingDiv = document.getElementById('falling');
		var distanceX = Math.abs(hisashiX - (fallingDiv.offsetLeft + hisashiWidth / 2));
		var distanceY = Math.abs(hisashiY - (fallingDiv.offsetTop + hisashiHeight / 2));
		if (distanceX > (hisashiWidth / 2 + hisashiWidth / 2) || distanceY > (hisashiHeight / 2 + hisashiHeight / 2)) {
			return false;
		}
		return true;
	}
	
	function keydownHandler(event) {
		var keyCode = event.keyCode;
		if (keyCode === 37) {//左矢印キー
			hisashiX = Math.max(hisashiX - 10, 0);
			updateHisashi();
		} else if (keyCode === 39) {//右矢印キー
			hisashiX = Math.min(hisashiX + 10, maxWidth);
			updateHisashi();
		}
	}
	
	function updateHisashi() {
		var hisashiDiv = document.getElementById('hisashi');
		hisashiDiv.style.left = hisashiX + 'px';
	}
	
	function updateScore() {
		var scoreDiv = document.getElementById('score');
		scoreDiv.innerHTML = 'スコア：' + score;
	}
</script>
<div id="hisashi">
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/house_1f3e0.png" width="100" height="100" alt="ひさし">
</div>
</body>
</html>

【ゲームの概要】
画面上からひさしの絵文字が落ちてきます。プレイヤーは左右の矢印キーでひさしを移動させ、ひさしに当たらないようにします。ひさしに当たるとゲームオーバーになります。ひさしを避けるたびにスコアが加算され、より高速でひさしが落ちてきます。