A mans school specialty with a bad feeling's game

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

No:3418

1961

←

Prev Next

→

A mans school specialty with a bad feeling
Developer User3698｜Date and time 23/6/25 2:06:05
Build time 45.55 sec｜Game capacity 3.75KB｜

Script

「暴れん坊将軍ゲーム」をご紹介します。以下が実装した1枚のhtmlファイルのコードです。

このゲームは画面上に表示される暴れん坊将軍のキャラクターを操作し、画面上から降ってくる鬼のキャラクターを避けながらスコアを競うゲームです。キャラクターの操作はスマホのタッチ操作で行います。ゲームが始まると、暴れん坊将軍のキャラクターが画面の中央下部に現れ、ランダムな場所から鬼のキャラクターが落ちてきます。画面をタッチすると、将軍のキャラクターがタッチした方向に移動します。将軍のキャラクターが鬼のキャラクターに当たると、ゲームオーバーになりスコアが表示されます。画面の上部には現在のスコアが表示されます。なお、キャラクターの画像としては暴れん坊将軍と鬼の絵文字を使用しています。

←

Prev　Next

→ 　

Back　

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

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

「暴れん坊将軍ゲーム」をご紹介します。

以下が実装した1枚のhtmlファイルのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>暴れん坊将軍ゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
			margin: 10px auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="320" height="480"></canvas>

// 画像読み込み
		var heroImage = new Image();
		heroImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/man_1f468.png";

var enemyImage = new Image();
		enemyImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/japanese-ogre_1f479.png";

// キャラクターの初期値
		var hero = {
			x: canvas.width/2,
			y: canvas.height-64
		};

var enemy = {
			x: 0,
			y: 0
		};

// キャラクター移動処理
		document.addEventListener("touchstart", handleTouchStart, false);
		document.addEventListener("touchend", handleTouchEnd, false);

var xDown = null;
		var yDown = null;

function handleTouchStart(event) {
			xDown = event.touches[0].clientX;
			yDown = event.touches[0].clientY;
		}

function handleTouchEnd(event) {
			if (!xDown || !yDown) {
				return;
			}

var xUp = event.changedTouches[0].clientX;
			var yUp = event.changedTouches[0].clientY;

var xDiff = xUp - xDown;
			var yDiff = yUp - yDown;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
				if (xDiff > 0) {
					hero.x += 32;
				} else {
					hero.x -= 32;
				}
			} else {
				if (yDiff > 0) {
					hero.y += 32;
				} else {
					hero.y -= 32;
				}
			}

xDown = null;
			yDown = null;
		}

// キャラクター描画処理
		function drawHero() {
			ctx.drawImage(heroImage, hero.x, hero.y, 64, 64);
		}

function drawEnemy() {
			ctx.drawImage(enemyImage, enemy.x, enemy.y, 64, 64);
		}

// 敵キャラクター移動処理
		function moveEnemy() {
			if (!gameover) {
				if (enemy.y > canvas.height) {
					enemy.x = Math.floor(Math.random() * (canvas.width - 64));
					enemy.y = -64;
					score++;
				} else {
					enemy.y += 8;
				}

// 当たり判定
				if (hero.x < enemy.x + 64 && hero.x + 64 > enemy.x && hero.y < enemy.y + 64 && hero.y + 64 > enemy.y) {
					gameover = true;
					alert("ゲームオーバー！スコア: " + score);
				}
			}
		}

// ゲームループ
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

drawHero();
			moveEnemy();
			drawEnemy();

if (!gameover) {
				window.requestAnimationFrame(gameLoop);
			}
		}

// 初期処理
		enemy.x = Math.floor(Math.random() * (canvas.width - 64));
		gameLoop();
	</script>
</body>
</html>
```

このゲームは画面上に表示される暴れん坊将軍のキャラクターを操作し、画面上から降ってくる鬼のキャラクターを避けながらスコアを競うゲームです。キャラクターの操作はスマホのタッチ操作で行います。

ゲームが始まると、暴れん坊将軍のキャラクターが画面の中央下部に現れ、ランダムな場所から鬼のキャラクターが落ちてきます。画面をタッチすると、将軍のキャラクターがタッチした方向に移動します。将軍のキャラクターが鬼のキャラクターに当たると、ゲームオーバーになりスコアが表示されます。

画面の上部には現在のスコアが表示されます。

なお、キャラクターの画像としては暴れん坊将軍と鬼の絵文字を使用しています。