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

No:3187

1128

←

Prev Next

→

battle royal
Developer User3655｜Date and time 23/6/24 3:25:57
Build time 37.774 sec｜Game capacity 3.553KB｜

Script

バトルロワイアル

あなたは荒れ果てた島に降り立ち、他の参加者との生死を賭けた戦いに挑戦します。

画面下部のボタンで移動し、画面上部のボタンで攻撃してください。

このプログラムは、スマホでも操作しやすいように、ボタンを配置しています。プレイヤーは矢印キーで、敵に向かって移動しなければなりません。攻撃は攻撃ボタンで行います。バトルロワイアル感を出すために、画面の背景として荒れ果てた島を設定し、プレイヤーはスマイリー、敵はおじいさんの絵文字で表現しています。敵を撃破するとスコアが加算され、ゲームが進行していきます。

←

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>
</head>
<body>
	<h1>バトルロワイアル</h1>
	<p>あなたは荒れ果てた島に降り立ち、他の参加者との生死を賭けた戦いに挑戦します。</p>
	<p>画面下部のボタンで移動し、画面上部のボタンで攻撃してください。</p>
	<div id="bg"></div>
	<img id="player" src="emoji_player.png" alt="プレイヤー">
	<img id="enemy" src="emoji_enemy.png" alt="敵">
	<button id="up">上に移動</button>
	<button id="left">左に移動</button>
	<button id="right">右に移動</button>
	<button id="down">下に移動</button>
	<button id="attack">攻撃</button>
	<div id="result"></div>
	<script>
		// 初期化処理
		var player = document.getElementById("player");
		var enemy = document.getElementById("enemy");
		var result = document.getElementById("result");
		var bg = document.getElementById("bg");
		var score = 0;
		bg.style.backgroundImage = "url(emoji_bg.png)";
		player.style.position = "absolute";
		player.style.left = "50%";
		player.style.top = "50%";
		enemy.style.position = "absolute";
		enemy.style.left = Math.random() * 80 + "%";
		enemy.style.top = Math.random() * 80 + "%";
		enemy.style.display = "none";
		// 移動処理
		document.getElementById("up").addEventListener("click", function() {
			player.style.top = parseInt(player.style.top) - 30 + "px";
			if (checkCollision()) {
				player.style.top = parseInt(player.style.top) + 30 + "px";
			}
		});
		document.getElementById("left").addEventListener("click", function() {
			player.style.left = parseInt(player.style.left) - 30 + "px";
			if (checkCollision()) {
				player.style.left = parseInt(player.style.left) + 30 + "px";
			}
		});
		document.getElementById("right").addEventListener("click", function() {
			player.style.left = parseInt(player.style.left) + 30 + "px";
			if (checkCollision()) {
				player.style.left = parseInt(player.style.left) - 30 + "px";
			}
		});
		document.getElementById("down").addEventListener("click", function() {
			player.style.top = parseInt(player.style.top) + 30 + "px";
			if (checkCollision()) {
				player.style.top = parseInt(player.style.top) - 30 + "px";
			}
		});
		// 攻撃処理
		var attackable = true;
		document.getElementById("attack").addEventListener("click", function() {
			if (!attackable) {
				return;
			}
			attackable = false;
			enemy.style.display = "block";
			setTimeout(function() {
				if (checkCollision()) {
					score++;
					result.innerHTML = "撃破！　スコア：" + score;
				} else {
					result.innerHTML = "攻撃失敗";
				}
				enemy.style.display = "none";
				attackable = true;
			}, 1000);
		});
		// 衝突判定
		function checkCollision() {
			var px = parseInt(player.style.left);
			var py = parseInt(player.style.top);
			var ex = parseInt(enemy.style.left);
			var ey = parseInt(enemy.style.top);
			return Math.abs(px - ex) < 50 && Math.abs(py - ey) < 50;
		}
	</script>
</body>
</html>