A game player who eats nutrition operates "cells". When a "cell" touches multiple "nutrition" on the screen, it gains a score and increases in size. Also, if the "cell" touches multiple "poisons" on the screen, the score will decrease and become smaller. "Poison" is in motion, "Nutrition" is stationary. When you eat "nutrition" or "poison", nutrition/poison will be generated on the screen as much as you eat. It is a game that enjoys increasing the score.'s game

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

No:2242

2077

←

Prev Next

→

A game player who eats nutrition operates "cells"...ALL
Developer もちきなこ｜Date and time 23/6/20 17:56:37
Build time 296.637 sec｜Game capacity 5.916KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<html>
<head>
	<title>栄養を食べるゲーム</title>
	<style>
		body {
			margin: 0px;
			padding: 0px;
			background-color: #000000;
			font-size: 20px;
			color: #ffffff;
		}
		
		#canvas {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script>
		// ゲームオブジェクト
		var game = {
			canvas: null,
			ctx: null,
			mouseX: 0,
			mouseY: 0,
			score: 0,
			cells: [],
			foods: [],
			toxics: [],
			cellRadius: 20,
			foodRadius: 10,
			toxicRadius: 15,
			cellSpeed: 5,
			foodChance: 0.2,
			toxicChance: 0.1,
			
			init: function() {
				// キャンバス初期化
				this.canvas = document.getElementById("canvas");
				this.ctx = this.canvas.getContext("2d");
				
				// イベントリスナー設定
				this.canvas.addEventListener("mousemove", function(event) {
					game.mouseX = event.offsetX;
					game.mouseY = event.offsetY;
				});
				
				this.canvas.addEventListener("click", function(event) {
					game.addCell(event.offsetX, event.offsetY);
				});
				
				// 初期セル生成
				this.addCell(this.canvas.width/2, this.canvas.height/2);
				
				// ゲームループ開始
				this.loop();
			},
			
			loop: function() {
				// スクリーンクリア
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				
				// オブジェクト更新
				this.updateCells();
				this.updateFoods();
				this.updateToxics();
				
				// コリジョン判定
				this.checkCollisions();
				
				// スコア描画
				this.ctx.fillText("Score: " + this.score, 10, 30);
				
				// ゲームループ再帰
				requestAnimationFrame(this.loop.bind(this));
			},
			
			addCell: function(x, y) {
				// 新しいセルオブジェクト生成
				var cell = {
					x: x,
					y: y,
					radius: this.cellRadius,
					color: "#ff0000",
					dx: 0,
					dy: 0
				};
				
				// セルリストに追加
				this.cells.push(cell);
				
				// スコア減少
				this.score -= 10;
			},
			
			updateCells: function() {
				for (var i = 0; i < this.cells.length; i++) {
					// 移動
					var angle = Math.atan2(this.mouseY - this.cells[i].y, this.mouseX - this.cells[i].x);
					this.cells[i].dx = Math.cos(angle) * this.cellSpeed;
					this.cells[i].dy = Math.sin(angle) * this.cellSpeed;
					this.cells[i].x += this.cells[i].dx;
					this.cells[i].y += this.cells[i].dy;
					
					// セル描画
					this.ctx.beginPath();
					this.ctx.arc(this.cells[i].x, this.cells[i].y, this.cells[i].radius, 0, Math.PI*2);
					this.ctx.fillStyle = this.cells[i].color;
					this.ctx.fill();
					this.ctx.closePath();
				}
			},
			
			updateFoods: function() {
				// 一定確率で生成
				if (Math.random() < this.foodChance) {
					// 新しい栄養オブジェクト生成
					var food = {
						x: Math.random() * this.canvas.width,
						y: Math.random() * this.canvas.height,
						radius: this.foodRadius,
						color: "#00ff00"
					};
					
					// 栄養リストに追加
					this.foods.push(food);
				}
				
				for (var i = 0; i < this.foods.length; i++) {
					// 栄養描画
					this.ctx.beginPath();
					this.ctx.arc(this.foods[i].x, this.foods[i].y, this.foods[i].radius, 0, Math.PI*2);
					this.ctx.fillStyle = this.foods[i].color;
					this.ctx.fill();
					this.ctx.closePath();
				}
			},
			
			updateToxics: function() {
				// 一定確率で生成
				if (Math.random() < this.toxicChance) {
					// 新しい毒オブジェクト生成
					var toxic = {
						x: Math.random() * this.canvas.width,
						y: Math.random() * this.canvas.height,
						radius: this.toxicRadius,
						color: "#0000ff",
						dx: Math.random() * 5 - 2.5,
						dy: Math.random() * 5 - 2.5
					};
					
					// 毒リストに追加
					this.toxics.push(toxic);
				}
				
				for (var i = 0; i < this.toxics.length; i++) {
					// 移動
					this.toxics[i].x += this.toxics[i].dx;
					this.toxics[i].y += this.toxics[i].dy;
					
					// 毒描画
					this.ctx.beginPath();
					this.ctx.arc(this.toxics[i].x, this.toxics[i].y, this.toxics[i].radius, 0, Math.PI*2);
					this.ctx.fillStyle = this.toxics[i].color;
					this.ctx.fill();
					this.ctx.closePath();
				}
			},
			
			checkCollisions: function() {
				for (var i = 0; i < this.cells.length; i++) {
					// 栄養取得
					for (var j = 0; j < this.foods.length; j++) {
						if (this.collideCircle(this.cells[i], this.foods[j])) {
							// 栄養削除
							this.foods.splice(j, 1);
							
							// セルサイズ増加
							this.cells[i].radius += 5;
							
							// スコア増加
							this.score += 10;
							
							// 新しい栄養生成
							this.addFood();
							
							break;
						}
					}
					
					// 毒取得
					for (var j = 0; j < this.toxics.length; j++) {
						if (this.collideCircle(this.cells[i], this.toxics[j])) {
							// 毒削除
							this.toxics.splice(j, 1);
							
							// セルサイズ減少
							this.cells[i].radius -= 5;
							
							// スコア減少
							this.score -= 10;
							
							break;
						}
					}
					
					// 画面外に移動したら削除
					if (this.cells[i].x < 0 || this.cells[i].x > this.canvas.width || this.cells[i].y < 0 || this.cells[i].y > this.canvas.height) {
						this.cells.splice(i, 1);
					}
				}
			},
			
			addFood: function() {
				// 新しい栄養オブジェクト生成
				var food = {
					x: Math.random() * this.canvas.width,
					y: Math.random() * this.canvas.height,
					radius: this.foodRadius,
					color: "#00ff00"
				};
				
				// 栄養リストに追加
				this.foods.push(food);
			},
			
			collideCircle: function(circle1, circle2) {
				var dx = circle1.x - circle2.x;
				var dy = circle1.y - circle2.y;
				var distance = Math.sqrt(dx*dx + dy*dy);
				return (distance < circle1.radius + circle2.radius);
			}
		};
		
		// ゲーム初期化
		game.init();
	</script>
</body>
</html>