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

No:1691

1196

←

Prev Next

→

Games loved by Ryoko Hirosue
Developer User3390｜Date and time 23/6/18 22:00:41
Build time 48.353 sec｜Game capacity 3.423KB｜

Script

Games loved by Ryoko Hirosue

This is a simple game that can be played on a smartphone. Type the message that you want to be loved by Ryoko Hirosue that appears on the screen at the appropriate speed.、Lets win her heart!

*If you are too slow, the Hirosue Ryoko will go through you. There is no need to hurry.、Focus on accurate typing.

I want to be loved by Ryoko Hirosue!

0 seconds elapsed

Heart Count: 1 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>広末涼子に愛されるゲーム</title>
</head>
<body>
	<div id="game-container">
		<h1>広末涼子に愛されるゲーム</h1>
		<p>スマホで遊べる簡単ゲームです。画面に表示される広末涼子に愛されたいというメッセージを適切なスピードでタイピングし、彼女のハートをゲットしよう！</p>
		<p>※スピードが遅すぎると広末涼子はあなたをスルーしてしまいます。急がなくても良いので、正確なタイピングに集中しましょう。</p>
		<div id="game-area">
			<img id="hiro" src="https://i.imgur.com/OnJZ2by.png" alt="広末涼子">
			<p id="message">広末涼子に愛されたい！</p>
			<p id="timer">0秒経過</p>
			<input id="text-input" type="text" placeholder="メッセージを入力" autocomplete="off">
		</div>
		<div id="score-area">
			<p>ハート数: <span id="score">0</span></p>
		</div>
	</div>
	<script>
		const hiro = document.getElementById('hiro');
		const message = document.getElementById('message');
		const timer = document.getElementById('timer');
		const score = document.getElementById('score');
		const textInput = document.getElementById('text-input');

let scoreCount = 0;
		let messageSpeed;
		let startTime;

function setSpeed() {
			messageSpeed = Math.floor(Math.random() * 3) + 1;
			message.style.animationDuration = messageSpeed + 's';
		}

function startTimer() {
			startTime = Date.now();
			timer.innerText = '0秒経過';
			timerInterval = setInterval(updateTimer, 1000);
		}

function updateTimer() {
			const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
			timer.innerText = elapsedTime + '秒経過';
		}

function checkMessage() {
			const inputMessage = textInput.value;
			if (inputMessage === message.innerText) {
				message.innerText = '💕'; // ハート表示
				scoreCount++;
				score.innerText = scoreCount;
			}
			textInput.value = "";
			setSpeed();
		}

textInput.addEventListener('input', checkMessage);

setSpeed();
		startTimer();
	</script>
	<style>
		#game-container {
			max-width: 400px;
			margin: 0 auto;
			text-align: center;
			font-size: 2rem;
		}
		#game-area {
			position: relative;
			margin-top: 2rem;
			margin-bottom: 3rem;
			height: 10rem;
			padding-top: 2rem;
			padding-bottom: 1rem;
			background-color: #F6D3CA;
			border-radius: 1rem;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		}
		#hiro {
			position: absolute;
			left: calc(50% - 50px);
			top: -80px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
		}
		#message {
			margin: 0;
			padding-top: 2rem;
			font-family: sans-serif;
			font-weight: bold;
			animation: message 3s linear infinite;
			animation-play-state: running;
		}
		@keyframes message {
			0% {
				opacity: 0;
				transform: translateY(-50%);
			}
			20% {
				opacity: 1;
				transform: translateY(0);
			}
			80% {
				opacity: 1;
				transform: translateY(0);
			}
			100% {
				opacity: 0;
				transform: translateY(50%);
			}
		}
		#text-input {
			display: block;
			margin: 0 auto;
			width: 80%;
			padding: 0.5rem;
			font-size: 1.2rem;
			border: 2px solid black;
			border-radius: 1rem;
			outline: none;
			background-color: #F7F7F7;
		}
		#score-area {
			margin-bottom: 2rem;
			font-size: 1.5rem;
		}
	</style>
</body>
</html>