AI game creator

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

No:716

286

←

Prev Next

→

Pretty girl jumps.
Developer User3101｜Date and time 23/6/17 14:21:03
Build time 19.475 sec｜Game capacity 1.584KB｜

Script

ゲームを作成しました！以下がコードです。

👧

画面をタップしてジャンプ！

このプログラムは、可愛い女の子の絵文字が画面に表示され、タップするとジャンプするゲームです。女の子は、CSSのアニメーションを使ってジャンプしています。また、JavaScriptを使って、画面をクリックすることで女の子がジャンプするようになっています。スマホでも操作がしやすいよう、画面をタップするだけで操作できます。以上が、可愛い女の子がジャンプするゲームを1枚のhtmlファイルとして実装したプログラムです。

←

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>ジャンプ！</title>
	<style type="text/css">
		body {
			background-color: #ffe6fc;
			font-size: 2em;
			text-align: center;
		}
		#girl {
			font-size: 2em;
			display: inline-block;
			position: relative;
			top: 0;
			left: 0;
			animation: jump 1s ease-out;
			animation-fill-mode: forwards;
		}
		@keyframes jump {
			0% {
				top: 0;
			}
			50% {
				top: -50px;
			}
			100% {
				top: 0;
			}
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			document.body.addEventListener("click", function() {
				document.getElementById("girl").style.animation = "jump 1s ease-out";
				setTimeout(function() {
					document.getElementById("girl").style.animation = "";
				}, 1000);
			});
		};
	</script>
</head>
<body>
	<div id="girl">👧</div>
	<br><br>
	<span>画面をタップしてジャンプ！</span>
</body>
</html>
```

このプログラムは、可愛い女の子の絵文字が画面に表示され、タップするとジャンプするゲームです。女の子は、CSSのアニメーションを使ってジャンプしています。

また、JavaScriptを使って、画面をクリックすることで女の子がジャンプするようになっています。

スマホでも操作がしやすいよう、画面をタップするだけで操作できます。

以上が、可愛い女の子がジャンプするゲームを1枚のhtmlファイルとして実装したプログラムです。