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

No:1791

3414

←

Prev Next

→

ba-ba-bub
Developer User3025｜Date and time 23/6/19 1:37:06
Build time 32.589 sec｜Game capacity 2.827KB｜

Script

バブバブというゲームは、画面上に出現するバブルをタップして割っていくシンプルなゲームです。スマホでプレイすることを前提に、画面上には絵文字を多用しています。以下がプログラムの例です。

バブバブ

画面上に出現するバブルをタップして割ろう！

スコア: 0

残り時間: 30秒

このプログラムは、画面上に出現するバブルをクリックまたはタップして割り、スコアを稼ぐゲームです。一定時間内に出現するバブルを全て割ったスコアが表示されます。絵文字を組み合わせて、可愛らしいデザインにしています。また、スマホでの操作に最適化しているため、タッチ操作にも対応しています。

←

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: lightblue;
			text-align: center;
			font-size: 2em;
			-webkit-user-select: none;
			user-select: none;
		}
		.bubble {
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: pink;
			animation: moveBubble 5s linear infinite;
			cursor: pointer;
			touch-action: manipulation;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			emoji-rendering: optimizeSpeed;
		}
		@keyframes moveBubble {
			from {left: 0; top: 0;}
			to {left: 80%; top: 80%;}
		}
	</style>
</head>
<body>
	<h1>バブバブ</h1>
	<p>画面上に出現するバブルをタップして割ろう！</p>

document.addEventListener('click', createBubble);
		document.addEventListener('touchstart', function(event) {
			event.preventDefault(); // スクロールしないようにする
			createBubble();
		});

timer = setInterval(updateTimer, 1000);
	</script>