AI game creator

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

No:76

372

←

Prev Next

→

missile
Developer anonymous｜Date and time 23/5/12 13:14:26
Build time 61.062 sec｜Game capacity 2.43KB｜

Script

I have created a game that avoids the The following is the program.

Code Description: -To display players and missiles on the screen、Create the span element with JavaScript and、It is added to the BODY element. Using --setInterval、The process of dropping missiles at regular intervals is implemented. -In response to keystroke input、The process of moving the player left or right is implemented. -Collision between the missile and the player is determined.、If a collision occurs, the game is over.

←

Prev　Next

→ 　

Back　

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

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

を避けるゲームを作りました。以下がプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>ミサイル避けゲーム</title>
	<meta charset="UTF-8">
	<style>
	#player {
		position: absolute;
		top: 80%;
		left: 50%;
		font-size: 50px;
		transform: translate(-50%);
	}
	#missile {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 50px;
	}
	</style>
	<script>
	//プレイヤーの初期位置とスピード
	var playerX = 50;
	var playerSpeed = 10;

//ミサイルの初期位置とスピード
	var missileX = Math.floor(Math.random() * window.innerWidth);
	var missileY = 0;
	var missileSpeed = 5;

//スコア
	var score = 0;

window.onload = function() {
		//プレイヤーを表示
		var player = document.createElement('span');
		player.innerText = '😎';
		player.id = 'player';
		document.body.appendChild(player);

//ミサイルを表示
		var missile = document.createElement('span');
		missile.innerText = '💣';
		missile.id = 'missile';
		document.body.appendChild(missile);

//キー入力でプレイヤーを移動
		document.addEventListener('keydown', function(event) {
			if (event.key == 'ArrowLeft') {
				playerX -= playerSpeed;
			} else if (event.key == 'ArrowRight') {
				playerX += playerSpeed;
			}
		});

//ミサイルを落とす
		setInterval(function() {
			missileY += missileSpeed;
			missile.style.top = missileY + 'px';
			missile.style.left = missileX + 'px';

//ミサイルが画面外に出たら再配置
			if (missileY > window.innerHeight) {
				missileX = Math.floor(Math.random() * window.innerWidth);
				missileY = 0;
				score++;
			}

//プレイヤーとミサイルが衝突したらゲームオーバー
			if (missileY > window.innerHeight - 150 && Math.abs(missileX - playerX) < 100) {
				alert('ゲームオーバー！\nスコア：' + score);
				location.reload();
			}
		}, 20);
	};
	</script>
</head>
<body>
</body>
</html>

コードの説明：
-プレイヤーとミサイルを画面上に表示するために、span要素をJavaScriptで作成し、body要素に追加しています。
-setIntervalを使用して、一定間隔でミサイルを落とす処理を実装しています。
-キー入力に応じて、プレイヤーを左右に移動する処理を実装しています。
-ミサイルとプレイヤーの衝突判定を行い、衝突した場合はゲームオーバーとなります。