[When the result is inorganic, we have made it lively and easy to understand, with appropriate pictograms if possible.'s game

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

No:9211

212

←

Prev Next

→

[When the result is inorganic, we have made it liv..ALL
Developer User4314｜Date and time 23/7/22 14:59:42
Build time 39.593 sec｜Game capacity 4.213KB｜

Script

了解しました。以下に、シンプルなゲームをHTMLファイルとして実装します。このゲームでは、ユーザーがスマホの画面タップでボールを操作し、障害物を避けることを目指します。

🐯

このゲームでは、ボールと障害物の位置を更新する`update`関数、画面の再描画を行う`render`関数、ボールと障害物の当たり判定を行う`collisionDetection`関数を用意しています。`gameLoop`関数により、ゲームの継続的な処理が行われます。ボールの位置はユーザーの画面タップに応じて変化し、障害物との当たり判定が行われます。なお、ゲームのルールや見た目は非常にシンプルなものですが、ご要望に合わせて必要に応じて拡張することも可能です。必要に応じて、上記の実装を修正・拡張してお楽しみください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple Game</title>
	<style>
		#gameContainer {
			width: 300px;
			height: 500px;
			border: 1px solid black;
			position: relative;
			margin: 0 auto;
		}

#ball {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: orange;
			position: absolute;
			bottom: 0;
		}

.obstacle {
			width: 100px;
			height: 20px;
			background-color: red;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="gameContainer">
		<div id="ball"></div>
		<div id="obstacle">🐯</div>
	</div>

// 障害物の初期位置と速度
		let obstaclePosition = { x: 0, y: -20 };
		let obstacleSpeed = { x: 2, y: 0 };

// ゲーム開始の処理
		function startGame() {
			// ボールを画面中央に配置
			ballPosition.x = 150;
			ballPosition.y = 125;
			ballSpeed.x = 0;
			ballSpeed.y = 0;

// 障害物を画面上部に配置
			obstaclePosition.x = Math.random() * 200;
			obstaclePosition.y = -20;
			obstacleSpeed.x = 2;
			obstacleSpeed.y = 0;

// ゲームループを開始
			gameLoop();
		}

// ゲームループの処理
		function gameLoop() {
			// 画面の更新
			update();

// 画面の再描画
			render();

// 次のフレームの処理を予約
			requestAnimationFrame(gameLoop);
		}

// 画面の更新
		function update() {
			// ボールの位置を更新
			ballPosition.x += ballSpeed.x;
			ballPosition.y += ballSpeed.y;

// 障害物の位置を更新
			obstaclePosition.x += obstacleSpeed.x;
			obstaclePosition.y += obstacleSpeed.y;

// ボールが障害物に当たった場合の処理
			if (collisionDetection()) {
				ballSpeed.y = 0; // ボールのy軸方向の速度を0にする
			}
		}

// 画面の再描画
		function render() {
			// ボールの位置を反映
			document.getElementById("ball").style.left = ballPosition.x + "px";
			document.getElementById("ball").style.bottom = ballPosition.y + "px";

// 障害物の位置を反映
			document.getElementById("obstacle").style.left = obstaclePosition.x + "px";
			document.getElementById("obstacle").style.top = obstaclePosition.y + "px";
		}

// ボールと障害物の当たり判定
		function collisionDetection() {
			let ballLeft = ballPosition.x;
			let ballRight = ballPosition.x + 50;
			let ballTop = ballPosition.y + 50;
			let ballBottom = ballPosition.y;

let obstacleLeft = obstaclePosition.x;
			let obstacleRight = obstaclePosition.x + 100;
			let obstacleTop = obstaclePosition.y + 20;
			let obstacleBottom = obstaclePosition.y;

if (ballRight < obstacleLeft || ballLeft > obstacleRight || ballTop < obstacleBottom || ballBottom > obstacleTop) {
				return false;
			} else {
				return true;
			}
		}

// 画面タップ時の処理
		document.getElementById("gameContainer").addEventListener("click", function() {
			ballSpeed.y = 5; // ボールのy軸方向の速度を設定
		});

startGame(); // ゲーム開始
	</script>
</body>
</html>
```

なお、ゲームのルールや見た目は非常にシンプルなものですが、ご要望に合わせて必要に応じて拡張することも可能です。必要に応じて、上記の実装を修正・拡張してお楽しみください。