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

No:1338

←

Prev Next

→

Fighting Monsters game
Developer User3312｜Date and time 23/6/18 11:27:36
Build time 99.379 sec｜Game capacity 2.887KB｜

Script

モンスター闘技場

このゲームはプレイヤーがモンスターと戦うゲームです。ボタンを押すと攻撃を行い、ランダムなダメージを与えます。モンスターのHPが0になるとゲームが終了し、スコアが表示されます。また、攻撃を行うとプレイヤーのスコアが回復します。モンスターを倒すともう一度遊ぶことができます。絵文字は使用していません。スマホでも遊べるようにレスポンシブデザインに対応しています。

←

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">
	<style>
		body {
			background-color: #c2e0ff;
			font-family: Arial, sans-serif;
			text-align: center;
		}

h1 {
			font-size: 3em;
			margin-top: 30px;
			color: #FF69B4;
		}

#monster {
			width: 200px;
			height: 200px;
			background-color: #f4f4f4;
			border-radius: 50%;
			display: inline-block;
			margin-top: 50px;
			transition: all 0.3s ease-in-out;
		}

#monster:hover {
			transform: scale(1.1);
		}

#button {
			margin-top: 50px;
			background-color: #FF69B4;
			color: #fff;
			font-size: 2em;
			padding: 20px 50px;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

#button:hover {
			background-color: #fff;
			color: #FF69B4;
			transform: scale(1.1);
		}

#score {
			font-size: 2em;
			margin-top: 50px;
			color: #FF69B4;
		}
	</style>
</head>
<body>
	<h1>モンスター闘技場</h1>

const monster = document.querySelector('#monster');
		const button = document.querySelector('#button');
		const score = document.querySelector('#score');

function endGame() {
			monster.style.backgroundColor = 'rgb(255, 0, 0)';
			button.removeEventListener('click', attack);
			button.innerText = 'もう一度遊ぶ';
			button.addEventListener('click', reset);
			score.innerText = 'モンスターを倒しました! スコア: ' + playerScore;
		}

function reset() {
			monsterHP = 100;
			playerScore = 0;
			monster.style.backgroundColor = '#f4f4f4';
			score.innerText = '';
			button.innerText = '攻撃';
			button.removeEventListener('click', reset);
			button.addEventListener('click', attack);
		}

button.addEventListener('click', attack);
	</script>
</body>
</html>