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

No:2568

1165

←

Prev Next

→

Floating in the air
Developer User3494｜Date and time 23/6/22 0:20:48
Build time 26.105 sec｜Game capacity 2.252KB｜

Script

する魔法使いが、悪い魔法使いに攻撃される物語のゲームを作りました！

魔法使いの冒険

👿

👆

プレーヤーは"👆"のアイコンをタップして、魔法を放ちます。敵はランダムに移動し、プレイヤーにぶつかった場合は得点がリセットされます。アプリは1つのhtmlファイルで実装されており、スマホでプレイ可能です。魔法使いの冒険を楽しんでください！

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

する魔法使いが、悪い魔法使いに攻撃される物語のゲームを作りました！

<!DOCTYPE html>
<html>
<head>
	<title>魔法使いの冒険</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		body {
			background-color: #fefefe;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		h1 {
			font-size: 2.5rem;
			color: #ff9900;
		}
		#player {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4rem;
			cursor: pointer;
		}
		#enemy {
			position: absolute;
			top: 10%;
			left: 10%;
			font-size: 4rem;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			// Initialize variables
			var score = 0;
			var player = document.getElementById('player');
			var enemy = document.getElementById('enemy');

// Move enemy randomly
			setInterval(function() {
				var x = Math.floor(Math.random() * (window.innerWidth - enemy.offsetWidth));
				var y = Math.floor(Math.random() * (window.innerHeight - enemy.offsetHeight));
				enemy.style.left = x + 'px';
				enemy.style.top = y + 'px';

// Check collision between player and enemy
				if (Math.abs(player.offsetTop - enemy.offsetTop) < player.offsetHeight / 2
						&& Math.abs(player.offsetLeft - enemy.offsetLeft) < player.offsetWidth / 2) {
					// Collision occurred
					alert('ゲームオーバー！得点：' + score);
					score = 0;
				}
			}, 1500);

// Increase the score when the player clicks on the screen
			document.addEventListener('click', function() {
				score++;
				player.innerHTML = '🧙‍♂️';
				setTimeout(function() {
					player.innerHTML = '👆';
				}, 300);
			});
		};
	</script>
</head>
<body>
	<h1>魔法使いの冒険</h1>
	<div id="enemy">👿</div>
	<div id="player">👆</div>
</body>
</html>