AI game creator

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

No:33

686

←

Prev Next

→

Simple crane game
Developer anonymous｜Date and time 23/5/2 14:17:17
Build time 73.55 sec｜Game capacity 3.751KB｜

Script

Welcome to Simple Crane Game! Here you do not need any difficult operation. This game allows you to relax and enjoy.

To play, press the button below.

←

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 type="text/css">
		body {
			background-color: #FFF;
			font-size: 24px;
			text-align: center;
		}
		div.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		div.game {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		div.cranemachine {
			margin: 20px;
			background-color: #DDD;
			border: 10px solid #555;
			border-radius: 20px;
			width: 400px;
			height: 430px;
			overflow: hidden;
			position: relative;
		}
		div.cranemachine:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 300px;
			height: 300px;
			border: 10px solid #555;
			border-radius: 100%;
			background-color: #FFF;
		}
		div.cranemachine:after {
			content: '';
			display: block;
			position: absolute;
			top: 310px;
			left: 50%;
			transform: translateX(-50%);
			width: 50px;
			height: 50px;
			border: 10px solid #555;
			border-radius: 50%;
			background-color: #FFF;
		}
		div.cranemachine img {
			position: absolute;
			top: 70px;
			left: 50%;
			transform: translateX(-50%);
			width: 200px;
			height: 200px;
		}
		div.claw {
			position: absolute;
			top: 200px;
			left: 50%;
			transform: translateX(-50%);
			width: 30px;
			height: 100px;
			background-color: #F00;
			box-shadow: 0 0 10px #000;
			border-radius: 5px;
			transition: all 0.5s ease-in-out;
		}
		div.prize {
			position: absolute;
			top: 350px;
			left: 50%;
			transform: translateX(-50%);
			width: 50px;
			padding: 5px;
			background-color: #FF0;
			box-shadow: 0 0 10px #000;
			border-radius: 5px;
			transition: all 0.5s ease-in-out;
		}
		p.instructions {
			margin-top: 20px;
			font-weight: bold;
		}
		button.playbutton {
			margin-top: 20px;
			padding: 10px;
			background-color: #00F;
			border: none;
			border-radius: 5px;
			color: #FFF;
			font-size: 24px;
			font-weight: bold;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">
		<p>ようこそ、シンプルなクレーンゲームへ！ここでは、あなたに難しい操作は必要ありません。このゲームは、あなたがリラックスして楽しむことができます。</p>

<p class="instructions">プレイするには、下のボタンを押してください。</p>
			<button class="playbutton">プレイ</button>
		</div>
	</div>

claw.addEventListener('transitionend', function() {
				if (claw.offsetTop > 300) {
					prize.style.top = '0';
					alert('おめでとうございます！プライズを手に入れました！');
				}
				else {
					claw.style.transform = 'rotate(0deg)';
					prize.style.transform = 'translateY(100%)';
					setTimeout(function() {
						claw.style.transform = 'rotate(-45deg)';
						prize.style.transform = 'translateY(50%)';
						playbutton.disabled = false;
					}, 1000);
				}
			});

playbutton.addEventListener('click', function() {
				playbutton.disabled = true;
				claw.style.transform = 'rotate(45deg)';
				prize.style.transform = 'translateY(0)';
			});
		};
	</script>
</body>
</html>