AI game creator

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

No:1502

295

←

Prev Next

→

come to fish
Developer sayaensm｜Date and time 23/6/18 17:41:05
Build time 31.818 sec｜Game capacity 4.023KB｜

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>
		body {
			margin: 0;
			padding: 0;
			background: #88c6ed;
			overflow: hidden;
		}
		canvas {
			display: block;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		#score {
			position: absolute;
			top: 10px;
			left: 10px;
			font-size: 30px;
			color: white;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">0</div>
	<script>
	// canvasサイズの設定
	var canvas = document.getElementById("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

// 初期設定
	var ctx = canvas.getContext("2d");
	var score = 0;
	var player = {
		x: 50,
		y: canvas.height / 2,
		size: 50,
		speed: 5,
		jump: 15,
		jumping: false,
		jumpCount: 0,
		jumpLimit: 2
	};
	var obstacles = [];

// 障害物のクラス
	class Obstacle {
		constructor(x, y, size, speed) {
			this.x = x;
			this.y = y;
			this.size = size;
			this.speed = speed;
		}
		draw() {
			ctx.fillStyle = "brown";
			ctx.fillRect(this.x, this.y, this.size, this.size);
		}
		move() {
			this.x -= this.speed;
		}
	}

// 障害物の生成
	function createObstacle() {
		var size = Math.floor(Math.random() * 50) + 50;
		var speed = Math.floor(Math.random() * 5) + 5;
		var obstacle = new Obstacle(canvas.width, canvas.height - size, size, speed);
		obstacles.push(obstacle);
	}

// 描画
	function draw() {
		// 背景
		ctx.fillStyle = "#88c6ed";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		// プレイヤー
		ctx.fillStyle = "orange";
		ctx.fillRect(player.x, player.y, player.size, player.size);
		// 障害物
		for (var i = 0; i < obstacles.length; i++) {
			obstacles[i].draw();
		}
		// スコア表示
		ctx.fillStyle = "white";
		ctx.fillText(score, 20, 40);
	}

// 移動
	function move() {
		// 上下移動
		if (player.jumping) {
			player.y -= player.jump;
			player.jumpCount++;
			if (player.jumpCount >= player.jumpLimit) {
				player.jumping = false;
				player.jumpCount = 0;
			}
		} else {
			player.y += player.speed;
		}
		// 障害物移動
		for (var i = 0; i < obstacles.length; i++) {
			obstacles[i].move();
		}
		// スコア加算
		score++;
	}

// 衝突判定
	function collisionDetection() {
		for (var i = 0; i < obstacles.length; i++) {
			if (player.x < obstacles[i].x + obstacles[i].size &&
				player.x + player.size > obstacles[i].x &&
				player.y < obstacles[i].y + obstacles[i].size &&
				player.y + player.size > obstacles[i].y) {
					gameOver();
			}
		}
	}

// ゲームオーバー
	function gameOver() {
		alert("GAME OVER");
		location.reload();
	}

// キー入力
	document.addEventListener("keydown", function(event) {
		if (event.keyCode === 32 && !player.jumping) {
			player.jumping = true;
		}
	});

// メインループ
	function mainLoop() {
		draw();
		move();
		collisionDetection();
		// 一定時間ごとに障害物を生成
		if (Math.random() < 0.05) {
			createObstacle();
		}
		// 画面外の障害物を削除
		for (var i = 0; i < obstacles.length; i++) {
			if (obstacles[i].x + obstacles[i].size < 0) {
				obstacles.splice(i, 1);
			}
		}
		// 繰り返し
		requestAnimationFrame(mainLoop);
	}

// 開始
	mainLoop();
	</script>
</body>
</html>
```