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

No:1282

152

←

Prev Next

→

Belt action with cats battling
Developer User3294｜Date and time 23/6/18 9:48:44
Build time 46.647 sec｜Game capacity 3.721KB｜

Script

ゲームを作成しました。ゲーム概要：プレイヤーは可愛いネコのキャラクターを操作し、敵のネコとバトルするベルトアクションゲームです。敵を倒して進んでいき、最後に待ち受ける強敵を倒すことが目的です。以下がプログラムです。

ネコバトル

←: 左移動

→: 右移動

z: ジャンプ

このプログラムでは、HTMLのcanvas要素を用いてゲームを実装しています。ユーザーがキーボードの矢印キーを操作することで、キャラクターを移動させることができます。また、zキーを押すことでジャンプができます。ゲーム終了時には勝利・敗北を表示するようになっています。絵文字は、「ネコバトル」のタイトルで使用しており、「勝利！」のテキストで使用しています。モバイル端末でも操作しやすいよう、文字サイズを大きくしました。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

ゲームを作成しました。

ゲーム概要：
プレイヤーは可愛いネコのキャラクターを操作し、敵のネコとバトルするベルトアクションゲームです。敵を倒して進んでいき、最後に待ち受ける強敵を倒すことが目的です。

以下がプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>ネコバトル</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			text-align: center;
		}
		canvas {
			background-color: #fff;
			border: 2px solid black;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<h1>ネコバトル</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<p>←: 左移動</p>
	<p>→: 右移動</p>
	<p>z: ジャンプ</p>
	<script>
		// キャンバスの設定
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

// キャラクターの設定
		const player = {
			x: 30,
			y: canvas.height - 70,
			width: 60,
			height: 60,
			speed: 5,
			jumpHeight: 10,
			jumpCount: 0,
			isJumping: false,
			isGrounded: true
		};
		const enemy = {
			x: canvas.width - 80,
			y: canvas.height - 70,
			width: 60,
			height: 60,
			speed: 3,
			isDead: false
		};

// イベントリスナーの設定
		document.addEventListener("keydown", function(event) {
			switch (event.code) {
				case "ArrowLeft":
					player.x -= player.speed;
					break;
				case "ArrowRight":
					player.x += player.speed;
					break;
				case "KeyZ":
					if (player.isGrounded) {
						player.isJumping = true;
						player.jumpCount = 0;
						player.isGrounded = false;
					}
					break;
			}
		});

// ゲームループの設定
		function gameLoop() {
			// キャラクターの描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#f5f5f5";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#000";
			ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
			ctx.fillStyle = "#f37c00";
			ctx.fillRect(player.x, player.y, player.width, player.height);

// キャラクターの移動
			if (player.isJumping) {
				player.y -= player.jumpHeight;
				player.jumpCount++;
				if (player.jumpCount >= 10) {
					player.isJumping = false;
				}
			} else if (!player.isGrounded) {
				player.y += player.jumpHeight;
				if (player.y >= canvas.height - player.height) {
					player.isGrounded = true;
					player.y = canvas.height - player.height;
				}
			}

if (enemy.isDead) {
				ctx.font = "50px Arial";
				ctx.fillStyle = "#f37c00";
				ctx.fillText("勝利！", canvas.width / 2 - 80, canvas.height / 2 + 10);
				return;
			}

if (player.x + player.width >= enemy.x && player.x <= enemy.x + enemy.width && player.y + player.height >= enemy.y) {
				enemy.isDead = true;
			}

if (enemy.x <= 0) {
				alert("敗北！");
				window.location.reload();
			} else {
				enemy.x -= enemy.speed;
			}

window.requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>
</html>

このプログラムでは、HTMLのcanvas要素を用いてゲームを実装しています。ユーザーがキーボードの矢印キーを操作することで、キャラクターを移動させることができます。また、zキーを押すことでジャンプができます。ゲーム終了時には勝利・敗北を表示するようになっています。

絵文字は、「ネコバトル」のタイトルで使用しており、「勝利！」のテキストで使用しています。モバイル端末でも操作しやすいよう、文字サイズを大きくしました。