AI game creator

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

No:2198

252

←

Prev Next

→

Survivor Games
Developer User3515｜Date and time 23/6/20 14:04:13
Build time 54.408 sec｜Game capacity 4.192KB｜

Script

以下がJavaScriptを含んだ1枚のHTMLファイルでのサバイバー系ゲームの実装例です。

このゲームの概要は、何日間生き延びられるかを目指すサバイバー系ゲームです。プレイヤーは体力、食べ物、水の代謝が行われ、残り何日生き延びるかを計上します。プレイヤーはボタンを操作して、次に何を探し、何を食べたいかを選ぶことができます。しかし、条件を満たさず、食べ物不足、水不足、体力不足に陥ると、プレイヤーは亡くなってしまいます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

以下がJavaScriptを含んだ1枚のHTMLファイルでのサバイバー系ゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<title>サバイバーゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #77DD77;
			font-size: 24px;
			text-align: center
		}
		
		#main {
			margin: auto;
			max-width: 80%;
			text-align: left;
			background-color: white;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 3px 3px 3px grey;
		}
		
		button {
			background-color: #4CAF50;
			color: white;
			padding: 15px 32px;
			text-align: center;
			font-size: 24px;
			border-radius: 10px;
			border: none;
			margin: 10px;
			text-decoration: none;
			display: inline-block;
			cursor: pointer;
			box-shadow: 2px 2px 2px grey;
		}
		
		button:hover {
			background-color: #3e8e41;
		}
	</style>
	<script>
		var health = 100;
		var food = 100;
		var water = 100;
		var day = 1;

function start() {
			document.getElementById("main").innerHTML = "<p>ようこそ！あなたはサバイバーモードにいます。</p><p>あなたの目標は、できるだけ長く生き延びることです。最初の課題は食べ物を見つけることです。</p><button onclick='findFood()'>食べ物を探す</button>";
		}

function eatFood() {
			food += 20;
			document.getElementById("main").innerHTML = "<p>おいしい！あなたの体力が回復しました。</p><p>体力：" + health + "</p><p>食べ物：" + food + "</p><p>水：" + water + "</p><button onclick='findWater()'>水を探す</button>";
		}

function drinkWater() {
			water += 20;
			document.getElementById("main").innerHTML = "<p>おいしい！あなたの水分補給が完了しました。</p><p>体力：" + health + "</p><p>食べ物：" + food + "</p><p>水：" + water + "</p><button onclick='nextDay()'>次の日へ</button>";
		}

function nextDay() {
			day += 1;
			food -= 10;
			water -= 10;
			var damage = Math.floor(Math.random() * 20);
			health -= damage;

if (food <= 0 || water <= 0 || health <= 0) {
				document.getElementById("main").innerHTML = "<p>あなたは" + day + "日間生き延びましたが、残念ながら死んでしまいました。</p>";
			} else {
				document.getElementById("main").innerHTML = "<p>次の日が始まりました。今日の目標は何でしょうか？</p><p>体力：" + health + "</p><p>食べ物：" + food + "</p><p>水：" + water + "</p><button onclick='findFood()'>食べ物を探す</button><button onclick='findWater()'>水を探す</button>";
			}
		}
	</script>
</head>
<body onload="start()">
	<div id="main"></div>
</body>
</html>