AI game creator

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

No:3532

2938

←

Prev Next

→

Dedede the Great
Developer sayaensm｜Date and time 23/6/25 12:57:42
Build time 35.701 sec｜Game capacity 3.601KB｜

Script

ご注文に従い、以下にオンラインゲームの実装例を示します。このゲームはスマホ操作前提で、簡単なアクションゲームとなっています。コード内にはコメントで説明が含まれているので、ご参考になさってください。

SCORE: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>デデデジャンプ</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body onload="init()">
	<canvas id="gameCanvas"></canvas>
	<p id="score">SCORE: 0</p>

<script>
		// ゲームのパラメータ設定
		const GRAVITY = 0.1;
		const JUMP_IMPULSE = -3.5;
		const OBSTACLE_SPEED = -3;
		const OBSTACLE_INTERVAL = 1500;

// ゲームの実行に必要な変数
		let canvas, ctx;
		let score = 0;
		let player, obstacles;
		let obstacleTimer;

// 初期化処理
		function init() {
			// canvasの初期化
			canvas = document.getElementById("gameCanvas");
			ctx = canvas.getContext("2d");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight / 2;

// スコアの初期化
			score = 0;
			document.getElementById("score").textContent = "SCORE: " + score;

// プレイヤーの初期化
			player = {
				x: canvas.width / 2,
				y: canvas.height / 2,
				vy: 0,
				size: 30,
				color: "pink",
				jump: function() {
					this.vy = JUMP_IMPULSE;
				},
				update: function() {
					// 重力による加速度
					this.vy += GRAVITY;
					this.y += this.vy;

// 画面外に出たらリセット
					if (this.y > canvas.height + this.size) {
						resetGame();
					}
				},
				draw: function() {
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
					ctx.fillStyle = this.color;
					ctx.fill();
					ctx.closePath();
				}
			};

// 障害物の初期化
			obstacles = [];

// ゲーム開始
			obstacleTimer = setInterval(addObstacle, OBSTACLE_INTERVAL);
			requestAnimationFrame(update);
		}

// 障害物の追加
		function addObstacle() {
			let y = Math.random() * (canvas.height - 200) + 100; // y座標は画面中央から上下にランダム
			let width = 30 + Math.random() * 50; // 幅は30~80のランダム
			obstacles.push({x: canvas.width, y: y, width: width});
		}

// ゲームの更新
		function update() {
			// 背景の描画
			ctx.fillStyle = "#eee";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤーの更新と描画
			player.update();
			player.draw();

// 障害物の更新と描画
			for (let i = 0; i < obstacles.length; i++) {
				obstacles[i].x += OBSTACLE_SPEED;

// 当たり判定
				if (obstacles[i].x < player.x + player.size &&
					player.x < obstacles[i].x + obstacles[i].width &&
					(player.y - player.size < obstacles[i].y || player.y + player.size > obstacles[i].y + 100)) {
					resetGame();
					break;
				}

if (obstacles[i].x + obstacles[i].width < 0) {
					obstacles.splice(i, 1);
					score++;
					document.getElementById("score").textContent = "SCORE: " + score;
					i--;
				} else {
					ctx.fillStyle = "green";
					ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, 100);
				}
			}

// 次のフレームの更新
			requestAnimationFrame(update);
		}

// ゲームのリセット
		function resetGame() {
			clearInterval(obstacleTimer);
			alert("GAME OVER\nSCORE: " + score);
			init();
		}

// プレイヤーのジャンプ
		window.addEventListener("touchstart", function() {
			player.jump();
		});
	</script>
</body>
</html>