AI game creator

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

No:1780

1032

←

Prev Next

→

Avoid poop game
Developer User3404｜Date and time 23/6/19 1:04:22
Build time 180.652 sec｜Game capacity 3.656KB｜

Script

このゲームは、スマホの傾きを利用してうんこを避けてスコアを稼ぐゲームです。プレイヤーは画面の下に表示されるうんこの図形で、スマホの傾きに合わせて動きます。うんこは左側から右側に流れてくるので、プレイヤーがぶつかってしまうとゲームオーバーとなります。スコアは、うんこを避けるたびに1点加算され、5点ごとにうんこの速度が1段階上がります。ゲームオーバーになると、画面に「GAME OVER」と表示されます。

←

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 {
			margin: 0;
			padding: 0;
			background-color: #f9e4b7;
			font-family: sans-serif;
			text-align: center;
		}
		#game {
			background-color: #fff;
			height: 80vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		#player {
			position: relative;
		}
		#player img {
			width: 60px;
			height: auto;
			position: absolute;
			bottom: 0;
		}
		#obstacle {
			position: absolute;
			left: 0;
			bottom: 0;
		}
		#obstacle img {
			width: 40px;
			height: auto;
		}
		#score {
			font-size: 36px;
			margin-top: 20px;
		}
		#message {
			font-size: 24px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div id="game">
		<div id="player">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/pile-of-poo_1f4a9.png" alt="player">
		</div>
		<div id="obstacle">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/pile-of-poo_1f4a9.png" alt="obstacle">
		</div>
		<div id="score">0</div>
		<div id="message"></div>
	</div>

let playerX = 0;
		let playerY = 0;
		let obstacleX = Math.floor(Math.random() * 80);
		let obstacleSpeed = 5;
		let score = 0;

window.addEventListener("deviceorientation", handleOrientation);

function handleOrientation(event) {
			playerX = (90 + event.gamma) * (window.innerWidth / 180) - player.clientWidth / 2;
			playerY = (90 + event.beta) * (window.innerHeight / 180) - player.clientHeight / 2;

if (playerX < 0) {
				playerX = 0;
			} else if (playerX + player.clientWidth > window.innerWidth) {
				playerX = window.innerWidth - player.clientWidth;
			}

if (playerY < 0) {
				playerY = 0;
			} else if (playerY + player.clientHeight > window.innerHeight) {
				playerY = window.innerHeight - player.clientHeight;
			}

player.style.left = playerX + "px";
			player.style.top = playerY + "px";
		}

function gameLoop() {
			obstacleX -= obstacleSpeed;

if (obstacleX + obstacle.clientWidth < 0) {
				obstacleX = Math.floor(Math.random() * 80) + 100;
				score++;
				scoreBoard.textContent = score;

if (score % 5 === 0) {
					obstacleSpeed++;
				}
			}

obstacle.style.left = obstacleX + "vw";

if (isCollision()) {
				clearInterval(gameInterval);
				messageBoard.textContent = "GAME OVER";
			}
		}

function isCollision() {
			const playerRect = player.getBoundingClientRect();
			const obstacleRect = obstacle.getBoundingClientRect();

return !(
				playerRect.right < obstacleRect.left ||
				playerRect.left > obstacleRect.right ||
				playerRect.bottom < obstacleRect.top ||
				playerRect.top > obstacleRect.bottom
			);
		}

const gameInterval = setInterval(gameLoop, 20);
	</script>
</body>
</html>