AI game creator

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

No:1843

550

←

Prev Next

→

invader game
Developer User3398｜Date and time 23/6/19 5:59:03
Build time 30.203 sec｜Game capacity 2.484KB｜

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>
		canvas {
			border: 1px solid black;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="300" height="400"></canvas>
	<script>
		const canvas = document.getElementById('gameCanvas');
		const ctx = canvas.getContext('2d');
		
		const playerImg = document.createElement('img');
		playerImg.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/198/alien-monster_1f47e.png';
		
		const enemyImg = document.createElement('img');
		enemyImg.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/198/alien-monster_1f47e.png';
		
		const bulletImg = document.createElement('img');
		bulletImg.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/198/radioactive-sign_2622.png';
		
		let playerX = canvas.width/2;
		let enemyX = 20;
		let enemyY = 20;
		let bulletX, bulletY;
		let bulletFired = false;
		
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(playerImg, playerX-15, canvas.height-50, 30, 30);
			ctx.drawImage(enemyImg, enemyX, enemyY, 30, 30);
			if (bulletFired) {
				ctx.drawImage(bulletImg, bulletX, bulletY, 10, 10);
				bulletY -= 5;
				if (bulletY < 0) {
					bulletFired = false;
				}
			}
		}
		draw();
		
		document.addEventListener('keydown', function(event) {
			if (event.key === 'ArrowLeft') {
				playerX -= 10;
			} else if (event.key === 'ArrowRight') {
				playerX += 10;
			} else if (event.key === ' ') {
				if (!bulletFired) {
					bulletX = playerX;
					bulletY = canvas.height-70;
					bulletFired = true;
				}
			}
			draw();
		});
		
		function moveEnemy() {
			if (enemyX < canvas.width - 50 && enemyY < canvas.height - 50) {
				enemyX += 10;
				enemyY += 10;
			} else {
				alert('ゲームオーバー！');
				clearInterval(enemyInterval);
			}
			draw();
		}
		
		const enemyInterval = setInterval(moveEnemy, 1000);
	</script>
</body>
</html>