ゴミ取りゲームルンバになって、ゴミを吸い込むゲーム's game

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

No:4568

437

←

Prev Next

→

ゴミ取りゲームルンバになって、ゴミを吸い込むゲーム
Developer もちきなこ｜Date and time 23/6/28 8:01:53
Build time 31.491 sec｜Game capacity 2.824KB｜

Script

ルンバになって、画面上のゴミを吸い込むゲームを作りました。スマホでも遊べるようにし、絵文字も使いました。以下が実際のプログラムです。

🗑️

このゲームは、画面上のゴミをクリックすることで取り除くことができ、ルンバのロボットをスマホのタッチ操作で動かすことができます。ただし、ゴミが複数存在しているわけではなく、ルンバが吸い込むアニメーションも単純なものとなっています。改善点や問題点があれば、適宜修正することができます。

←

Prev　Next

→ 　

Back　

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

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

ルンバになって、画面上のゴミを吸い込むゲームを作りました。スマホでも遊べるようにし、絵文字も使いました。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ルンバでゴミ取りゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			overflow: hidden;
			font-size: 20px;
			text-align: center;
		}
		#room {
			background-image: url("https://i.imgur.com/vRwfz4J.jpg");
			background-position: center;
			background-size: cover;
			height: 100vh;
			width: 100vw;
			position: relative;
		}
		#trash {
			position: absolute;
			top: 30%;
			left: 40%;
			font-size: 3em;
			opacity: 0.8;
			cursor: pointer;
		}
		#robot {
			position: absolute;
			bottom: 0;
			left: 50%;
			height: 15vw;
			width: 15vw;
			background-image: url("https://i.imgur.com/ySfGql4.png");
			background-size: contain;
			background-repeat: no-repeat;
			transform: translateX(-50%) rotate(0deg);
			animation: clean 4s infinite;
		}
		@keyframes clean {
			0% {
				transform: translateX(-50%) rotate(0deg);
			}
			25% {
				transform: translateX(-50%) rotate(-20deg);
			}
			50% {
				transform: translateX(-50%) rotate(0deg);
			}
			75% {
				transform: translateX(-50%) rotate(20deg);
			}
			100% {
				transform: translateX(-50%) rotate(0deg);
			}
		}
	</style>
</head>
<body>
	<div id="room">
		<div id="trash" onclick="trashClicked()">🗑️</div>
		<div id="robot"></div>
	</div>

function trashClicked() {
			trash.style.display = "none";
			alert("ゴミを取り除きました！");
		}

function moveRobot(event) {
			var x = event.touches[0].clientX;
			var y = event.touches[0].clientY;

robot.style.left = x + "px";

if (y < window.innerHeight / 2 && robot.style.transform !== "translateX(-50%) rotate(-90deg)") {
				robot.style.transform = "translateX(-50%) rotate(-90deg)";
			} else if (y > window.innerHeight / 2 && robot.style.transform !== "translateX(-50%) rotate(0deg)") {
				robot.style.transform = "translateX(-50%) rotate(0deg)";
			}
		}

document.addEventListener("touchmove", function(event) {
			event.preventDefault();
			moveRobot(event);
		});
	</script>
</body>
</html>
```

このゲームは、画面上のゴミをクリックすることで取り除くことができ、ルンバのロボットをスマホのタッチ操作で動かすことができます。ただし、ゴミが複数存在しているわけではなく、ルンバが吸い込むアニメーションも単純なものとなっています。

改善点や問題点があれば、適宜修正することができます。