猫に餌をあげるゲーム。猫は画面を動いていて、猫をクリックすると餌をあげることができる。餌をあげると猫が増えていく。's game

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

No:2954

6413

←

Prev Next

→

猫に餌をあげるゲーム。猫は画面を動いていて、猫をクリックすると餌をあげることができる。餌をあげる..ALL
Developer User3613｜Date and time 23/6/23 7:10:22
Build time 33.128 sec｜Game capacity 2.735KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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;
			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>