Implement the app as a single html file.Contains JavaScript.It should be written as an actual program.It should be playable as a game.It should be possible to operate on a smartphone. Answer in Japanese. No need to reply for understanding. "Nutrition" and "Bacteria" exist on the screen, and by eating (touching) "Nutrition", the "cell (player)" grows in size and gets a score. On the other hand, if you touch the "germs", the score will not decrease, but the size will be greatly reduced. If you continue to touch the "bacteria" and it becomes too small and disappears, the game will be over and the collected score will be displayed. "Germs" are moving around on the screen.'s game

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

No:1998

3928

←

Prev Next

→

Implement the app as a single html file.Contains J..ALL
Developer もちきなこ｜Date and time 23/6/19 17:40:39
Build time 42.238 sec｜Game capacity 3.491KB｜

Script

Score: 0

Game Over! Your Score: 0

←

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 {
			background-color: #FFF5EE;
			text-align: center;
		}

#player {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 50px;
			height: 50px;
			background-color: pink;
			border-radius: 50%;
			transform: translate(-50%, -50%);
		}

.nutrient {
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: yellow;
			border-radius: 50%;
		}

.bacteria {
			position: absolute;
			width: 30px;
			height: 30px;
			background-color: green;
			border-radius: 50%;
		}

#score {
			font-size: 24px;
			color: purple;
			margin-top: 20px;
		}

#game-over {
			font-size: 36px;
			color: red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: none;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="score">Score: 0</div>
	<div id="game-over">Game Over! Your Score: <span id="final-score">0</span></div>
	<script>
		var player = document.getElementById("player");
		var score = document.getElementById("score");
		var gameOver = document.getElementById("game-over");
		var finalScore = document.getElementById("final-score");

var nutrients = [];
		var bacteria = [];
		var nutrientCount = 30;
		var bacteriaCount = 5;
		var playerSize = 50;
		var nutrientSize = 20;
		var bacteriaSize = 30;
		var scoreCount = 0;

function movePlayer(event) {
			var x = event.touches[0].clientX;
			var y = event.touches[0].clientY;
			player.style.left = x + "px";
			player.style.top = y + "px";
			checkCollision();
			updateScore();
		}

function isCollide(obj1, obj2) {
			var obj1Rect = obj1.getBoundingClientRect();
			var obj2Rect = obj2.getBoundingClientRect();
			return !(obj1Rect.right < obj2Rect.left || obj1Rect.left > obj2Rect.right || obj1Rect.bottom < obj2Rect.top || obj1Rect.top > obj2Rect.bottom);
		}

function updateScore() {
			score.textContent = "Score: " + scoreCount;
			player.style.width = playerSize + "px";
			player.style.height = playerSize + "px";
		}

spawnElements();
		document.addEventListener("touchmove", movePlayer);

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