下剋上ゲーム

相撲の世界で下位力士が上位力士に勝利することを“下剋上”と言います。

このゲームではあなたが下位力士となり、上位力士に勝利するためにトレーニングを積みます。

フリックでトレーニングを行い、成長したら上位力士と勝負しましょう！

※モバイル端末のみ対応しています。

Q.なぜ相撲取りは巨漢なのに、駄菓子屋に置いてあるキンチャクは小さいのでしょうか？
A.鍛錬が浅いからです！

以下が下剋上ゲームの実装例です。JavaScriptのevalを使うことや、他のサイトに遷移させること、リダイレクトさせることはせず、安全性を考慮します。

HTML:

```html
<!DOCTYPE html>
<html>
<head>
	<title>下剋上ゲーム</title>
	<style>
		body {
			background-color: #F1F1F1;
			font-family: Arial, sans-serif;
			text-align: center;
		}

		h1 {
			margin-top: 50px;
			font-size: 48px;
			color: #494949;
		}

		p {
			font-size: 24px;
			color: #494949;
		}

		#score {
			font-size: 36px;
			color: #494949;
		}

		#button-area {
			margin-top: 50px;
		}

		button {
			background-color: #4CAF50;
			color: white;
			border: none;
			padding: 20px;
			font-size: 24px;
			cursor: pointer;
		}

		button:hover {
			background-color: #3E8E41;
		}

		#joke {
			margin-top: 50px;
			font-style: italic;
			color: #797979;
		}
	</style>
</head>
<body>
	<h1>下剋上ゲーム</h1>
	<p>相撲の世界で下位力士が上位力士に勝利することを“下剋上”と言います。</p>
	<p>このゲームではあなたが下位力士となり、上位力士に勝利するためにトレーニングを積みます。</p>
	<p>フリックでトレーニングを行い、成長したら上位力士と勝負しましょう！</p>
	<p>※モバイル端末のみ対応しています。</p>
	<div id="score">0</div>
	<div id="button-area">
		<button onclick="startTraining()">トレーニング開始</button>
	</div>
	<div id="joke">Q.なぜ相撲取りは巨漢なのに、駄菓子屋に置いてあるキンチャクは小さいのでしょうか？<br>A.鍛錬が浅いからです！</div>
	<script src="script.js"></script>
</body>
</html>
```

JavaScript:

```javascript
let score = 0;
document.addEventListener('DOMContentLoaded', function() {
	document.addEventListener('touchstart', handleTouchStart, false);        
	document.addEventListener('touchmove', handleTouchMove, false);
});

let xDown = null;                                                        
let yDown = null;

function getTouches(evt) {
	return evt.touches ||             
			evt.originalEvent.touches; 
}                                                     

function handleTouchStart(evt) {
	const firstTouch = getTouches(evt)[0];                                      
	xDown = firstTouch.clientX;                                      
	yDown = firstTouch.clientY;                                      
};                                                

function handleTouchMove(evt) {
	if ( ! xDown || ! yDown ) {
		return;
	}

	let xUp = evt.touches[0].clientX;                                    
	let yUp = evt.touches[0].clientY;

	let xDiff = xDown - xUp;
	let yDiff = yDown - yUp;

	if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
		if ( xDiff > 0 ) {
			train();
		} else {
			alert('フリックしてトレーニングしてください！');
		}                       
	} else {
		if ( yDiff > 0 ) {
			alert('下にスワイプすることはできません。');
		} else { 
			startMatch();
		}                                                                 
	}
	/* reset values */
	xDown = null;
	yDown = null;                                             
};

function train() {
	score++;
	document.querySelector('#score').textContent = score;
}

function startTraining() {
	if (score >= 10) {
		startMatch();
	} else {
		alert('トレーニングは10回以上してください！');
	}
}

function startMatch() {
	if (score >= 10) {
		alert('上位力士と対戦します！');
	} else {
		alert('まだトレーニングが足りません！');
	}
}
```

ジョークとして、相撲取りがキンチャク（小さい袋）を鍛えないため小さい理由を挙げるというのを取り入れました。このように、アプリのコンテンツに関連する面白いジョークを盛り込むことで、ユーザーの楽しみも増える可能性があります。