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

No:644

428

←

Prev Next

→

Gigantic Games
Developer User3060｜Date and time 23/6/16 23:24:52
Build time 48.732 sec｜Game capacity 4.067KB｜

Script

Gigantic Games

In this game.、You control the cells.、The goal is to eat other cells and grow. The controls are simple. Use the up, down, left and right arrow keys to move cells and、When it hits another cell, it can eat it.

Notes.、If you hit a cell larger than you, the game is over.、Be careful.

Current Score: 1 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>巨大化するゲーム</title>
	<meta charset="utf-8">
	<style>
		body {
			font-size: 32px;
			text-align: center;
		}
		button {
			font-size: 24px;
			margin: 20px;
			padding: 10px 20px;
			background-color: #DDDDDD;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			transition: 0.2s;
		}
		button:hover {
			background-color: #BBBBBB;
		}
	</style>
</head>
<body>
	<h1>巨大化するゲーム</h1>
	<p>このゲームでは、あなたは細胞を操り、他の細胞を食べて成長していくことが目的です。操作方法は簡単です。上下左右の矢印キーを使って細胞を移動させ、他の細胞に当たると食べることができます。</p>
	<p>注意点としては、自分より大きい細胞に当たるとゲームオーバーになりますので、気をつけてください。</p>
	<canvas id="canvas"></canvas>
	<p>現在のスコア: <span id="score">0</span></p>
	<button id="startBtn">スタート</button>
	<script>
		// ゲームオブジェクト
		const game = {
			canvas: null,
			ctx: null,
			player: null,
			enemies: [],
			score: 0,
			gameOver: true,
			start() {
				// 初期化
				this.canvas = document.getElementById('canvas');
				this.ctx = this.canvas.getContext('2d');
				this.canvas.width = window.innerWidth * 0.8;
				this.canvas.height = window.innerHeight * 0.8;
				this.player = new Cell(this.canvas.width/2, this.canvas.height/2, 20, '#FF0000', 3);
				for (let i = 0; i < 10; i++) {
					let x = Math.random() * this.canvas.width;
					let y = Math.random() * this.canvas.height;
					let radius = Math.random() * 20 + 10;
					let color = '#' + (Math.random() * 0xFFFFFF<<0).toString(16);
					let speed = Math.random() * 5 + 1;
					this.enemies.push(new Cell(x, y, radius, color, speed));
				}
				// ゲームループ開始
				this.gameOver = false;
				this.loop();
			},
			loop() {
				// 画面をクリア
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				// プレイヤーを描画
				this.player.draw(this.ctx);
				// 敵を描画および当たり判定
				for (let i = 0; i < this.enemies.length; i++) {
					this.enemies[i].draw(this.ctx);
					if (this.player.isColliding(this.enemies[i])) {
						if (this.player.radius > this.enemies[i].radius) {
							this.player.radius += this.enemies[i].radius / 2;
							this.score += this.enemies[i].radius;
							this.enemies.splice(i, 1);
							i--;
						} else {
							this.gameOver = true;
						}
					}
				}
				// スコア更新
				document.getElementById('score').textContent = this.score;
				// ゲームオーバー判定
				if (this.gameOver) {
					// ゲームループを停止
					return;
				}
				// 再帰的にループを呼び出す
				requestAnimationFrame(() => this.loop());
			}
		}
		// 細胞オブジェクト
		class Cell {
			constructor(x, y, radius, color, speed) {
				this.x = x;
				this.y = y;
				this.radius = radius;
				this.color = color;
				this.speed = speed;
			}
			draw(ctx) {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
			isColliding(other) {
				return Math.hypot(this.x - other.x, this.y - other.y) < this.radius + other.radius;
			}
		}
		// スタートボタンクリック時の処理
		document.getElementById('startBtn').addEventListener('click', () => {
			game.start();
		});
		// キーダウン時の処理
		document.addEventListener('keydown', (event) => {
			// キーコードが上下左右でない場合は無視
			if (event.keyCode < 37 || event.keyCode > 40) {
				return;
			}
			// プレイヤーの移動
			switch (event.keyCode) {
				case 37: // 左
					game.player.x -= game.player.speed;
					break;
				case 38: // 上
					game.player.y -= game.player.speed;
					break;
				case 39: // 右
					game.player.x += game.player.speed;
					break;
				case 40: // 下
					game.player.y += game.player.speed;
					break;
			}
		});
	</script>
</body>
</html>