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

No:3513

7228

←

Prev Next

→

Mochi making game
Developer もちきなこ｜Date and time 23/6/25 10:22:14
Build time 23.818 sec｜Game capacity 2.057KB｜

Script

お餅をつくゲーム

←

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: #FCEBB6;
			text-align: center;
			margin-top: 50px;
		}

h1 {
			font-size: 30px;
			text-align: center;
			color: #C5000B;
		}

button {
			background-color: #F9BF3B;
			border: none;
			font-size: 20px;
			padding: 10px 20px;
			margin-top: 30px;
			border-radius: 10px;
			cursor: pointer;
		}

#mochi {
			width: 150px;
			height: 150px;
			margin: 30px auto;
		}

#mallet {
			width: 70px;
			height: 150px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}

#pounding {
			display: none;
			position: absolute;
			width: 300%;
			z-index: 2;
			bottom: 0;
			left: -100%;
			animation: pounding 1s linear infinite;
		}

@keyframes pounding {
			0% {
				transform: rotate(0deg);
			}
			50% {
				transform: rotate(-45deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
	</style>
</head>
<body>
	<h1>お餅をつくゲーム</h1>
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/273/rice-cake_1f95c.png" alt="餅" id="mochi">
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/273/hammer_1f528.png" alt="杵" id="mallet">
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/273/hot-pepper_1f336.png" alt="唐辛子" id="pounding">
	<button onclick="poundMochi()">餅をつく</button>

function poundMochi() {
			mallet.style.display = "none";
			pounding.style.display = "block";

setTimeout(function() {
				pounding.style.display = "none";
				mallet.style.display = "block";
				mochi.setAttribute("src", "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/273/rice-cracker_1f358.png");
			}, 1000);
		}
	</script>
</body>
</html>