Mogumogu game Players operate "cells" with the four-way controller. When a "cell" touches multiple "nutrition" on the screen, it gains a score and its size increases slightly. Also, if the "cell" touches multiple "poisons" on the screen, the score will decrease and the size will decrease. "Poison" is in motion, "Nutrition" is stationary. It is a game that enjoys increasing the score and enlarging "cells".'s game

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

No:2244

5628

←

Prev Next

→

Mogumogu game Players operate "cells" with the fou..ALL
Developer anonymous｜Date and time 70/1/1 10:07:54
Build time unknown sec｜Game capacity 4.074KB｜

Script

←

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>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
		}

canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		// canvasの設定
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		let score = 0;

// 細胞クラス
		class Cell {
			constructor(x, y, size, color) {
				this.x = x;
				this.y = y;
				this.size = size;
				this.color = color;
			}

draw() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}

// 栄養クラス
		class Nutrition extends Cell {
			constructor(x, y, size, color) {
				super(x, y, size, color);
			}
		}

// 毒クラス
		class Poison extends Cell {
			constructor(x, y, size, color, speed) {
				super(x, y, size, color);
				this.speed = speed;
			}

move() {
				this.x += this.speed;
				if (this.x + this.size > canvas.width || this.x - this.size < 0) {
					this.speed = -this.speed;
				}
			}
		}

// 細胞の初期化
		const cellSize = canvas.width * 0.04;
		const player = new Cell(canvas.width/2, canvas.height/2, cellSize, "#ff6666");
		const nutritions = [
			new Nutrition(canvas.width/4, canvas.height/4, cellSize, "#66ff66"),
			new Nutrition(canvas.width/4, canvas.height*3/4, cellSize, "#66ff66"),
			new Nutrition(canvas.width*3/4, canvas.height/4, cellSize, "#66ff66"),
			new Nutrition(canvas.width*3/4, canvas.height*3/4, cellSize, "#66ff66")
		];
		const poisons = [
			new Poison(canvas.width/2, canvas.height/8, cellSize, "#3333ff", 3),
			new Poison(canvas.width/2, canvas.height*7/8, cellSize, "#3333ff", -3)
		];

// インターバルで更新
		setInterval(update, 10);

// ゲームの更新
		function update() {
			// 画面クリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 栄養表示
			nutritions.forEach(nutrition => {
				nutrition.draw();
			});

// 毒表示・移動
			poisons.forEach(poison => {
				poison.draw();
				poison.move();
			});

// 細胞表示
			player.draw();

// 当たり判定
			nutritions.forEach((nutrition, i) => {
				if (detectCollision(player, nutrition)) {
					nutritions.splice(i, 1);
					score++;
					player.size += 2;
				}
			});
			poisons.forEach((poison, i) => {
				if (detectCollision(player, poison)) {
					poisons.splice(i, 1);
					score--;
					player.size -= 2;
					if (player.size <= 0) {
						alert("ゲームオーバー");
						location.reload();
					}
				}
			});

// スコア表示
			ctx.fillStyle = "#333";
			ctx.font = "bold 24px sans-serif";
			ctx.textAlign = "center";
			ctx.fillText("スコア: " + score, canvas.width/2, 50);
		}

// 当たり判定
		function detectCollision(cell1, cell2) {
			const distance = Math.sqrt((cell1.x - cell2.x) ** 2 + (cell1.y - cell2.y) ** 2);
			return distance <= cell1.size + cell2.size;
		}

// キーボード操作
		document.addEventListener("keydown", event => {
			switch(event.keyCode) {
				case 37: // 左
					player.x -= 5;
					break;
				case 38: // 上
					player.y -= 5;
					break;
				case 39: // 右
					player.x += 5;
					break;
				case 40: // 下
					player.y += 5;
					break;
			}
		});

// スマホ操作
		let touchX = 0;
		let touchY = 0;
		canvas.addEventListener("touchstart", event => {
			event.preventDefault();
			touchX = event.changedTouches[0].pageX;
			touchY = event.changedTouches[0].pageY;
		});
		canvas.addEventListener("touchmove", event => {
			event.preventDefault();
			const moveX = event.changedTouches[0].pageX - touchX;
			const moveY = event.changedTouches[0].pageY - touchY;
			player.x += moveX * 0.05;
			player.y += moveY * 0.05;
			touchX = event.changedTouches[0].pageX;
			touchY = event.changedTouches[0].pageY;
		});
	</script>
</body>
</html>