Game of attacking and defeating the Demon King's game

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

No:1883

150

←

Prev Next

→

Game of attacking and defeating the Demon King
Developer User3318｜Date and time 23/6/19 12:07:44
Build time 50.031 sec｜Game capacity 2.619KB｜

Script

😈

HP: 50

このゲームは、魔王を攻撃して倒すシンプルなゲームです。魔王は初期状態で50のHPを持っており、クリックして攻撃していきます。攻撃を命中させると、ダメージが与えられHPが減ります。魔王のHPが0になった時に勝利となります。また、プレイヤーが最大攻撃回数に達しても魔王のHPが残っていれば敗北となります。ゲームオーバーになると「Message」に「You Win!」あるいは「You Lose...」と表示されます。Restartボタンを押すと、ゲームを再開できます。ゲーム中は絵文字を多用しています。モバイル端末で遊びやすいように、クリックイベントを使用しています。

←

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.0">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		body {
			background-color: #7FDBFF;
			font-size: 2em;
			text-align: center;
			margin: 0;
		}
		
		#maou {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		
		#maou span {
			font-size: 6em;
		}
		
		#hit {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: none;
		}
		
		#hit span {
			font-size: 3em;
			animation: fadeOut 1s forwards;
		}
		
		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
	</style>
	<script>
		var hp = 50; // 魔王のHP
		var isGameOver = false; // ゲームオーバーフラグ
		var hitCount = 0; // 攻撃の命中数
		var maxHits = 5; // 最大攻撃回数

$(function(){
			$('#maou').click(function(){
				if(!isGameOver) {
					hp--;
					$('#hp').html('HP: ' + hp);
					$('#maou span').html(hp);
					if(hp <= 0) {
						gameOver('You Win!');
					} else {
						hitCount++;
						if(hitCount >= maxHits) {
							gameOver('You Lose...');
						} else {
							showHit();
						}
					}
				}
			});

$('#restart').click(function(){
				location.reload();
			});
		});

function showHit(){
			$('#hit span').html('Hit!');
			$('#hit').fadeIn(300, function(){
				$(this).fadeOut(300);
			});
		}

function gameOver(msg){
			isGameOver = true;
			$('#maou span').html('😵');
			$('#message').html(msg);
			$('#restart').show();
		}
	</script>
</head>
<body>
	<div id="maou">
		<span>😈</span>
	</div>
	<p id="hp">HP: 50</p>
	<div id="hit">
		<span></span>
	</div>
	<p id="message"></p>
	<button id="restart" style="display:none;">Restart</button>
</body>
</html>