genie lamp: It's ancient genie can grant all your wishes, you just have to write it! You can ask the genie to grant your wishes for money, health and love! It's ancient genie can grant all your wishes, you just have to write it!'s game

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

No:21749

109

←

Prev Next

→

genie lamp: It's ancient genie can grant all your ..ALL
Developer User10038｜Date and time 23/10/18 2:04:00
Build time 6.091 sec｜Game capacity 0.239KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>猫に餌をあげるゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas {
			background-color: #f9e4b7;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// 猫の画像
		var catImg = new Image();
		catImg.src = 'https://i.imgur.com/3TdExTa.png';
		// 餌の画像
		var foodImg = new Image();
		foodImg.src = 'https://i.imgur.com/6Bj834n.png';
		// 猫の初期位置
		var catX = 50;
		var catY = 50;
		// 猫の速度
		var catSpeedX = 5;
		var catSpeedY = 5;
		// 餌の初期位置
		var foods = [{
			x: 300,
			y: 300
		}];
		// スコア
		var score = 0;
		// キャンバス要素の取得
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		// キャンバスサイズの設定
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		// 猫の初期位置の設定
		catX = Math.random() * (canvas.width - catImg.width);
		catY = Math.random() * (canvas.height - catImg.height);
		// ゲームループ
		function gameLoop() {
			// 画面のクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			// 猫の移動
			catX += catSpeedX;
			catY += catSpeedY;
			// 猫が画面の端に当たったら反転する
			if (catX < 0 || catX > canvas.width - catImg.width) {
				catSpeedX = -catSpeedX;
			}
			if (catY < 0 || catY > canvas.height - catImg.height) {
				catSpeedY = -catSpeedY;
			}
			// 猫の描画
			ctx.drawImage(catImg, catX, catY);
			// 餌の描画と当たり判定
			for (var i = 0; i < foods.length; i++) {
				var food = foods[i];
				ctx.drawImage(foodImg, food.x, food.y);
				if (catX < food.x + foodImg.width && catX + catImg.width > food.x && catY < food.y + foodImg.height && catY + catImg.height > food.y) {
					// 猫と餌が重なったらスコアを加算して、餌を削除する
					score++;
					foods.splice(i, 1);
					// 猫を複製する
					var catCopyX = Math.random() * (canvas.width - catImg.width);
					var catCopyY = Math.random() * (canvas.height - catImg.height);
					ctx.drawImage(catImg, catCopyX, catCopyY);
				}
			}
			// スコアの表示
			ctx.fillStyle = '#000';
			ctx.font = '32px sans-serif';
			ctx.textAlign = 'center';
			ctx.fillText('Score: ' + score, canvas.width / 2, 50);
			// 次のフレームの処理
			requestAnimationFrame(gameLoop);
		}
		gameLoop();
		// 猫をクリックしたときの処理
		canvas.addEventListener('click', function(event) {
			// 餌を追加する
			foods.push({
				x: event.clientX - foodImg.width / 2,
				y: event.clientY - foodImg.height / 2
			});
		});
	</script>
</body>
</html>