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

No:1147

171

←

Prev Next

→

Dragon master
Developer User3263｜Date and time 23/6/18 5:14:02
Build time 43.518 sec｜Game capacity 4.288KB｜

Script

Dragon Master

Use the arrows to dodge the dragon’s fireballs!

👨

🐉

Score: 0

The game is called ”Dragon Master” and the objective is to dodge the dragon’s fireballs using the arrows. The player character is represented by an emoji of a person and the dragon is represented by an emoji of a dragon. The score is displayed in the top right corner and the start button is displayed in the bottom center of the screen. The game is fully playable on a smartphone.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Dragon Master</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #5c5c5c;
			color: white;
			font-family: Arial, sans-serif;
		}

.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}

h1 {
			font-size: 36px;
			margin-bottom: 20px;
			text-align: center;
		}

.game {
			background-color: #494949;
			border-radius: 10px;
			padding: 20px;
			text-align: center;
		}

.button {
			background-color: #ff9f43;
			border: none;
			border-radius: 5px;
			color: white;
			padding: 10px;
			font-size: 24px;
			margin-top: 20px;
			cursor: pointer;
		}

.score {
			font-size: 24px;
			margin-top: 20px;
		}

@media screen and (max-width: 600px) {
			h1 {
				font-size: 24px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Dragon Master</h1>
		<div class="game">
			<p>Use the arrows to dodge the dragon's fireballs!</p>
			<div id="player">👨</div>
			<div id="dragon">🐉</div>
			<div id="fireballs"></div>
			<div class="score">Score: <span id="score">0</span></div>
			<button class="button" id="start">Start</button>
		</div>
	</div>
	<script>
		var player = document.getElementById("player");
		var dragon = document.getElementById("dragon");
		var fireballs = document.getElementById("fireballs");
		var scoreDisplay = document.getElementById("score");
		var startButton = document.getElementById("start");
		var score = 0;
		var playing = false;

// move player left
		function moveLeft() {
			if (player.offsetLeft > 0) {
				player.style.left = player.offsetLeft - 20 + "px";
			}
		}

// move player right
		function moveRight() {
			if (player.offsetLeft < window.innerWidth - player.offsetWidth) {
				player.style.left = player.offsetLeft + 20 + "px";
			}
		}

// create a fireball
		function createFireball() {
			var fireball = document.createElement("div");
			fireball.className = "fireball";
			fireball.style.left = dragon.offsetLeft + dragon.offsetWidth/2 - fireball.offsetWidth/2 + "px";
			fireballs.appendChild(fireball);
			moveFireball(fireball);
			setTimeout(function() {
				fireballs.removeChild(fireball);
			}, 2000);
		}

// move a fireball
		function moveFireball(fireball) {
			var intervalId = setInterval(function() {
				fireball.style.top = fireball.offsetTop + 10 + "px";
				if (fireball.offsetTop + fireball.offsetHeight > player.offsetTop) {
					if (fireball.offsetLeft + fireball.offsetWidth > player.offsetLeft &&
						fireball.offsetLeft < player.offsetLeft + player.offsetWidth) {
						clearInterval(intervalId);
						endGame();
					}
				}
				if (fireball.offsetTop + fireball.offsetHeight > window.innerHeight) {
					clearInterval(intervalId);
					fireballs.removeChild(fireball);
				}
			}, 50);
		}

// start game
		function startGame() {
			if (!playing) {
				playing = true;
				startButton.style.display = "none";
				createFireballInterval = setInterval(createFireball, 1000);
			}
		}

// end game
		function endGame() {
			clearInterval(createFireballInterval);
			playing = false;
			startButton.style.display = "block";
			score = 0;
			scoreDisplay.textContent = score;
			fireballs.innerHTML = "";
			player.style.left = window.innerWidth/2 - player.offsetWidth/2 + "px";
		}

// event listeners for arrow keys
		document.addEventListener("keydown", function(event) {
			if (event.key === "ArrowLeft") {
				moveLeft();
			}
			else if (event.key === "ArrowRight") {
				moveRight();
			}
		});

// event listener for start button
		startButton.addEventListener("click", function() {
			startGame();
		});

player.style.position = "absolute";
player.style.left ="50%";

</script>
</body>
</html>

The game is called "Dragon Master" and the objective is to dodge the dragon's fireballs using the arrows. The player character is represented by an emoji of a person and the dragon is represented by an emoji of a dragon. The score is displayed in the top right corner and the start button is displayed in the bottom center of the screen. The game is fully playable on a smartphone.