invader game's game | AI game creator

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

No:2525

1457

invader game
Developer もちきなこ｜Date and time 23/6/21 20:56:49
Build time 35.144 sec｜Game capacity 3.05KB｜

🚀

👾

→ 　

1　

1　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>インベーダーゲーム</title>
	<style>
		body{
			background-color: black;
			overflow: hidden;
		}
		#game-screen{
			width: 100%;
			height: 100%;
			position: relative;
		}
		#player{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 50px;
		}
		#invader{
			position: absolute;
			top: 0;
			left: 0;
			font-size: 50px;
		}
		.bullet{
			position: absolute;
			top: 0;
			left: 0;
			background-color: yellow;
			width: 5px;
			height: 15px;
		}
	</style>
</head>
<body>
	<div id="game-screen">
		<p id="player">🚀</p>
		<p id="invader">👾</p>
	</div>
	<script>
		const player = document.getElementById('player');
		const invader = document.getElementById('invader');
		let score = 0;
		let intervalId = null;
		let bulletIntervalId = null;

function movePlayer(event){
			const screenWidth = window.innerWidth;
			const playerWidth = player.offsetWidth;
			const position = event.clientX - (playerWidth / 2);
			if(position < 0){
				player.style.left = 0;
			}else if(position > (screenWidth - playerWidth)){
				player.style.left = (screenWidth - playerWidth) + 'px';
			}else{
				player.style.left = position + 'px';
			}
		}

function moveInvader(){
			const invaderWidth = invader.offsetWidth;
			const invaderHeight = invader.offsetHeight;
			const screenWidth = window.innerWidth;
			const screenHeight = window.innerHeight;
			let posX = Math.floor(Math.random() * (screenWidth - invaderWidth));
			let posY = -invaderHeight;
			invader.style.top = posY + 'px';
			invader.style.left = posX + 'px';
			intervalId = setInterval(() => {
				posY += 10;
				if(posY > (screenHeight - invaderHeight)){
					clearInterval(intervalId);
					alert('Game Over!');
				}else{
					invader.style.top = posY + 'px';
				}
			}, 50);
		}

function fireBullet(){
			const bullet = document.createElement('div');
			bullet.classList.add('bullet');
			bullet.style.top = (player.offsetTop - 15) + 'px';
			bullet.style.left = (player.offsetLeft + (player.offsetWidth / 2) - 2) + 'px';
			document.getElementById('game-screen').appendChild(bullet);
			bulletIntervalId = setInterval(() => {
				const bulletPosTop = bullet.offsetTop;
				const bulletPosBottom = bulletPosTop + 15;
				const invaderPosTop = invader.offsetTop;
				const invaderPosLeft = invader.offsetLeft;
				const invaderPosRight = invaderPosLeft + invader.offsetWidth;
				if((bulletPosBottom >= invaderPosTop) && (bullet.offsetLeft >= invaderPosLeft) && (bullet.offsetLeft <= invaderPosRight)){
					clearInterval(bulletIntervalId);
					clearInterval(intervalId);
					score++;
					alert('Score: ' + score);
					moveInvader();
				}else if(bulletPosTop < 0){
					clearInterval(bulletIntervalId);
					bullet.remove();
				}else{
					bullet.style.top = (bulletPosTop - 10) + 'px';
				}
			}, 50);
		}

document.addEventListener('mousemove', movePlayer);
		document.addEventListener('click', fireBullet);

moveInvader();
	</script>
</body>
</html>