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

No:1429

143

←

Prev Next

→

clicker game
Developer AI絵師｜Date and time 23/6/18 15:51:11
Build time 23.772 sec｜Game capacity 1.875KB｜

Script

を実装してみました。

クリッカーゲーム

スコア: 0

👀

このクリッカーゲームは、画面の中央に「クリックしてスコアを追加」というボタンがあります。そのボタンをクリックすると、スコアが1ずつ増えます。また、画面上部には現在のスコアが表示されます。さらに、画面中央には絵文字が表示されます。絵文字は、1秒ごとにランダムなものに変わります。スマホでの操作にも対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

を実装してみました。

<!DOCTYPE html>
<html>
<head>
	<title>クリッカーゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			background-color: #f2f2f2;
			text-align: center;
			font-family: sans-serif;
		}

h1{
			font-size: 28px;
			color: #0073e6;
			margin-top: 30px;
			margin-bottom: 20px;
		}

button{
			background-color: #0073e6;
			color: #fff;
			padding: 10px 30px;
			border: none;
			border-radius: 5px;
			box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
			font-size: 16px;
			cursor: pointer;
			margin-top: 20px;
		}

#score{
			font-size: 24px;
			color: #333;
		}

#emoji{
			font-size: 64px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>クリッカーゲーム</h1>
	<div id="score">スコア: 0</div>
	<button onclick="addScore()">クリックしてスコアを追加</button>
	<div id="emoji">👀</div>

function addScore(){
			score++;
			document.getElementById('score').innerHTML = 'スコア: ' + score;
			updateEmoji();
		}

function updateEmoji(){
			var index = Math.floor(Math.random() * emojis.length);
			document.getElementById('emoji').innerHTML = emojis[index];
		}

setInterval(function(){
			updateEmoji();
		}, 1000);
	</script>
</body>
</html>