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

No:1681

357

←

Prev Next

→

Idol Chong Hei
Developer sayaensm｜Date and time 23/6/18 21:42:45
Build time 59.369 sec｜Game capacity 4.636KB｜

Script

アプリ名：偶像崇拝ゲーム概要：あなたは偽の神となり、信仰者を集めることが目的です。信仰者を増やすために、神(God)をタップして神のエネルギーを増やし、自分が言うことに従う信仰者を増やします。時々、信仰者は偶像アイドルになることを望むので、アイドルに変身することができます。それぞれのアイドルには、個性的なスキルがあります。実装：以下が1枚のhtmlファイルになります。JavaScriptを含んでいます。スマホでも操作可能です。

偶像崇拝

God 0

0 Followers

Dance：一定時間ごとにフォロワーを増やす

効果時間：10秒

Sing：フォロワーがダブルになる

効果時間：5秒

Act：自分が言うことを聞くフォロワーが増える

効果時間：5秒

←

Prev　Next

→ 　

Back　

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

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

アプリ名：偶像崇拝

ゲーム概要：あなたは偽の神となり、信仰者を集めることが目的です。信仰者を増やすために、神(God)をタップして神のエネルギーを増やし、自分が言うことに従う信仰者を増やします。時々、信仰者は偶像アイドルになることを望むので、アイドルに変身することができます。それぞれのアイドルには、個性的なスキルがあります。

実装：以下が1枚のhtmlファイルになります。JavaScriptを含んでいます。スマホでも操作可能です。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>偶像崇拝</title>
	<style>
		body {
			background-color: #FFCC99;
			text-align: center;
		}
		h1,h2 {
			color: #663300;
			background-color: #FFFFCC;
			padding: 10px;
			border-radius: 10px;
			display: inline-block;
		}
		#god {
			width: 100px;
			height: 100px;
			margin: 0 auto;
			cursor: pointer;
		}
		.fa {
			font-size: 40px;
			margin: 0 20px;
			cursor: pointer;
		}
		.active {
			color: yellow;
		}
		#followers {
			font-size: 25px;
			margin: 20px;
			color: white;
			text-shadow: 1px 1px 3px black;
		}
		#idols {
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.idol {
			width: 150px;
			height: 150px;
			margin: 10px;
			cursor: pointer;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;
		}
		.idol img {
			width: 80px;
			height: 80px;
			margin-bottom: 10px;
			opacity: 0.7;
		}
		.idol:hover {
			transform: scale(1.1);
			box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
		}
		.skill {
			margin-top: 10px;
			padding: 5px;
			background-color: #FFFFCC;
			border-radius: 5px;
			display: none;
			text-align: left;
		}
		.skill.active {
			display: block;
		}
	</style>
</head>
<body>
	<h1>偶像崇拝</h1>
	<h2>God <span id="energy">0</span></h2>
	<div id="god"><img src="https://img.icons8.com/color/48/000000/god.png"/></div>
	<div id="followers">0 Followers</div>
	<div id="idols">
		<div class="idol" data-skill="dance">
			<img src="https://img.icons8.com/offices/64/000000/dance.png"/>
			<div class="skill">
				<p>Dance：一定時間ごとにフォロワーを増やす</p>
				<p>効果時間：10秒</p>
			</div>
		</div>
		<div class="idol" data-skill="sing">
			<img src="https://img.icons8.com/ultraviolet/40/000000/microphone.png"/>
			<div class="skill">
				<p>Sing：フォロワーがダブルになる</p>
				<p>効果時間：5秒</p>
			</div>
		</div>
		<div class="idol" data-skill="act">
			<img src="https://img.icons8.com/offices/40/000000/clapboard.png"/>
			<div class="skill">
				<p>Act：自分が言うことを聞くフォロワーが増える</p>
				<p>効果時間：5秒</p>
			</div>
		</div>
	</div>
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
	<script>
		let energy = 0;
		let followers = 0;
		let idols = document.querySelectorAll('.idol');

let god = document.getElementById('god');
		god.addEventListener('click', function() {
			energy++;
			document.getElementById('energy').textContent = energy;
			if(energy % 10 === 0) {
				followers++;
				document.getElementById('followers').textContent = followers + ' Followers';
			}
		});

idols.forEach(function(idol) {
			idol.addEventListener('click', function() {
				let skill = this.getAttribute('data-skill');
				let skillElement = this.querySelector('.skill');
				idols.forEach(function(idol) {
					idol.classList.remove('active');
				})
				this.classList.add('active');
				skillElement.classList.add('active');
				let timeout = null;
				if(skill === 'dance') {
					timeout =  setInterval(function() {
						followers += 5;
						document.getElementById('followers').textContent = followers + ' Followers';
					}, 10000);
				} else if(skill === 'sing') {
					followers *= 2;
					document.getElementById('followers').textContent = followers + ' Followers';
					timeout = setTimeout(function() {
						followers = Math.floor(followers / 2);
						document.getElementById('followers').textContent = followers + ' Followers';
					}, 5000);
				} else if(skill === 'act') {
					timeout = setTimeout(function() {
						idols.forEach(function(idol) {
							idol.classList.remove('active');
						})
					}, 5000);
				}

setTimeout(function() {
					idol.classList.remove('active');
					skillElement.classList.remove('active');
					clearTimeout(timeout);
				}, 5000);
			});
		});
	</script>
</body>
</html>
```