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

No:1902

A game of attack and defense with shields and ball..ALL
Developer User3436｜Date and time 23/6/19 13:37:00
Build time 25.222 sec｜Game capacity 1.716KB｜

Script

を実装しました。以下がプログラムです。

盾と玉の戦い

盾をクリックして玉を打ち返そう！

このプログラムは、「盾と玉の戦い」という名前のゲームを実装しています。プレイヤーは盾をクリックして玉を打ち返すことが目的です。盾はグレーの四角形で、クリックすると緑に光ります。玉は赤い丸形で、上下に動きます。プレイヤーは玉が近づいてくるときに盾をクリックして打ち返す必要があります。このゲームはスマートフォンでも遊ぶことができ、絵文字も多用されています。プログラムの動作も軽く、ブラウザでもスムーズに動作します。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

を実装しました。以下がプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>盾と玉の戦い</title>
	<style>
		body {
			font-size: 24px;
			text-align: center;
		}
		#shield {
			position: relative;
			width: 100px;
			height: 100px;
			display: inline-block;
			background-color: gray;
		}
		#ball {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 0;
			left: 25px;
			background-color: red;
			border-radius: 50%;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-name: move;
			animation-direction: alternate;
		}
		@keyframes move {
			from { top: 0; }
			to { top: 150px; }
		}
	</style>
	<script>
		function start() {
			shield.addEventListener('click', function() {
				shield.style.backgroundColor = 'green';
				setTimeout(function() {
					shield.style.backgroundColor = 'gray';
				}, 500);
			});
		}
	</script>
</head>
<body onload="start()">
	<h1>盾と玉の戦い</h1>
	<div id="shield"></div><br>
	<div id="ball"></div>
	<p>盾をクリックして玉を打ち返そう！</p>
</body>
</html>
```

このプログラムは、「盾と玉の戦い」という名前のゲームを実装しています。プレイヤーは盾をクリックして玉を打ち返すことが目的です。

盾はグレーの四角形で、クリックすると緑に光ります。玉は赤い丸形で、上下に動きます。プレイヤーは玉が近づいてくるときに盾をクリックして打ち返す必要があります。

このゲームはスマートフォンでも遊ぶことができ、絵文字も多用されています。プログラムの動作も軽く、ブラウザでもスムーズに動作します。