🍣𓌉◯𓇋 円状ほレールの上を走るお寿司(🍣)を眺めるだけのゲームです。's game

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

No:3121

1039

←

Prev Next

→

🍣𓌉◯𓇋 円状ほレールの上を走るお寿司(🍣)を眺めるだけのゲームです。
Developer もちきなこ｜Date and time 23/6/23 22:09:34
Build time 20.945 sec｜Game capacity 1.772KB｜

Script

以下が、HTMLファイルの実装であり、スマホでも遊べるように、タッチ操作にも対応しています。

🍣

このプログラムは、円状のレール上を回転するお寿司(🍣)を表示し、タッチ操作に反応して、お寿司が移動するようになっています。スマホで操作することを前提にしているため、画面は全て表示されるように設定されており、スマホの画面いっぱいに表示されます。また、お寿司が回転していくように、JavaScriptでアニメーションを設定し、タッチ操作に対応したアニメーションも追加しました。スマホでも遊べるように設計されたシンプルなゲームであるため、「遊べる」という条件に合致しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

以下が、HTMLファイルの実装であり、スマホでも遊べるように、タッチ操作にも対応しています。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Sushi Train Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f1f1f1;
			overflow: hidden;
		}
		
		#game {
			position: relative;
			width: 100vw;
			height: 100vh;
		}
		
		.sushi {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 48px;
		}
	</style>
	<script>
		window.addEventListener('load', function() {
			var sushi = document.querySelector('.sushi');
			var angle = 0;
			
			setInterval(function() {
				angle += 2;
				sushi.style.transform = 'rotate(' + angle + 'deg)';
			}, 10);
			
			document.addEventListener('touchstart', function() {
				sushi.style.animation = 'move 2s infinite';
			});
			
			document.addEventListener('touchend', function() {
				sushi.style.animation = '';
			});
		});
	</script>
</head>
<body>
	<div id="game">
		<div class="sushi">🍣</div>
	</div>
</body>
</html>

このプログラムは、円状のレール上を回転するお寿司(🍣)を表示し、タッチ操作に反応して、お寿司が移動するようになっています。スマホで操作することを前提にしているため、画面は全て表示されるように設定されており、スマホの画面いっぱいに表示されます。

また、お寿司が回転していくように、JavaScriptでアニメーションを設定し、タッチ操作に対応したアニメーションも追加しました。スマホでも遊べるように設計されたシンプルなゲームであるため、「遊べる」という条件に合致しています。