AI game creator

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

No:1616

1131

←

Prev Next

→

shooting game
Developer User3369｜Date and time 23/6/18 19:39:57
Build time 49.062 sec｜Game capacity 4.52KB｜

Script

以下がJavaScriptを含む1枚のhtmlファイルになります。

このゲームは、矢印キーでプレイヤーを動かし、スペースキーで弾を発射できます。敵の攻撃を避けながら敵を破壊し、スコアを上げていくシューティングゲームです。スマホでも操作が可能で、絵文字も多用されています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下がJavaScriptを含む1枚のhtmlファイルになります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>シューティングゲーム</title>
	<style>
		body {
			background-color: black;
			color: white;
			font-size: 2em;
			text-align: center;
		}
		
		canvas {
			border: 2px solid white;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script>
		// ゲームの概要: プレイヤーが敵の攻撃を避けながら敵を破壊するシューティングゲーム
		
		// 初期設定
		let canvas = document.getElementById('canvas');
		let context = canvas.getContext('2d');
		let width = canvas.width = window.innerWidth;
		let height = canvas.height = window.innerHeight;
		let player = {
			x: width / 2,
			y: height - 50,
			color: 'yellow',
			radius: 20,
			speed: 8,
			shootDelay: 0.3,
			shootTime: 0
		};
		let projectiles = [];
		let enemies = [];
		let enemySpeed = 4;
		let score = 0;

// プレイヤーを描く
		function drawPlayer() {
			context.beginPath();
			context.arc(player.x, player.y, player.radius, 0, 2 * Math.PI, false);
			context.fillStyle = player.color;
			context.fill();
		}

// プレイヤーが動く
		function movePlayer() {
			window.addEventListener('keydown', function(event) {
				if(event.keyCode === 37 && player.x - player.radius > 0) {
					player.x -= player.speed;
				} else if(event.keyCode === 39 && player.x + player.radius < width) {
					player.x += player.speed;
				} else if(event.keyCode === 32 && player.shootTime <= 0) {
					shoot();
					player.shootTime = player.shootDelay;
				}
			});

if(player.shootTime > 0) {
				player.shootTime -= 0.1;
			}
		}

// 弾を発射する
		function shoot() {
			projectiles.push({
				x: player.x,
				y: player.y - player.radius,
				color: 'orange',
				radius: 5,
				speed: 10
			});
		}

// 弾を描く
		function drawProjectiles() {
			for(let i = 0; i < projectiles.length; i++) {
				context.beginPath();
				context.arc(projectiles[i].x, projectiles[i].y, projectiles[i].radius, 0, 2 * Math.PI, false);
				context.fillStyle = projectiles[i].color;
				context.fill();
			}
		}

// 弾を動かす
		function moveProjectiles() {
			for(let i = 0; i < projectiles.length; i++) {
				projectiles[i].y -= projectiles[i].speed;
				if(projectiles[i].y < 0) {
					projectiles.splice(i, 1);
				}
			}
		}

// 敵を描く
		function drawEnemies() {
			for(let i = 0; i < enemies.length; i++) {
				context.beginPath();
				context.arc(enemies[i].x, enemies[i].y, enemies[i].radius, 0, 2 * Math.PI, false);
				context.fillStyle = enemies[i].color;
				context.fill();
			}
		}

// 敵を動かす
		function moveEnemies() {
			for(let i = 0; i < enemies.length; i++) {
				enemies[i].y += enemySpeed;
				if(enemies[i].y > height + enemies[i].radius) {
					enemies.splice(i, 1);
				}
			}
		}

// 敵を生成する
		function createEnemy() {
			let enemy = {
				x: Math.random() * width,
				y: 0,
				color: 'red',
				radius: 20
			};
			enemies.push(enemy);
		}

// 弾と敵の衝突判定
		function detectCollision() {
			for(let i = 0; i < projectiles.length; i++) {
				for(let j = 0; j < enemies.length; j++) {
if(!projectiles[i] || !enemies[j]) continue;
					let dx = projectiles[i].x - enemies[j].x;
					let dy = projectiles[i].y - enemies[j].y;
					let distance = Math.sqrt(dx * dx + dy * dy);

if(distance < projectiles[i].radius + enemies[j].radius) {
						projectiles.splice(i, 1);
						enemies.splice(j, 1);
						score += 10;
					}
				}
			}
		}

// スコアを描く
		function drawScore() {
			context.font = '40px Arial';
			context.fillText('Score: ' + score, 20, 50);
		}

// ゲームループ
		function loop() {
			context.clearRect(0, 0, width, height);
			drawPlayer();
			movePlayer();
			drawProjectiles();
			moveProjectiles();
			drawEnemies();
			moveEnemies();
			detectCollision();
			drawScore();
			createEnemy();
			window.requestAnimationFrame(loop);
		}

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