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

No:714

493

←

Prev Next

→

Rogue-like game to defeat monsters like Monster Hu..ALL
Developer User3100｜Date and time 23/6/17 14:18:09
Build time 31.116 sec｜Game capacity 2.256KB｜

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>
	<style>
		body {
			background-color: #EFEFEF;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			color: #1A8EC7;
		}
		#game-container {
			width: 300px;
			height: 300px;
			margin: 20px auto;
			border: 1px solid #777;
			background-color: #FFF;
			position: relative;
		}
		#player {
			width: 32px;
			height: 32px;
			background-color: #F00;
			position: absolute;
			top: 0;
			left: 0;
		}
		#monster {
			width: 32px;
			height: 32px;
			background-color: #0F0;
			position: absolute;
			top: 100px;
			left: 200px;
		}
		#message {
			color: #1A8EC7;
			margin: 20px auto;
		}
	</style>
</head>
<body>
	<h1>モンスターローグライク</h1>
	<div id="game-container">
		<div id="player"></div>
		<div id="monster"></div>
	</div>
	<div id="message">目の前にモンスターが現れた！</div>

// モンスターの座標
		let monsterX = 200;
		let monsterY = 100;

// キーボードの入力を検知してプレイヤーを動かす
		document.addEventListener('keydown', (event) => {
			switch (event.key) {
				case 'ArrowUp':
					playerY -= 10;
					break;
				case 'ArrowDown':
					playerY += 10;
					break;
				case 'ArrowLeft':
					playerX -= 10;
					break;
				case 'ArrowRight':
					playerX += 10;
					break;
			}

// プレイヤーとモンスターが衝突した場合
			if (playerX === monsterX && playerY === monsterY) {
				alert('モンスターを倒した！');
				location.reload();
			}

// プレイヤーとモンスターの位置を更新する
			document.getElementById('player').style.top = playerY + 'px';
			document.getElementById('player').style.left = playerX + 'px';
		});
	</script>
</body>
</html>