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

No:2560

2313

Complementary Plan for Humanity (Project to Combat..ALL
Developer User3582｜Date and time 23/6/21 23:36:42
Build time 107.408 sec｜Game capacity 4.386KB｜

「人類補完計画」というアプリを作ってみました！以下が実際のプログラムです。このプログラムを1枚のhtmlファイルにまとめ、JavaScriptを含ませました。

人類補完計画

地球を救うため、あなたにはとあるミッションが課せられました。

このアプリは、地球を救うためにとあるミッションが課せられたプレイヤーが、与えられた時間内にランダムに出現する絵文字をタップしてスコアを稼ぐゲームです。スマホでも遊びやすくするため、canvas要素を使って描画を行い、ボタンやテキストサイズなどを調整しました。さらに、絵文字を用いることで親しみやすい雰囲気を出しています。また、JavaScriptを使って、ゲームの制御やランダムな絵文字の出現、残り時間の表示などを実現しています。ゲームのルールは以下の通りです。 1. STARTボタンをタップしてゲームを開始します。 2. 画面にランダムに出現する絵文字をタップしてスコアを稼ぎます。 3. 制限時間は60秒間で、時間内にできるだけ多くの絵文字をタップして高得点を目指します。 4. 残り時間が0になると、GAME OVERとなります。 5. RESTARTボタンをタップすることで、再度ゲームをスタートできます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

「人類補完計画」というアプリを作ってみました！

以下が実際のプログラムです。このプログラムを1枚のhtmlファイルにまとめ、JavaScriptを含ませました。

```
<!DOCTYPE html>
<html>
<head>
	<title>人類補完計画</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: "Helvetica Neue", sans-serif;
			text-align: center;
			background-color: #93CDC0;
			color: #FFF;
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
		
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		
		h1 {
			font-size: 48px;
			margin-top: 30px;
		}
		
		p {
			font-size: 24px;
			margin-top: 0;
			margin-bottom: 30px;
		}
		
		button {
			font-size: 24px;
			background-color: #FFF;
			color: #93CDC0;
			border: none;
			padding: 10px 20px;
			border-radius: 20px;
			cursor: pointer;
			margin-top: 30px;
		}
	</style>
</head>
<body>
	<h1>人類補完計画</h1>
	<p>地球を救うため、あなたにはとあるミッションが課せられました。</p>
	<canvas id="canvas"></canvas>
	<button id="start-button">START</button>

<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var startTime = 0;
		var isStarted = false;

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

var emojiList = ["😀", "😂", "😍", "🤔", "🤗", "😴", "🤕", "🤢", "🤮", "🤯", "😱", "😈"];

function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

function getRandEmoji() {
			return emojiList[getRandomInt(0, emojiList.length - 1)];
		}

function drawScore() {
			ctx.fillStyle = "#FFF";
			ctx.font = "24px Helvetica Neue";
			ctx.fillText("SCORE: " + score, canvas.width - 150, 30);
		}

function drawTime() {
			var elapsedTime = (Date.now() - startTime) / 1000;
			var remainingTime = Math.max(60 - elapsedTime, 0);
			ctx.fillStyle = "#FFF";
			ctx.font = "24px Helvetica Neue";
			ctx.fillText("TIME: " + remainingTime.toFixed(1), 30, 30);
			if (remainingTime === 0) {
				gameOver();
			}
		}

function gameOver() {
			isStarted = false;
			alert("GAME OVER! SCORE: " + score);
			score = 0;
			startTime = 0;
			drawScore();
			drawTime();
			document.getElementById("start-button").innerText = "RESTART";
		}

function startGame() {
			if (isStarted) {
				gameOver();
			} else {
				isStarted = true;
				drawEmoji();
				startTime = Date.now();
				document.getElementById("start-button").innerText = "STOP";
			}
		}

function drawEmoji() {
			setTimeout(function() {
				if (isStarted) {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					drawScore();
					drawTime();
					var randX = Math.random() * (canvas.width - 50);
					var randY = Math.random() * (canvas.height - 50);
					var randSize = getRandomInt(50, 100);
					var randEmoji = getRandEmoji();
					ctx.font = randSize + "px Arial";
					ctx.fillText(randEmoji, randX, randY + randSize);
					drawEmoji();
				}
			}, 1000);
		}

document.getElementById("start-button").addEventListener("click", startGame);
	</script>
</body>
</html>
```

このアプリは、地球を救うためにとあるミッションが課せられたプレイヤーが、与えられた時間内にランダムに出現する絵文字をタップしてスコアを稼ぐゲームです。

スマホでも遊びやすくするため、canvas要素を使って描画を行い、ボタンやテキストサイズなどを調整しました。さらに、絵文字を用いることで親しみやすい雰囲気を出しています。

また、JavaScriptを使って、ゲームの制御やランダムな絵文字の出現、残り時間の表示などを実現しています。

ゲームのルールは以下の通りです。

1. STARTボタンをタップしてゲームを開始します。
2. 画面にランダムに出現する絵文字をタップしてスコアを稼ぎます。
3. 制限時間は60秒間で、時間内にできるだけ多くの絵文字をタップして高得点を目指します。
4. 残り時間が0になると、GAME OVERとなります。
5. RESTARTボタンをタップすることで、再度ゲームをスタートできます。