Hubilai Haan ❤️'s game | AI game creator

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

No:739

338

Hubilai Haan ❤️
Developer User3112｜Date and time 23/6/17 15:40:19
Build time 53.532 sec｜Game capacity 3.997KB｜

ご注文の通り、以下は1枚のhtmlファイルにJavaScriptを含むゲームの実装例です。

Score: 0

このゲームでは、プレーヤーはフビライ・ハァンとして、上から降ってくる絵文字を回避しながら、下にいる心を表す絵文字を拾っていきます。プレーヤーはスマホのタッチ操作に対応しており、操作のアイコンには👑を使用しています。また、ゲーム画面には、スコアを表示するエリアがあります。絵文字は3種類（❤️、💔、💘）あり、ランダムな位置とスピードで落ちてきます。落下しきった絵文字は配列から削除されます。スマホなどのタッチデバイスでは、画面をタッチしている間、プレーヤーが移動します。スマホ以外のデバイスでは、移動はできません。ゲームスタート時には、1つの絵文字が生成されます。絵文字の生成は、ある程度の確率でランダムに行われます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

ご注文の通り、以下は1枚のhtmlファイルにJavaScriptを含むゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Emoji Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: white;
		}
		#score {
			position: fixed;
			top: 10px;
			left: 10px;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div id="score">Score: 0</div>
	<script>
		// ゲームの概要：
		// プレーヤーはフビライ・ハァンとして、
		// 上から降ってくる愛を表す絵文字を回避しながら、
		// 下にいる心を表す絵文字を拾っていくゲームです。
		
		// 変数の初期化
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var player = {
			x: canvas.width / 2,
			y: 400,
			width: 50,
			height: 50
		};
		var emojis = [];
		var emojiTypes = ["❤️", "💔", "💘"];
		
		// 絵文字の生成
		function spawnEmoji() {
			var type = emojiTypes[Math.floor(Math.random() * emojiTypes.length)];
			var emoji = {
				x: Math.random() * (canvas.width - 50),
				y: -50,
				width: 50,
				height: 50,
				speed: Math.floor(Math.random() * 3) + 1,
				type: type
			};
			emojis.push(emoji);
		}
		
		// ゲームループ
		function gameLoop() {
			// 背景の描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// プレーヤーの移動
			if (touches.length > 0) {
				var touch = touches[0];
				player.x = touch.clientX - (player.width / 2);
				player.y = touch.clientY - (player.height / 2);
			}
			
			// プレーヤーの描画
			ctx.font = "50px serif";
			ctx.fillText("👑", player.x, player.y);
			
			// 絵文字の移動と描画
			for (var i = 0; i < emojis.length; i++) {
				var emoji = emojis[i];
				emoji.y += emoji.speed;
				
				if (emoji.y > canvas.height) {
					emojis.splice(i, 1);
					i--;
					continue;
				}
				
				ctx.font = "50px serif";
				ctx.fillText(emoji.type, emoji.x, emoji.y);
				
				if (checkCollision(player, emoji)) {
					emojis.splice(i, 1);
					i--;
					score++;
					document.getElementById("score").textContent = "Score: " + score;
				}
			}
			
			// 絵文字の生成
			if (Math.random() < 0.03) {
				spawnEmoji();
			}
			
			requestAnimationFrame(gameLoop);
		}
		
		// 衝突判定
		function checkCollision(a, b) {
			return (
				a.x < b.x + b.width &&
				a.x + a.width > b.x &&
				a.y < b.y + b.height &&
				a.y + a.height > b.y
			);
		}
		
		// タッチイベントの処理
		var touches = [];
		document.addEventListener("touchstart", function(event) {
			touches = event.touches;
		});
		document.addEventListener("touchmove", function(event) {
			event.preventDefault();
			touches = event.touches;
		});
		document.addEventListener("touchend", function(event) {
			touches = [];
		});
		
		// ゲーム開始
		spawnEmoji();
		gameLoop();
	</script>
</body>
</html>

このゲームでは、プレーヤーはフビライ・ハァンとして、上から降ってくる絵文字を回避しながら、下にいる心を表す絵文字を拾っていきます。プレーヤーはスマホのタッチ操作に対応しており、操作のアイコンには👑を使用しています。また、ゲーム画面には、スコアを表示するエリアがあります。絵文字は3種類（❤️、💔、💘）あり、ランダムな位置とスピードで落ちてきます。落下しきった絵文字は配列から削除されます。スマホなどのタッチデバイスでは、画面をタッチしている間、プレーヤーが移動します。スマホ以外のデバイスでは、移動はできません。ゲームスタート時には、1つの絵文字が生成されます。絵文字の生成は、ある程度の確率でランダムに行われます。