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

No:349

223

←

Prev Next

→

Create a game about cat
Developer User2968｜Date and time 23/6/12 18:32:32
Build time 43.86 sec｜Game capacity 3.624KB｜

Script

s where the player has to collect as many treats as possible while avoiding obstacles. The game can be controlled by tapping or swiping on the screen.

Cat Treats Adventure

Note: The above code is just an example and may not work properly without the required images. Please replace the image URLs with your own.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

s where the player has to collect as many treats as possible while avoiding obstacles. The game can be controlled by tapping or swiping on the screen.

<!DOCTYPE html>
<html>
<head>
	<title>Cat Treats Adventure</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: lightblue;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		h1 {
			margin-top: 50px;
			font-size: 3em;
		}
		#game {
			margin-top: 50px;
			width: 250px;
			height: 250px;
			position: relative;
			background-image: url('cat_bg.jpg');
			background-size: cover;
		}
		#cat {
			width: 50px;
			height: 50px;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -25px;
			background-image: url('cat.png');
			background-size: cover;
		}
		#treats {
			width: 25px;
			height: 25px;
			position: absolute;
			background-image: url('treat.png');
			background-size: cover;
		}
		.obstacle {
			width: 75px;
			height: 75px;
			position: absolute;
			background-image: url('obstacle.png');
			background-size: cover;
		}
	</style>
</head>
<body>
	<h1>Cat Treats Adventure</h1>
	<div id="game">
		<div id="cat"></div>
	</div>

var cat = document.getElementById("cat");
		var treats = [];
		var obstacles = [];

setInterval(function(){
			var treat = document.createElement('div');
			treat.className = "treat";

var randomX = Math.floor(Math.random() * 200);
			var randomY = 0;

treat.style.left = randomX + "px";
			treat.style.top = randomY + "px";

document.getElementById("game").appendChild(treat);
			treats.push(treat);

if(treats.length > 10){
				var firstTreat = treats.shift();
				firstTreat.parentNode.removeChild(firstTreat);
			}

for(var i = 0; i < treats.length; i++){
				var treatRect = treats[i].getBoundingClientRect();
				var catRect = cat.getBoundingClientRect();

if(isColliding(treatRect, catRect)){
					score += 10;
					treats[i].parentNode.removeChild(treats[i]);
					treats.splice(i, 1);
					updateScore();
				}
			}

var obstacle = document.createElement('div');
			obstacle.className = "obstacle";

var randomX = Math.floor(Math.random() * 200);
			var randomY = 0;

obstacle.style.left = randomX + "px";
			obstacle.style.top = randomY + "px";

document.getElementById("game").appendChild(obstacle);
			obstacles.push(obstacle);

if(obstacles.length > 3){
				var firstObstacle = obstacles.shift();
				firstObstacle.parentNode.removeChild(firstObstacle);
			}

for(var i = 0; i < obstacles.length; i++){
				var obstacleRect = obstacles[i].getBoundingClientRect();
				var catRect = cat.getBoundingClientRect();

if(isColliding(obstacleRect, catRect)){
					alert("Game Over! Your score is: " + score);
					location.reload();
				}

obstacles[i].style.top = parseInt(obstacles[i].style.top) + speed + "px";
			}

}, 1000/60);

function updateScore(){
			document.querySelector('h1').textContent = "Score: " + score;
		}

function isColliding(r1, r2){
			return !(r1.right < r2.left || 
					 r1.left > r2.right || 
					 r1.bottom < r2.top || 
					 r1.top > r2.bottom);
		}

</script>
</body>
</html>

Note: The above code is just an example and may not work properly without the required images. Please replace the image URLs with your own.