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

No:611

290

←

Prev Next

→

limited rock-paper-scissors game
Developer User3044｜Date and time 23/6/16 12:26:38
Build time 35.539 sec｜Game capacity 2.605KB｜

Script

では以下にアプリの実装例を示します。

限定ジャンケン

スマホを傾けて手を形成して下さい

このアプリは手の形を作って限定ジャンケンを行うゲームです。スマホを傾けて手を形成し、画面に表示される手形と対戦します。結果はリアルタイムで表示され、2秒後に初期化されます。絵文字を多用することで、シンプルかつ親しみやすいUIを実現しています。

←

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: 24px;
			text-align: center;
		}
		button {
			font-size: 20px;
			margin: 10px;
			padding: 10px;
			border-radius: 10px;
			background-color: #eee;
			cursor: pointer;
		}
		#result {
			font-size: 36px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>限定ジャンケン</h1>
	<p>スマホを傾けて手を形成して下さい</p>
	<button id="gu">✊</button>
	<button id="choki">✌</button>
	<button id="pa">✋</button>
	<div id="result"></div>
	<script>
		const HANDS = ['gu', 'choki', 'pa'];
		const EMOJIS = {
			'gu': '✊',
			'choki': '✌',
			'pa': '✋'
		};
		const RESULTS = {
			'gu-gu': 'あいこ',
			'gu-choki': 'あなたの勝ち！',
			'gu-pa': 'あなたの負け・・・',
			'choki-gu': 'あなたの負け・・・',
			'choki-choki': 'あいこ',
			'choki-pa': 'あなたの勝ち！',
			'pa-gu': 'あなたの勝ち！',
			'pa-choki': 'あなたの負け・・・',
			'pa-pa': 'あいこ'
		};

window.addEventListener('deviceorientation', event => {
			let x = event.beta; // 端末を前後に傾けた角度
			let y = event.gamma; // 端末を左右に傾けた角度
			let z = event.alpha; // 端末の向きを表す、北を0度とした時計回りの角度

let handIndex = Math.round((y + 180) / 90);
			if (handIndex < 0) handIndex = 0;
			if (handIndex > 2) handIndex = 2;

let myHand = HANDS[handIndex];
			document.getElementById(myHand).style.backgroundColor = '#ddd';

let pcHand = HANDS[Math.floor(Math.random() * 3)];
			document.getElementById(pcHand).style.backgroundColor = '#ddd';
			document.getElementById(pcHand).disabled = true;

let result = RESULTS[myHand + '-' + pcHand];
			document.getElementById('result').innerHTML = result;

setTimeout(() => {
				document.getElementById(myHand).style.backgroundColor = '#eee';
				document.getElementById(pcHand).style.backgroundColor = '#eee';
				document.getElementById(pcHand).disabled = false;
				document.getElementById('result').innerHTML = '';
			}, 2000);
		});
	</script>
</body>
</html>
```