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

No:3143

8211

←

Prev Next

→

flurry of falling cherry blossoms
Developer anonymous｜Date and time 70/1/1 9:47:25
Build time unknown sec｜Game capacity 2.845KB｜

Script

桜吹雪ゲーム

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>桜吹雪ゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #ffcccc;
			text-align: center;
			font-family: sans-serif;
		}
		h1 {
			font-size: 3em;
		}
		button {
			font-size: 1.5em;
			padding: 10px 20px;
			margin: 10px;
			background-color: #ffff66;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			box-shadow: 3px 3px 3px #999;
		}
		button:hover {
			background-color: #ffcc66;
		}
		#game {
			position: relative;
			width: 100%;
			height: 80vh;
			margin: auto;
			overflow: hidden;
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 120px;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/person-playing-handball_1f93e.png');
			background-size: contain;
			background-repeat: no-repeat;
		}
		.sakura {
			position: absolute;
			top: -100px;
			width: 30px;
			height: 30px;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/softbank/118/cherry-blossom_1f338.png');
			background-size: contain;
			background-repeat: no-repeat;
			animation: sakura-fall linear 5s infinite;
		}
		@keyframes sakura-fall {
			0% {
				transform: rotate(-20deg) translateX(-50px);
			}
			100% {
				transform: rotate(20deg) translateX(50px);
			}
		}
	</style>
</head>
<body>
	<h1>桜吹雪ゲーム</h1>
	<button onclick="start()">スタート！</button>
	<div id="game"></div>
	<script>
		const gameDiv = document.getElementById('game');
		const playerDiv = document.createElement('div');
		playerDiv.id = 'player';
		gameDiv.appendChild(playerDiv);
		function start() {
			var score = 0;
			var speed = 6;
			var interval = setInterval(function() {
				createSakura();
				var sakuraList = document.getElementsByClassName('sakura');
				for (var i = 0; i < sakuraList.length; i++) {
					var sakura = sakuraList[i];
					sakura.style.top = sakura.offsetTop + speed + 'px';
					if (sakura.offsetTop > gameDiv.clientHeight) {
						sakura.remove();
					}
					if (isCollide(playerDiv, sakura)) {
						clearInterval(interval);
						alert('GAME OVER\nスコア：' + score);
						return;
					}
				}
				score++;
				speed += 0.01;
			}, 10);
		}
		function createSakura() {
			var sakuraDiv = document.createElement('div');
			sakuraDiv.className = 'sakura';
			sakuraDiv.style.left = Math.random() * gameDiv.clientWidth + 'px';
			gameDiv.appendChild(sakuraDiv);
		}
		function isCollide(a, b) {
			var aRect = a.getBoundingClientRect();
			var bRect = b.getBoundingClientRect();
			return !(aRect.bottom < bRect.top || aRect.top > bRect.bottom || aRect.right < bRect.left || aRect.left > bRect.right);
		}
	</script>
</body>
</html>