What is a black cat? What is it?'s game

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

No:3252

176

←

Prev Next

→

What is a black cat? What is it?
Developer User3589｜Date and time 23/6/24 9:54:41
Build time 19.751 sec｜Game capacity 1.744KB｜

Script

黒猫ゲーム

黒猫を矢印キーで操作してね！

このゲームは、黒猫が画面内を自由に移動できるシンプルなものです。黒猫は矢印キーで操作し、上下左右に移動することができます。ゲーム画面はcanvasで描画され、黒猫は絵文字の「🐱」で表現されます。スマホでも操作できるよう、矢印キーを押せば黒猫が動くようにしています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

黒猫ゲーム

<!DOCTYPE html>
<html>
<head>
	<title>黒猫ゲーム</title>
	<script type="text/javascript">
		// 黒猫クラス
		class BlackCat {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.image = "🐱";
			}

moveLeft() {
				this.x--;
			}

moveRight() {
				this.x++;
			}

moveUp() {
				this.y--;
			}

moveDown() {
				this.y++;
			}
		}

// ゲーム開始
		function startGame() {
			let canvas = document.getElementById("myCanvas");
			let ctx = canvas.getContext("2d");

// 黒猫の初期座標
			let cat = new BlackCat(100, 100);

// ゲームループ
			setInterval(function() {
				// 画面をクリア
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// 黒猫を描画
				ctx.font = "50px Arial";
				ctx.fillText(cat.image, cat.x, cat.y);

}, 10);

// キーボード操作
			window.addEventListener("keydown", function(event) {
				switch(event.key) {
					case "ArrowLeft":
						cat.moveLeft();
						break;
					case "ArrowRight":
						cat.moveRight();
						break;
					case "ArrowUp":
						cat.moveUp();
						break;
					case "ArrowDown":
						cat.moveDown();
						break;
				}
			});
		}
	</script>
</head>
<body onload="startGame()">
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<p>黒猫を矢印キーで操作してね！</p>
</body>
</html>