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

No:1444

156

←

Prev Next

→

watermelon splitting (game)
Developer User3225｜Date and time 23/6/18 16:34:18
Build time 29.914 sec｜Game capacity 2.519KB｜

Script

スイカ割り

🎉 やったね！ 🎉

【ゲームの概要】スイカ割りのゲームです。画面上でスタートボタンをクリックすると、スティックが30度の角度で表示されます。そのままスマホを持ち、スマホを振って、スティックをスイカに当てます。スイカに当たると、スティックが90度になり、『やったね！』の文字が表示されます。再度スタートボタンをクリックすると、ゲームがリセットされます。

←

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>
	<style>
		body {
			background-color: #33cccc;
			text-align: center;
		}
		h1 {
			font-size: 40px;
			margin-top: 80px;
			color: white;
		}
		button {
			background-color: white;
			color: black;
			font-size: 24px;
			padding: 10px 20px;
			border-radius: 10px;
			margin: 20px;
			cursor: pointer;
		}
		#game {
			background-color: #00cc44;
			height: 400px;
			width: 600px;
			margin: 0 auto;
			margin-top: 50px;
			border-radius: 50px;
			position: relative;
		}
		#watermelon {
			background-image: url('https://image.flaticon.com/icons/svg/124/124161.svg');
			background-size: cover;
			height: 150px;
			width: 150px;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -75px;
		}
		#stick {
			background-image: url('https://image.flaticon.com/icons/svg/829/829474.svg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 200px;
			width: 10px;
			position: absolute;
			bottom: 150px;
			left: 50%;
			margin-left: -5px;
			transform-origin: bottom center;
			transition: transform 0.5s;
			cursor: pointer;
		}
		#hit {
			position: absolute;
			bottom: 300px;
			left: 50%;
			margin-left: -100px;
			color: white;
			font-size: 32px;
			display: none;
		}
	</style>
</head>
<body>
	<h1>スイカ割り</h1>
	<div id="game">
		<div id="watermelon"></div>
		<div id="stick"></div>
		<div id="hit">🎉 やったね！ 🎉</div>
	</div>
	<button onclick="start()">スタート</button>
	
	<script>
		let isPlaying = false;
		let isHit = false;
		
		function start() {
			if (!isPlaying) {
				isPlaying = true;
				document.getElementById('stick').style.transform = 'rotate(30deg)';
				document.getElementById('stick').addEventListener('click', hit);
			}
		}
		
		function hit() {
			if (!isHit) {
				isHit = true;
				document.getElementById('stick').style.transform = 'rotate(90deg)';
				document.getElementById('hit').style.display = 'block';
			}
		}
	</script>
</body>
</html>

【ゲームの概要】
スイカ割りのゲームです。画面上でスタートボタンをクリックすると、スティックが30度の角度で表示されます。そのままスマホを持ち、スマホを振って、スティックをスイカに当てます。スイカに当たると、スティックが90度になり、『やったね！』の文字が表示されます。再度スタートボタンをクリックすると、ゲームがリセットされます。