Using JavaScript to create images's game | AI game creator

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

No:3820

1494

Using JavaScript to create images
Developer User3740｜Date and time 23/6/26 17:59:02
Build time 30.801 sec｜Game capacity 2.781KB｜

「落ち物ゲーム」を作ります。以下が実装例です。

このゲームでは、画面下部にいるキャラクターをタップするとクリアとなります。画面上部から5つのアイテムが落ちてくるので、キャラクターをクリックしてアイテムを避けながらクリアを目指しましょう。 JavaScriptの部分では、`startGame`関数を定義しています。この関数では、キャラクターをクリックしたときにゲームクリアのアラートを表示する処理と、5つのアイテムを落とす処理を実装しています。アイテムの落下はCSSの`animation`プロパティを使用しています。アイテムはランダムな位置から落下するようにしています。また、スマホ操作にも対応するように、CSSの`@media`ルールを使って画像のサイズを変更しています。画像の生成については、`<div>`要素を生成し、そのCSSで背景画像を設定しています。また、アイテムの位置をランダムにするために、`style`属性を使用してCSSの`left`プロパティを動的に変更しています。

→ 　

2　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

「落ち物ゲーム」を作ります。

以下が実装例です。

```
<!DOCTYPE html>
<html>
<head>
	<title>落ち物ゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		
		#game-area {
			position: relative;
			width: 100vw;
			height: 100vh;
			background-color: #f9f9f9;
		}
		
		#character {
			position: absolute;
			bottom: 0;
			width: 80px;
			height: 80px;
			background-image: url('character.png');
			background-size: contain;
			background-repeat: no-repeat;
		}
		
		.item {
			position: absolute;
			width: 50px;
			height: 50px;
			background-image: url('item.png');
			background-size: contain;
			background-repeat: no-repeat;
			animation: item-fall 2s linear;
		}
		
		@media screen and (max-width: 480px) {
			#character {
				width: 40px;
				height: 40px;
			}
			
			.item {
				width: 25px;
				height: 25px;
			}
		}
		
		@keyframes item-fall {
			0% {
				top: -50px;
			}
			100% {
				top: 100vh;
			}
		}
	</style>
	<script>
		function startGame() {
			document.getElementById('character').addEventListener('click', function() {
				alert('ゲームクリア！');
			});
			
			for (var i = 0; i < 5; i++) {
				setTimeout(function() {
					var item = document.createElement('div');
					item.classList.add('item');
					item.style.left = Math.floor(Math.random() * 90) + 'vw';
					document.getElementById('game-area').appendChild(item);
				}, i * 500);
			}
		}
	</script>
</head>
<body onload="startGame();">
	<div id="game-area">
		<div id="character"></div>
	</div>
</body>
</html>
```

このゲームでは、画面下部にいるキャラクターをタップするとクリアとなります。画面上部から5つのアイテムが落ちてくるので、キャラクターをクリックしてアイテムを避けながらクリアを目指しましょう。

JavaScriptの部分では、`startGame`関数を定義しています。この関数では、キャラクターをクリックしたときにゲームクリアのアラートを表示する処理と、5つのアイテムを落とす処理を実装しています。

アイテムの落下はCSSの`animation`プロパティを使用しています。アイテムはランダムな位置から落下するようにしています。また、スマホ操作にも対応するように、CSSの`@media`ルールを使って画像のサイズを変更しています。

画像の生成については、`<div>`要素を生成し、そのCSSで背景画像を設定しています。また、アイテムの位置をランダムにするために、`style`属性を使用してCSSの`left`プロパティを動的に変更しています。