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

No:1997

6917

←

Prev Next

→

Cell Eating Game You are a cell. Players control t..ALL
Developer もちきなこ｜Date and time 23/6/19 17:35:12
Build time 75.303 sec｜Game capacity 3.553KB｜

Script

細胞を食べるゲーム

←

Prev　Next

→ 　

Back　

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

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 #000;
		}
	</style>
</head>
<body>
	<h1>細胞を食べるゲーム</h1>
	<canvas id="game-canvas" width="400" height="400"></canvas>

// ゲームの設定
	const CELL_SIZE = 10; // 細胞の大きさ
	const FOOD_SIZE = 5; // 細菌の大きさ
	const FOOD_COUNT = 50; // 細菌の数
	const FOOD_COLOR = 'green'; // 細菌の色
	const PLAYER_COLOR = 'blue'; // プレイヤーの色
	const PLAYER_SPEED = 5; // プレイヤーの移動速度
	const SCORE_COLOR = 'red'; // スコアの色
	const TEXT_COLOR = 'black'; // テキストの色

// ゲームの変数
	let canvas = document.getElementById('game-canvas');
	let ctx = canvas.getContext('2d');
	let width = canvas.width;
	let height = canvas.height;
	let player = {
		x: width/2,
		y: height/2,
		size: 20,
		score: 0
	};
	let foods = [];

// キー入力の検知
	document.addEventListener('keydown', function(event) {
		switch(event.keyCode) {
			case 37: // 左
				player.x -= PLAYER_SPEED;
				break;
			case 38: // 上
				player.y -= PLAYER_SPEED;
				break;
			case 39: // 右
				player.x += PLAYER_SPEED;
				break;
			case 40: // 下
				player.y += PLAYER_SPEED;
				break;
		}
	});

// プレイヤーと細菌を生成
	function createObjects() {
		for (let i = 0; i < FOOD_COUNT; i++) {
			let food = {
				x: Math.floor(Math.random() * width),
				y: Math.floor(Math.random() * height),
				size: FOOD_SIZE
			};
			foods.push(food);
		}
	}

// プレイヤーと細胞を描画
	function drawObjects() {
		ctx.clearRect(0, 0, width, height);
		ctx.fillStyle = PLAYER_COLOR;
		ctx.fillRect(player.x - player.size/2, player.y - player.size/2, player.size, player.size);
		ctx.fillStyle = FOOD_COLOR;
		for (let i = 0; i < foods.length; i++) {
			ctx.fillRect(foods[i].x - foods[i].size/2, foods[i].y - foods[i].size/2, foods[i].size, foods[i].size);
		}
	}

// プレイヤーと細菌のみを更新
	function updateObjects() {
		// プレイヤーと細菌の衝突判定
		for (let i = 0; i < foods.length; i++) {
			let dist = Math.sqrt((player.x - foods[i].x)**2 + (player.y - foods[i].y)**2);
			if (dist < player.size/2) {
				player.size += 2;
				player.score += 10;
				foods[i] = {
					x: Math.floor(Math.random() * width),
					y: Math.floor(Math.random() * height),
					size: FOOD_SIZE
				};
			}
		}
		// プレイヤーと画面の境界判定
		if (player.x < 0 + player.size/2) { // 左
			player.x = 0 + player.size/2;
		}
		if (player.y < 0 + player.size/2) { // 上
			player.y = 0 + player.size/2;
		}
		if (player.x > width - player.size/2) { // 右
			player.x = width - player.size/2;
		}
		if (player.y > height - player.size/2) { // 下
			player.y = height - player.size/2;
		}
	}

// スコアとメッセージを描画
	function drawScore() {
		ctx.fillStyle = SCORE_COLOR;
		ctx.font = '20px Arial';
		ctx.fillText(`Score: ${player.score}`, 10, 30);
		if (player.size < 10) { // ゲームオーバー
			ctx.fillStyle = TEXT_COLOR;
			ctx.font = '50px Arial';
			ctx.fillText('Game Over', width/2 - 90, height/2 - 25);
			ctx.font = '20px Arial';
			ctx.fillText(`Your score is ${player.score}.`, width/2 - 70, height/2 + 5);
		}
	}

// ゲームのメインループ
	function main() {
		drawObjects();
		updateObjects();
		drawScore();
		if (player.size >= 10) {
			requestAnimationFrame(main);
		}
	}

// ゲームを開始
	createObjects();
	main();

</script>
</body>
</html>