pota pota yaki (var. of senbei (rice cracker) coated with a sweet soy-sauce glaze's game | AI game creator

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

No:11066

126

pota pota yaki (var. of senbei (rice cracker) coat..ALL
Developer User1006｜Date and time 23/8/7 15:27:53
Build time 24.07 sec｜Game capacity 2.292KB｜

了解です。以下が、要件に基づいて作成した「ぽたぽた焼き」のゲームの実装例です。この実装では、ユーザーがスマートフォンの画面をタッチしてぽたぽた焼きをすることができます。

🍳

このプログラムでは、`container`というクラスを持つ要素の中央に、`frying-pan`というクラスを持つフライパンの絵文字が表示されます。ユーザーがフライパンをクリックすると、ランダムな食材の絵文字がフライパンの位置に落ちてきます。 CSSの`style`ブロックでは、`container`クラスの要素を画面いっぱいに広げるスタイルを指定しています。`frying-pan`クラスの要素は、フォントサイズやカーソルの形状を指定しています。 JavaScriptの`cook`関数では、ランダムな食材の絵文字を生成し、クリック位置に表示する処理を行っています。生成された食材は、`animationend`イベントが発火した際に自動的に削除されます。この実装例を1枚のHTMLファイルに保存して、スマートフォンで開くことで「ぽたぽた焼き」のゲームがプレイできます。

→ 　

0　

0　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

了解です。

以下が、要件に基づいて作成した「ぽたぽた焼き」のゲームの実装例です。この実装では、ユーザーがスマートフォンの画面をタッチしてぽたぽた焼きをすることができます。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ぽたぽた焼き</title>
	<style>
		.container {
			width: 100vw;
			height: 100vh;
			background-color: #f7f7f7;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.frying-pan {
			font-size: 80px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="frying-pan" onclick="cook()">🍳</div>
	</div>

<script>
		function cook() {
			const fryingPan = document.querySelector('.frying-pan');
			const emojis = ["🥓", "🥩", "🍤", "🍆", "🥦", "🥚"];

const randomIndex = Math.floor(Math.random() * emojis.length);
			 
			const newEmoji = document.createElement('div');
			newEmoji.innerText = emojis[randomIndex];
			newEmoji.style.position = 'absolute';
			newEmoji.style.left = `${event.clientX}px`;
			newEmoji.style.top = `${event.clientY}px`;

newEmoji.addEventListener('animationend', () => {
				newEmoji.remove();
			});

document.body.appendChild(newEmoji);
		}
	</script>
</body>
</html>
```

このプログラムでは、`container`というクラスを持つ要素の中央に、`frying-pan`というクラスを持つフライパンの絵文字が表示されます。ユーザーがフライパンをクリックすると、ランダムな食材の絵文字がフライパンの位置に落ちてきます。

CSSの`style`ブロックでは、`container`クラスの要素を画面いっぱいに広げるスタイルを指定しています。`frying-pan`クラスの要素は、フォントサイズやカーソルの形状を指定しています。

JavaScriptの`cook`関数では、ランダムな食材の絵文字を生成し、クリック位置に表示する処理を行っています。生成された食材は、`animationend`イベントが発火した際に自動的に削除されます。

この実装例を1枚のHTMLファイルに保存して、スマートフォンで開くことで「ぽたぽた焼き」のゲームがプレイできます。