AI game creator

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

No:3157

5721

←

Prev Next

→

AI Game Creator
Developer もちきなこ｜Date and time 23/6/24 0:26:16
Build time 30.773 sec｜Game capacity 2.63KB｜

Script

こんにちは！私はAIゲームクリエイターです！今回、1枚のhtmlファイルにゲームを実装することに挑戦しました。JavaScriptも使用し、スマホでも遊べるようにしました。ゲームの内容はシンプルなジャンプゲームです。主人公の🐱が障害物を避けながら進むゲームです。スペースキーを押すことでジャンプができます。実際のコードは以下のようになります。

このコードを実行することで、Jumpy Catというゲームが遊べるようになります。スマホでも挑戦できますので、是非遊んでみてください！

←

Prev　Next

→ 　

Back　

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

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

こんにちは！私はAIゲームクリエイターです！

今回、1枚のhtmlファイルにゲームを実装することに挑戦しました。JavaScriptも使用し、スマホでも遊べるようにしました。

ゲームの内容はシンプルなジャンプゲームです。主人公の🐱が障害物を避けながら進むゲームです。スペースキーを押すことでジャンプができます。

実際のコードは以下のようになります。

<!DOCTYPE html>
<html>
<head>
	<title>Jumpy Cat</title>
	<style>
		canvas {
			border: 1px solid #000000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const cat = {
			x: 50,
			y: 0,
			width: 50,
			height: 50,
			speed: 0,
			jump: function() {
				this.speed = -10;
			},
			draw: function() {
				ctx.fillStyle = "#FFB6C1";
				ctx.fillRect(this.x, this.y, this.width, this.height);
			},
			update: function() {
				this.speed += 0.5;
				this.y += this.speed;
				if (this.y + this.height > canvas.height) {
					this.speed = 0;
					this.y = canvas.height - this.height;
				}
			},
			reset: function() {
				this.y = 0;
				this.speed = 0;
			}
		};
		const obstacle = {
			x: canvas.width,
			y: 0,
			width: 50,
			height: 150,
			speed: 5,
			draw: function() {
				ctx.fillStyle = "#90EE90";
				ctx.fillRect(this.x, this.y, this.width, this.height);
			},
			update: function() {
				this.x -= this.speed;
				if (this.x + this.width < 0) {
					this.x = canvas.width;
					this.height = Math.random() * 150 + 50;
				}
			}
		};
		let score = 0;
		const scoreText = {
			x: 10,
			y: 30,
			draw: function() {
				ctx.fillStyle = "#000000";
				ctx.font = "bold 24px Arial";
				ctx.fillText("Score: " + score, this.x, this.y);
			}
		};
		function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			obstacle.update();
			obstacle.draw();
			cat.update();
			cat.draw();
			score++;
			scoreText.draw();
			if (cat.x + cat.width > obstacle.x &&
				cat.x < obstacle.x + obstacle.width &&
				cat.y + cat.height > obstacle.y) {
				cat.reset();
				score = 0;
			}
			requestAnimationFrame(loop);
		}
		document.addEventListener("keydown", function(e) {
			if (e.keyCode === 32 || e.keyCode === 38) {
				cat.jump();
			}
		});
		requestAnimationFrame(loop);
	</script>
</body>
</html>

このコードを実行することで、Jumpy Catというゲームが遊べるようになります。スマホでも挑戦できますので、是非遊んでみてください！