肉を焼くクエスト

クエスト中誰にも見つからずに肉を焼こう！

注：このコードを実行するには、"images"という名前のフォルダを作成し、"emozi_all/niku.png"と"emozi_all/niku.png"の2つの肉の画像を追加する必要があります。また、スマートフォンで正常に表示されるように、CSSにviewportの設定が含まれています。

←

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 {
			margin: 0;
			padding: 0;
			text-align: center;
			background-color: #FFE5B4;
		}

h1 {
			font-size: 50px;
			margin: 20px;
			color: #8B0000;
		}

#game-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
		}

#game-screen {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60px;
			background-color: white;
			border-radius: 30px;
			box-shadow: 0px 0px 50px #A9A9A9;
		}

#start-button {
			font-size: 30px;
			padding: 15px 30px;
			margin-top: 40px;
			background-color: #8B0000;
			border: none;
			border-radius: 10px;
			color: white;
			cursor: pointer;
		}

#game-screen img {
			max-width: 100%;
			max-height: 70vh;
			margin-bottom: 20px;
		}

#instruction {
			font-size: 20px;
			margin: 20px 0;
			color: #8B0000;
		}

#counter {
			font-size: 30px;
			margin-bottom: 20px;
			color: #8B0000;
		}

#result {
			font-size: 30px;
			color: #8B0000;
		}

#result img {
			max-width: 100%;
			max-height: 70vh;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div id="game-container">
		<h1>肉を焼くクエスト</h1>
		<div id="game-screen">
			<img src="images/niku.png" alt="肉">
			<button id="start-button">肉を焼く</button>
			<p id="instruction">クエスト中誰にも見つからずに肉を焼こう！</p>
			<p id="counter"></p>
			<p id="result"></p>
		</div>
	</div>

let timeLeft;

function playGame() {
			// ゲームのロジック
			timeLeft = 10;
			let countdown = setInterval(function() {
				timeLeft--;

if(timeLeft === 0) {
					clearInterval(countdown);
					result.innerHTML = "焼けました！";
					result.innerHTML += "<br><img src='images/yaki_niku.png' alt='焼肉'>";
				}

counter.innerText = "残り時間: " + timeLeft;
			}, 1000);
		}

startButton.addEventListener("click", playGame);
	</script>
</body>
</html>

注：このコードを実行するには、"images"という名前のフォルダを作成し、"niku.png"と"yaki_niku.png"の2つの肉の画像を追加する必要があります。また、スマートフォンで正常に表示されるように、CSSにviewportの設定が含まれています。