AI game creator

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

No:3067

1427

←

Prev Next

→

Cat Cat Defense
Developer もちきなこ｜Date and time 23/6/23 16:48:28
Build time 32.866 sec｜Game capacity 3.504KB｜

Script

←

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 {
			background-color: #e3f2fd;
			text-align: center;
			font-size: 20px;
		}
		#game {
			margin: 0 auto;
			border: solid 2px black;
			width: 90%;
			height: 400px;
			background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/cat-face_1f431.png");
			background-repeat: no-repeat;
			background-size: 200px 200px;
			background-position: center;
			position: relative;
		}
		#player {
			background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/boy_1f466.png");
			background-repeat: no-repeat;
			background-size: 80px 80px;
			background-position: bottom;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -40px;
			height: 80px;
			width: 80px;
		}
		#score {
			font-size: 40px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div id="game">
		<div id="player"></div>
	</div>
	<div id="score">0</div>
	<script>
		// ゲームの設定
		var score = 0;
		var playerSpeed = 10;
		var enemySpeed = 5;
		var enemyInterval = 1500;
		var enemyTimer;
		var enemies = [];
		
		// プレイヤーの移動
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 37) {
				movePlayer(-playerSpeed);
			} else if (event.keyCode == 39) {
				movePlayer(playerSpeed);
			}
		});
		
		function movePlayer(speed) {
			var player = document.getElementById("player");
			var x = player.offsetLeft + speed;
			if (x >= 0 && x <= document.getElementById("game").offsetWidth - player.offsetWidth) {
				player.style.left = x + "px";
			}
		}
		
		// エネミー
		function createEnemy() {
			var enemy = document.createElement("div");
			enemy.className = "enemy";
			enemy.style.width = "50px";
			enemy.style.height = "50px";
			enemy.style.backgroundColor = "red";
			enemy.style.position = "absolute";
			enemy.style.bottom = "0";
			enemy.style.left = Math.floor(Math.random() * (document.getElementById("game").offsetWidth - 50)) + "px";
			document.getElementById("game").appendChild(enemy);
			enemies.push(enemy);
			moveEnemy(enemy);
		}
		
		function moveEnemy(enemy) {
			var y = enemy.offsetTop + enemySpeed;
			if (y <= document.getElementById("game").offsetHeight - enemy.offsetHeight) {
				enemy.style.top = y + "px";
			} else {
				document.getElementById("game").removeChild(enemy);
				enemies.splice(enemies.indexOf(enemy), 1);
			}
			if (isCollision(enemy)) {
				gameOver();
			} else {
				setTimeout(function() {moveEnemy(enemy)}, 20);
			}
		}
		
		function isCollision(enemy) {
			var player = document.getElementById("player");
			var playerRect = player.getBoundingClientRect();
			var enemyRect = enemy.getBoundingClientRect();
			if (playerRect.bottom >= enemyRect.top && 
				playerRect.top <= enemyRect.bottom &&
				playerRect.right >= enemyRect.left &&
				playerRect.left <= enemyRect.right) {
				return true;
			}
			return false;
		}
		
		function start() {
			document.getElementById("score").innerHTML = 0;
			score = 0;
			enemies = [];
			clearInterval(enemyTimer);
			enemyTimer = setInterval(createEnemy, enemyInterval);
		}
		
		function gameOver() {
			alert("ゲームオーバー！スコア：" + score);
			start();
		}
		
		setInterval(function() {
			score++;
			document.getElementById("score").innerHTML = score;
		}, 1000);
		
		start();
	</script>
</body>
</html>