AI game creator

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

No:2077

1503

←

Prev Next

→

Cat P
Developer User3428｜Date and time 23/6/20 1:33:01
Build time 66.346 sec｜Game capacity 3.478KB｜

Script

This game, called Cat Pizza, is a simple game where the objective is to help the cat eat the pizza that is randomly appearing on the screen. The user can help the cat grow by dragging the cat toward the pizza with their finger. However, the user must watch out for the bombs that are also randomly appearing on the screen, as touching them will cause the user to lose points. The game is designed to be played using a smartphone and features plenty of emojis to keep the game fun and entertaining.

←

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>Cat Pizza</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}

#gameContainer {
			position: relative;
			width: 100%;
			height: 100%;
		}

#cat {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/238/cat-face_1f431.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			z-index: 1;
		}

#pizza {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 0;
			left: 0;
			transform: translate(0, -100%);
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/238/slice-of-pizza_1f355.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			animation: appear 2s ease-in-out infinite;
		}

@keyframes appear {
			0% {
				opacity: 0;
				top: 0;
			}
			50% {
				opacity: 1;
			}
			100% {
				opacity: 0;
				top: 100%;
			}
		}

#bomb {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 0;
			left: 0;
			transform: translate(0, -100%);
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/238/bomb_1f4a3.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			animation: appear 2s ease-in-out infinite;
			animation-delay: 1s;
		}
	</style>
</head>
<body>
	<div id="gameContainer">
		<div id="cat"></div>
		<div id="pizza"></div>
		<div id="bomb"></div>
	</div>

document.addEventListener('touchmove', (e) => {
			cat.style.left = e.touches[0].clientX + 'px';
			cat.style.top = e.touches[0].clientY + 'px';
		});

setInterval(() => {
			let randomX = Math.floor(Math.random() * (window.innerWidth - 50));
			pizza.style.left = randomX + 'px';
		}, 2000);

setInterval(() => {
			let randomX = Math.floor(Math.random() * (window.innerWidth - 50));
			bomb.style.left = randomX + 'px';
		}, 3000);

setInterval(() => {
			let catX = cat.offsetLeft;
			let catY = cat.offsetTop;
			let pizzaX = pizza.offsetLeft;
			let pizzaY = pizza.offsetTop;

if (catX < pizzaX + 50 && catX + 50 > pizzaX && catY < pizzaY + 50 && catY + 50 > pizzaY) {
				score++;
				pizza.style.top = '0';
			}

let bombX = bomb.offsetLeft;
			let bombY = bomb.offsetTop;

if (catX < bombX + 50 && catX + 50 > bombX && catY < bombY + 50 && catY + 50 > bombY) {
				score--;
				bomb.style.top = '0';
			}

if (score < 0) {
				alert('Game over!');
				location.reload();
			}
		}, 10);
	</script>
</body>
</html>