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

No:3818

667

←

Prev Next

→

RPG in which you become a wolf and defeat animals ..ALL
Developer User3740｜Date and time 23/6/26 17:54:35
Build time 43.61 sec｜Game capacity 3.915KB｜

Script

「狼RPG」と題するゲームを作成しました。以下が実装したコードです。

狼RPG

このゲームでは、プレーヤーは狼として動物を狩り、レベルを上げて強くなっていきます。ゲームの流れは以下の通りです。 1. スタートボタンを押すと、ゲームが開始されます。 2. 狼が画面に現れます。狼をクリックすると、ランダムに選ばれた動物が現れます。 3. 動物を倒すと、その数が画面に表示されます。また、狼が1匹減ります。 4. 狼が全滅すると、レベルが上がります。レベルが最大値に達するとゲーム終了。 5. ゲームオーバー、またはゲームクリアー時に、画面にメッセージが表示されます。スマートフォンでも操作可能です。また、動物の選択肢には絵文字を使用しています。

←

Prev　Next

→ 　

Back　

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

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

「狼RPG」と題するゲームを作成しました。以下が実装したコードです。

<!DOCTYPE html>
<html>
<head>
	<title>狼RPG</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			background-color: #559955;
			text-align: center;
		}
		h1 {
			font-size: 48px;
			color: white;
			margin-top: 50px;
		}
		#wolf {
			display: inline-block;
			font-size: 100px;
			color: white;
			cursor: pointer;
		}
		#animals {
			display: inline-block;
			font-size: 60px;
			color: white;
			margin-top: 80px;
			margin-bottom: 50px;
		}
		#level {
			font-size: 36px;
			color: white;
			margin-bottom: 20px;
		}
		#message {
			font-size: 24px;
			color: white;
			margin-top: 20px;
			margin-bottom: 40px;
		}
	</style>
	<script type="text/javascript">
		var level = 1;
		var maxLevel = 5;
		var maxAnimals = 10;
		var wolves = [];
		var animals = ["🐰", "🐺", "🦊", "🐻", "🦌"];
		var animalCount = {};
		var messageTimer;

function startGame() {
			document.getElementById("startButton").style.display = "none";
			document.getElementById("wolf").style.display = "inline-block";

createWolves();
			updateAnimals();
			updateLevel();
		}

function createWolves() {
			for (var i = 0; i < level; i++) {
				wolves.push(createWolf());
			}
		}

function createWolf() {
			var wolf = document.createElement("div");
			wolf.innerHTML = "🐺";
			wolf.style.position = "absolute";
			wolf.style.left = Math.floor(Math.random() * (window.innerWidth - 100)) + "px";
			wolf.style.top = Math.floor(Math.random() * (window.innerHeight - 100)) + "px";
			wolf.onclick = function() { wolfClicked(wolf) };
			document.body.appendChild(wolf);
			return wolf;
		}

function wolfClicked(wolf) {
			var animal = animals[Math.floor(Math.random() * animals.length)];
			animalCount[animal] = (animalCount[animal] || 0) + 1;
			updateAnimals();
			wolf.style.display = "none";
			wolves.splice(wolves.indexOf(wolf), 1);

if (wolves.length == 0) {
				clearTimeout(messageTimer);
				if (level < maxLevel) {
					level++;
					message("Level up!", 2000);
					createWolves();
				} else {
					message("Congratulations! You have finished the game.", 5000);
				}
				updateLevel();
			}
		}

function updateAnimals() {
			var animalText = "";
			for (var i = 0; i < animals.length; i++) {
				var count = animalCount[animals[i]] || 0;
				animalText += animals[i] + ": " + count + " ";
			}
			document.getElementById("animals").innerHTML = animalText;
		}

function updateLevel() {
			document.getElementById("level").innerHTML = "Level: " + level;
		}

function message(text, duration) {
			document.getElementById("message").innerHTML = text;
			messageTimer = setTimeout(function() { document.getElementById("message").innerHTML = ""; }, duration);
		}
	</script>
</head>
<body>
	<h1>狼RPG</h1>
	<button id="startButton" onclick="startGame()">Start</button>
	<div id="wolf" onclick="wolfClicked()"></div>
	<div id="animals"></div>
	<div id="level"></div>
	<div id="message"></div>
</body>
</html>

このゲームでは、プレーヤーは狼として動物を狩り、レベルを上げて強くなっていきます。ゲームの流れは以下の通りです。

1. スタートボタンを押すと、ゲームが開始されます。
2. 狼が画面に現れます。狼をクリックすると、ランダムに選ばれた動物が現れます。
3. 動物を倒すと、その数が画面に表示されます。また、狼が1匹減ります。
4. 狼が全滅すると、レベルが上がります。レベルが最大値に達するとゲーム終了。
5. ゲームオーバー、またはゲームクリアー時に、画面にメッセージが表示されます。

スマートフォンでも操作可能です。また、動物の選択肢には絵文字を使用しています。