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

No:2976

862

←

Prev Next

→

Click game Clear the game if you click a million t..ALL
Developer User3649｜Date and time 23/6/23 9:55:58
Build time 35.905 sec｜Game capacity 3.698KB｜

Script

100万回クリックゲーム

クリックしたらポイントが増えます！

クリックポイントを増やす

+1ポイント/クリック

自動でクリック

1000

+5ポイント/秒

←

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>100万回クリックゲーム</title>
	<style>
		body {
			text-align: center;
			background-color: lightblue;
		}
		h1 {
			font-size: 50px;
		}
		button {
			font-size: 30px;
			padding: 20px;
			margin: 20px;
			background-color: yellow;
			border-radius: 10px;
			border: none;
			box-shadow: 5px 5px 10px gray;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}
		button:hover {
			transform: scale(1.1);
			box-shadow: 10px 10px 20px gray;
		}
		#points {
			font-size: 40px;
			margin-bottom: 50px;
		}
		#items {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 50px;
		}
		.item {
			background-color: pink;
			padding: 20px;
			margin: 10px;
			border-radius: 10px;
			border: 2px solid red;
			box-shadow: 5px 5px 10px gray;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}
		.item:hover {
			transform: scale(1.1);
			box-shadow: 10px 10px 20px gray;
		}
		.item img {
			width: 50px;
			height: 50px;
			margin-right: 10px;
			vertical-align: middle;
		}
		#auto-clicker {
			margin: 10px;
			display: none;
		}
	</style>
</head>
<body>
	<h1>100万回クリックゲーム</h1>
	<p>クリックしたらポイントが増えます！</p>
	<button id="clicker">クリック！</button>
	<p id="points">0</p>
	<div id="items">
		<div class="item" id="click-point-increaser">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/gem-stone_1f48e.png">
			<p>クリックポイントを増やす</p>
			<p id="click-point-increaser-price">50</p>
			<p id="click-point-increaser-effect">+1ポイント/クリック</p>
		</div>
		<div class="item" id="auto-clicker-increaser">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/watch_231a.png">
			<p>自動でクリック</p>
			<p id="auto-clicker-increaser-price">1000</p>
			<p id="auto-clicker-increaser-effect">+5ポイント/秒</p>
		</div>
	</div>
	<script>
		var points = 0;
		var clickMultiplier = 1;
		var clickPointIncreaserPrice = 50;
		var autoClickerPrice = 1000;

var clicker = document.querySelector("#clicker");
		clicker.addEventListener("click", function() {
			points += clickMultiplier;
			updatePoints();
			checkIfWon();
		});

var clickPointIncreaser = document.querySelector("#click-point-increaser");
		clickPointIncreaser.addEventListener("click", function() {
			if (points >= clickPointIncreaserPrice) {
				points -= clickPointIncreaserPrice;
				clickMultiplier++;
				clickPointIncreaserPrice *= 2;
				clickPointIncreaser.querySelector("#click-point-increaser-price").textContent = clickPointIncreaserPrice;
				clickPointIncreaser.querySelector("#click-point-increaser-effect").textContent = "+" + clickMultiplier + "ポイント/クリック";
				updatePoints();
			}
		});

function updatePoints() {
			document.querySelector("#points").textContent = points;
		}

function checkIfWon() {
			if (points >= 1000000) {
				alert("おめでとうございます！クリアしました！");
			}
		}
	</script>
</body>
</html>